开发工具栏

在开发服务器运行时，Astro 会在本地浏览器预览中的每个页面底部包含一个开发工具栏。

¥While the dev server is running, Astro includes a development toolbar at the bottom of every page in your local browser preview.

此工具栏包含许多有用的工具，可用于在开发过程中调试和检查你的网站，可以在集成目录中找到。你甚至可以使用 Dev Toolbar API 进行构建你自己的工具栏应用！

¥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 菜单

¥Astro Menu

Astro Menu 应用可轻松访问有关当前项目的各种信息以及指向额外资源的链接。值得注意的是，它提供了一键访问 Astro 文档、GitHub 存储库和 Discord 服务器的功能。

¥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.

此应用还包括一个 “复制调试信息” 按钮，它将运行 astro info 命令并将输出复制到剪贴板。在寻求帮助或报告问题时，此功能很有用。

¥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

Inspect 应用提供有关当前页面上任何 islands 的信息。这将向你显示传递给每个岛的属性，以及用于渲染它们的客户端指令。

¥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

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.

设置

¥Settings

设置应用允许你配置开发工具栏的选项，例如详细日志记录、禁用通知以及调整其在屏幕上的位置。

¥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.

扩展开发工具栏

¥Extending the dev toolbar

Astro 集成可以将新应用添加到开发工具栏，允许你使用特定于项目的自定义工具对其进行扩展。你可以找到集成目录中要安装的更多开发工具应用或使用 Astro 菜单。

¥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.

像任何其他 Astro 整合一样，根据其自己的安装说明在你的项目中安装其他开发工具栏应用集成。

¥Install additional dev toolbar app integrations in your project just like any other Astro integration according to its own installation instructions.

Related recipe: 创建开发工具栏应用

禁用开发工具栏

¥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

要为项目中的每个人禁用开发工具栏，请在 Astro 配置文件中设置 devToolbar: false。

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

import { defineConfig } from "astro/config";

export default defineConfig({
  devToolbar: {
    enabled: false
  }
})

要再次启用开发工具栏，请从配置中删除这些行，或设置 enabled:true。

¥To enable the dev toolbar again, remove these lines from your configuration, or set enabled:true.

每个用户

¥Per-user

要为自己在特定项目中禁用开发工具栏，请运行 astro preferences 命令。

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

astro preferences disable devToolbar

要为当前计算机上的用户禁用所有 Astro 项目中的开发工具栏，请在运行 astro-preferences 时添加 --global 标志：

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

astro preferences disable --global devToolbar

以后可以使用以下方式启用开发工具栏：

¥The dev toolbar can later be enabled with:

astro preferences enable devToolbar