Debugging
Astro provides several different tools to help you debug your code easier and faster.
Debugging with console.log()
Section titled Debugging with console.log()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.
Frontmatter
Section titled FrontmatterA 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));
---
JS Scripts
Section titled JS ScriptsCode 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.
Debugging Framework Components
Section titled Debugging Framework ComponentsFramework 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.
Astro <Debug />
Component
Section titled Astro <Debug /> ComponentTo 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} />