跳转到内容

开发工具栏

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

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

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

Astro 菜单应用可以让你轻松访问有关当前项目的各种信息以及其他资源的链接。值得注意的是,它提供了一键访问 Astro 文档、GitHub 仓库和 Discord 服务器的功能。

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

审查应用提供有关当前页面上任何岛屿的信息。它会显示传递给每个岛屿的属性,以及用于渲染它们的客户端指令。

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

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

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

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

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

要为项目中的所有工作人员禁用开发者工具栏,请在 Astro 配置文件中设置 devToolbar: false

astro.config.mjs
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
贡献 社区 赞助