diff options
| author |  Caleb Jasik <calebjasik@jasik.xyz>
| 2021-08-23 15:43:22 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-08-23 16:43:22 -0400 |
| commit | efb41f22c34948fedfd51ba4e228e807ed7d856a (patch) | |
| tree | ea5d3a033bb28cdf1578d167afe43551e913cb7d /docs/src | |
| parent | 2fd004dcd99c09fc8eae423c24b31313568f039f (diff) | |
| download | astro-efb41f22c34948fedfd51ba4e228e807ed7d856a.tar.gz astro-efb41f22c34948fedfd51ba4e228e807ed7d856a.tar.zst astro-efb41f22c34948fedfd51ba4e228e807ed7d856a.zip | |
Add Astro `<Debug/>` component (#675)
* Initial MVP Debug component
* Document the prettifying of the input
* Just make `<Debug/>` a wrapper around `<Prism/>` lol
* feat: add details/summary debug component
* chore: remove Props (unused)
* fix: prefer `div` to semantic elements
* chore: format
* fix: prop-drill `class` into components
* fix: ensure `astro/components` are evaluated lazily
* feat(debug): export debug component from `astro/debug`
* fix: minimal example local snowpack config
* docs: add debugging docs
* chore: add changeset
* docs: update debug docs
Co-authored-by: Nate Moore <nate@skypack.dev>
Diffstat (limited to 'docs/src')
| -rw-r--r-- | docs/src/config.ts | 1 | ||||
| -rw-r--r-- | docs/src/pages/guides/debugging.md | 6 | ||||
| -rw-r--r-- | docs/src/pages/reference/builtin-components.md | 19 |
3 files changed, 26 insertions, 0 deletions
diff --git a/docs/src/config.ts b/docs/src/config.ts index 40833bac6..675913a23 100644 --- a/docs/src/config.ts +++ b/docs/src/config.ts @@ -18,6 +18,7 @@ export const SIDEBAR = { { text: 'Guides', header: true }, { text: 'Styling & CSS', link: 'guides/styling' }, { text: 'Markdown', link: 'guides/markdown-content' }, + { text: 'Debugging', link: 'guides/debugging' }, { text: 'Data Fetching', link: 'guides/data-fetching' }, { text: 'Pagination', link: 'guides/pagination' }, { text: 'RSS', link: 'guides/rss' }, 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. |