Ask your question and get a summary of the document by referencing this page and the AI provider of your choice
If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
import RecipeLinks from "~/components/RecipeLinks.astro";
While the dev server is running, Astro includes a dev toolbar at the bottom of every page in your local browser preview.
This toolbar includes a number of useful tools for debugging and inspecting your site during development and can be extended with more dev toolbar apps found in the integrations directory. You can even build your own toolbar apps using the Dev Toolbar API!
This toolbar is enabled by default and appears when you hover over the bottom of the page. It is a development tool only and will not appear on your published site.
Built-in apps
Astro Menu
The Astro Menu app provides easy access to various information about the current project and links to extra resources. Notably, it provides one-click access to the Astro documentation, GitHub repository, and Discord server.
This app also includes a "Copy debug info" button which will run the astro info command and copy the output to your clipboard. This can be useful when asking for help or reporting issues.
Inspect
The Inspect app provides information about any islands on the current page. This will show you the properties passed to each island, and the client directive that is being used to render them.
Audit
The Audit app automatically runs a series of audits on the current page, checking for the most common performance and accessibility issues. When an issue is found, a red dot will appear in the toolbar. Clicking on the app will pop up a list of results from the audit and will highlight the related elements directly in the page.
:::note The basic performance and accessibility audits performed by the dev toolbar are not a replacement for dedicated tools like Pa11y or Lighthouse, or even better, humans!
The dev toolbar aims to provide a quick and easy way to catch common issues during development, without needing to context-switch to a different tool. :::
Settings
The Settings app allows you to configure options for the dev toolbar, such as verbose logging, disabling notifications, and adjusting its placement on your screen.
Extending the dev toolbar
Astro integrations can add new apps to the dev toolbar, allowing you to extend it with custom tools that are specific to your project. You can find more dev tool apps to install in the integrations directory or using the Astro Menu.
Install additional dev toolbar app integrations in your project just like any other Astro integration according to its own installation instructions.
<RecipeLinks slugs={["en/recipes/making-toolbar-apps"]} />
Disabling the dev toolbar
The dev toolbar is enabled by default for every site. You can choose to disable it for individual projects and/or users as needed.
Per-project
To disable the dev toolbar for everyone working on a project, set devToolbar: false in the Astro config file.
Copy the code to the clipboard
import { defineConfig } from "astro/config";export default defineConfig({ devToolbar: { enabled: false }});To enable the dev toolbar again, remove these lines from your configuration, or set enabled: true.
Per-user
To disable the dev toolbar for yourself on a specific project, run the astro preferences command.
Copy the code to the clipboard
astro preferences disable devToolbarTo disable the dev toolbar in all Astro projects for a user on the current machine, add the --global flag when running astro-preferences:
Copy the code to the clipboard
astro preferences disable --global devToolbarThe dev toolbar can later be enabled with:
Copy the code to the clipboard
astro preferences enable devToolbar