Skip to content

Dev Toolbar

This content is not available in your language yet.

While the dev server is running, Astro includes a development 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.

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.

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.

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.

The Settings app allows you to configure options for the development toolbar, such as verbose logging, disabling notifications, and adjusting its placement on your screen.

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.

The dev toolbar is enabled by default for every site. You can choose to disable it for individual projects and/or users as needed.

To disable the dev toolbar for everyone working on a project, set devToolbar: false in the Astro config file.

astro.config.mjs
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.

To disable the dev toolbar for yourself on a specific project, run the astro preferences command.

Terminal window
astro preferences disable devToolbar

To disable the dev toolbar in all Astro projects for a user on the current machine, add the --global flag when running astro-preferences:

Terminal window
astro preferences disable --global devToolbar

The dev toolbar can later be enabled with:

Terminal window
astro preferences enable devToolbar
Contribute

Czym chcesz się podzielić?

Create GitHub Issue

Quickest way to alert our team of a problem.

Community