开发工具栏
当开发服务器运行时,Astro 会在本地浏览器预览的每个页面底部包含一个开发者工具栏。
此工具栏包含了许多在开发过程中用于调试和检查站点的有用工具,并且可以通过在集成目录中找到的更多开发者工具栏应用进行扩展。你甚至可以使用 Dev Toolbar API 构建自己的工具栏应用!
此工具栏默认启用,并在你将鼠标悬停在页面底部时出现。它仅是一个开发工具,不会出现在你发布的网站上。
内置应用
标题为“内置应用”的部分Astro 菜单
标题为“Astro 菜单”的部分Astro 菜单应用可以让你轻松访问有关当前项目的各种信息以及其他资源的链接。值得注意的是,它提供了一键访问 Astro 文档、GitHub 仓库和 Discord 服务器的功能。
此应用还包括一个“复制调试信息”按钮,它将运行 astro info
命令并将输出复制到剪贴板。这在寻求帮助或报告问题时非常有用。
审查应用提供有关当前页面上任何岛屿的信息。它会显示传递给每个岛屿的属性,以及用于渲染它们的客户端指令。
审计应用会自动在当前页面上运行一系列审计,检查最常见的性能和可访问性问题。当发现问题时,工具栏中会出现一个红点。点击该应用会弹出一个审计结果列表,并直接在页面中高亮显示相关元素。
开发者工具栏执行的基本性能和可访问性审计不能替代像 Pa11y 或 Lighthouse 这样的专用工具,更不能替代人工检查!
开发者工具栏旨在提供一种快速简便的方法,在开发过程中发现常见问题,而无需切换到其他工具。
设置应用允许你配置开发者工具栏的选项,例如详细日志记录、禁用通知以及调整其在屏幕上的位置。
扩展开发者工具栏
标题为“扩展开发者工具栏”的部分Astro 集成可以向开发者工具栏添加新应用,允许你使用特定于项目的自定义工具来扩展它。你可以在集成目录中或使用 Astro 菜单找到更多可安装的开发者工具应用。
像安装任何其他 Astro 集成一样,根据其自身的安装说明,在你的项目中安装额外的开发者工具栏应用集成。

禁用开发者工具栏
标题为“禁用开发者工具栏”的部分开发者工具栏默认对每个站点启用。你可以根据需要为单个项目和/或用户选择禁用它。
按项目
标题为“按项目”的部分要为项目中的所有工作人员禁用开发者工具栏,请在 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