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>

1 files changed, 19 insertions, 0 deletions

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.