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.