diff options
Diffstat (limited to 'docs/src/pages')
| -rw-r--r-- | docs/src/pages/guides/debugging.md | 6 | ||||
| -rw-r--r-- | docs/src/pages/reference/builtin-components.md | 19 |
2 files changed, 25 insertions, 0 deletions
diff --git a/docs/src/pages/guides/debugging.md b/docs/src/pages/guides/debugging.md new file mode 100644 index 000000000..561af0267 --- /dev/null +++ b/docs/src/pages/guides/debugging.md @@ -0,0 +1,6 @@ +--- +layout: ~/layouts/MainLayout.astro +title: Debugging +--- + +Astro runs on the server and logs directly to your terminal, so it can be difficult to debug values from Astro. Astro's built-in `<Debug>` component can help you inspect values inside your files on the clientside. Read more about the [built-in Debug Component](/reference/builtin-components#debug-). diff --git a/docs/src/pages/reference/builtin-components.md b/docs/src/pages/reference/builtin-components.md index d148c8ba0..ce64819d9 100644 --- a/docs/src/pages/reference/builtin-components.md +++ b/docs/src/pages/reference/builtin-components.md @@ -30,3 +30,22 @@ import { Prism } from 'astro/components'; ``` This component provides syntax highlighting for code blocks. Since this never changes in the client it makes sense to use an Astro component (it's equally reasonable to use a framework component for this kind of thing; Astro is server-only by default for all frameworks!). + + +## `<Debug />` + +```astro +--- +import { Debug } from 'astro/debug'; +const serverObject = { + a: 0, + b: "string", + c: { + nested: "object" + } +} +--- +<Debug {serverObject} /> +``` + +This component provides a way to inspect values on the clientside, without any JavaScript. |