Debugging

Astro provides several different tools to help you debug your code easier and faster.

console.log() is a simple-but-popular method of debugging your Astro code. Where you write your console.log statment will determine where your debugging output is printed.

A console.log() statement in Astro frontmatter will always output to the terminal running the Astro CLI. This is because Astro runs on the server, and never in the browser.

---
const sum = (a, b) => a + b;

// Example: Outputs "4" to the CLI terminal
console.log(sum(2, 2));
---

Code that is written or imported inside of an Astro <script> tag is run in the browser. Any console.log() statements or other debug output will be printed to the console in your browser.

Framework components (like React and Svelte) are unique: They render server-side by default, meaning that console.log() debug output will be visible in the terminal. However, they can also be hydrated for the browser, which may cause your debug logs to also appear in the browser.

This can be useful for debugging differences between the SSR output and the hydrated components in the browser.

To help you debug your Astro components, Astro provides a built-in <Debug /> component which renders any value directly into your component HTML template. This is useful for quick debugging in the browser without having to flip back-and-forth between your terminal and your browser.

---
import { Debug } from 'astro/components';
const sum = (a, b) => a + b;
---

<!-- Example: Outputs {answer: 6} to the browser -->
<Debug answer={sum(2, 4)} />

The Debug component supports a variety of syntax options for even more flexible and concise debugging:

---
import { Debug } from 'astro/components';
const sum = (a, b) => a + b;
const answer = sum(2, 4);
---
<!-- Example: All three examples are equivalent. -->
<Debug answer={sum(2, 4)} />
<Debug {{answer: sum(2, 4)}} />
<Debug {answer} />