feat: Add a high-level page about the dev toolbar

src/content/docs/en/guides/dev-toolbar.mdx

@@ -0,0 +1,83 @@
+---
+title: Dev Toolbar
+description: A guide to using the developer toolbar in Astro
+i18nReady: true
+---
+
+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](#extending-the-dev-toolbar) found in the integrations directory. You can even build your own apps using the [Dev Toolbar API](/en/reference/dev-toolbar-app-reference/)!
+
+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`](/en/reference/cli-reference/#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](/en/concepts/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](https://pa11y.org/) or [Lighthouse](https://developers.google.com/web/tools/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 toggle different settings for the development toolbar, such as verbose logging, and the ability to disable notifications.
+
+## 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](https://astro.build/integrations/?search=&categories%5B%5D=toolbar) or using the [Astro Menu](#astro-menu).
+
+Install additional dev toobar app integrations in your project just like any other [Astro integration](/en/guides/integrations-guide/) according to its own installation instructions.
+
+## 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](/en/reference/configuration-reference/).
+
+```js title="astro.config.mjs" ins={4-6}
+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`](/en/reference/cli-reference/#astro-preferences) command.
+
+```shell
+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`:
+
+```shell
+astro preferences disable --global devToolbar
+```
+
+The dev toolbar can later be enabled with:
+
+```shell
+astro preferences enable devToolbar
+```

src/content/docs/en/install/auto.mdx

@@ -85,7 +85,7 @@ If all goes well, Astro should now be serving your project on [http://localhost:
 
 Astro will listen for live file changes in your `src/` directory, so you will not need to restart the server as you make changes during development.
 
-When viewing your site in the browser, you'll have access to the [Astro dev toolbar](/en/reference/configuration-reference/#dev-toolbar-options). As you build, it will help you inspect your [islands](/en/concepts/islands/), spot accessibility issues, and more.
+When viewing your site in the browser, you'll have access to the [Astro dev toolbar](/en/guides/dev-toolbar/). As you build, it will help you inspect your [islands](/en/concepts/islands/), spot accessibility issues, and more.
 
 If you aren't able to open your project in the browser, go back to the terminal where you ran the `dev` command and look to see if an error occurred, or if your project is being served at a different URL than the one linked to above.
 

src/i18n/en/nav.ts

@@ -80,6 +80,11 @@ export default [
 		slug: 'guides/prefetch',
 		key: 'guides/prefetch',
 	},
+	{
+		text: 'Dev Toolbar',
+		slug: 'guides/dev-toolbar',
+		key: 'guides/dev-toolbar',
+	},
 
 	{ text: 'Integrations', header: true, type: 'learn', key: 'addons' },
 	{ text: 'Add integrations', slug: 'guides/integrations-guide', key: 'guides/integrations-guide' },