dev-toolbar.mdx

title	description	i18nReady
开发者工具栏	Astro 中使用开发者工具栏的指南	true

import RecipeLinks from "~/components/RecipeLinks.astro";

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

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

此工具栏默认启用，并在你将鼠标悬停在页面底部时出现。它仅是一个开发工具，并不会在你的发布网站上出现。

内置应用

Astro Menu

Astro Menu 应用提供了便捷的方式来访问当前项目的各种信息和链接到额外资源。值得注意的是，它提供了一键访问 Astro 文档、GitHub 仓库和 Discord 服务器。

这个应用程序还包括一个 “Copy debug info” 按钮，它将运行 astro info 命令并将输出复制到你的剪贴板。这在请求帮助或报告问题时可能很有用。

Inspect

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

Audit

Audit 应用会自动在当前页面上运行一系列审计，检查最常见的性能和无障碍问题。当发现问题时，工具栏上会出现一个红点。点击应用程序将弹出一个来自 Audit 的结果列表，并直接在页面中高亮显示相关元素。

:::note 开发者工具栏执行的基本性能和可访问性审计，并不能取代专用工具如 Pa11y 或 Lighthouse，更不用说比这些工具更好的人工审查了！

开发者工具栏旨在提供一种快速简便的方式，在开发过程中捕捉常见问题，无需切换到不同的工具。 :::

Settings

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

扩展开发工具栏

Astro 集成可以向开发工具栏添加新的应用，允许你使用特定于你的项目的自定义工具来扩展它。你可以在 集成目录中找到更多开发工具应用进行安装 或使用 Astro Menu。

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

<RecipeLinks slugs={["zh-cn/recipes/making-toolbar-apps"]} />

禁用开发者工具栏

开发者工具栏默认为每个站点启用。你可以根据需要为单个项目和/或用户禁用它。

按项目

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

import { defineConfig } from "astro/config";

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

要重新启用开发者工具栏，请从你的配置中删除这些行，或设置 enabled: true。

按用户

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

astro preferences disable devToolbar

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

astro preferences disable --global devToolbar

可以稍后通过以下方式启用开发者工具栏：

astro preferences enable devToolbar