diff --git a/src/content/docs/zh-cn/guides/dev-toolbar.mdx b/src/content/docs/zh-cn/guides/dev-toolbar.mdx
new file mode 100644
index 0000000000000..ad8227a2731fe
--- /dev/null
+++ b/src/content/docs/zh-cn/guides/dev-toolbar.mdx
@@ -0,0 +1,83 @@
+---
+title: 开发者工具栏
+description: Astro 中使用开发者工具栏的指南
+i18nReady: true
+---
+
+当开发服务器运行时，Astro 会在你本地浏览器预览的每个页面底部包含一个开发者工具栏。
+
+此工具栏包含许多有用的工具，用于在开发过程中调试和检查你的网站，并且可以在集成目录中找到[更多开发者工具栏应用](#扩展开发工具栏)进行扩展。你甚至可以使用 [开发者工具栏 API](/zh-cn/reference/dev-toolbar-app-reference/)构建你自己的应用！
+
+此工具栏默认启用，并在你将鼠标悬停在页面底部时出现。它仅是一个开发工具，并不会在你的发布网站上出现。
+
+## 内置应用
+
+### Astro Menu
+
+Astro Menu 应用提供了便捷的方式来访问当前项目的各种信息和链接到额外资源。值得注意的是，它提供了一键访问 Astro 文档、GitHub 仓库和 Discord 服务器。
+
+这个应用程序还包括一个 “Copy debug info” 按钮，它将运行 [`astro info`](/zh-cn/reference/cli-reference/#astro-info) 命令并将输出复制到你的剪贴板。这在请求帮助或报告问题时可能很有用。
+
+### Inspect
+
+Inspect 应用提供了当前页面上任何[群岛结构](/zh-cn/concepts/islands/)的信息。这将向你展示传递给每个群岛的属性，以及用于渲染它们的客户端指令。
+
+### 审计
+
+Audit 应用会自动在当前页面上运行一系列审计，检查最常见的性能和无障碍问题。当发现问题时，工具栏上会出现一个红点。点击应用程序将弹出一个来自审计的结果列表，并直接在页面中高亮显示相关元素。
+
+:::note
+开发者工具栏执行的基本性能和可访问性审计，并不能取代专用工具如 [Pa11y](https://pa11y.org/) 或 [Lighthouse](https://developers.google.com/web/tools/lighthouse)，更不用说比这些工具更好的人工审查了！
+
+开发者工具栏旨在提供一种快速简便的方式，在开发过程中捕捉常见问题，无需切换到不同的工具。
+:::
+
+### 设置
+
+设置应用程序允许你切换开发工具栏的不同设置，例如详细日志记录，以及禁用通知的能力。
+
+## 扩展开发工具栏
+
+Astro 集成可以向开发工具栏添加新的应用，允许你使用特定于你的项目的自定义工具来扩展它。你可以在[集成目录中找到更多开发工具应用进行安装](https://astro.build/integrations/?search=&categories%5B%5D=toolbar)或使用 [Astro Menu](#astro-menu)。
+
+根据各自的安装说明，像安装任何其他 [Astro 集成](/zh-cn/guides/integrations-guide/) 一样，在你的项目中安装额外的开发工具栏应用集成。
+
+## 禁用开发者工具栏
+
+开发者工具栏默认为每个站点启用。你可以根据需要为单个项目和/或用户禁用它。
+
+### 按项目
+
+要为在项目中工作的每个人禁用开发者工具栏，请在 [Astro 配置文件](/zh-cn/reference/configuration-reference/)中设置 `devToolbar: false`。
+
+```js title="astro.config.mjs" ins={4-6}
+import { defineConfig } from "astro/config";
+
+export default defineConfig({
+  devToolbar: {
+    enabled: false
+  }
+})
+```
+
+要重新启用开发者工具栏，请从你的配置中删除这些行，或设置 `enabled: true`。
+
+### 按用户
+
+要在特定项目中为自己禁用开发者工具栏，请运行 [`astro preferences`](/zh-cn/reference/cli-reference/#astro-preferences) 命令。
+
+```shell
+astro preferences disable devToolbar
+```
+
+要在当前机器上为用户在所有 Astro 项目中禁用开发者工具栏，请在运行 `astro-preferences` 时添加 `--global` 标志：
+
+```shell
+astro preferences disable --global devToolbar
+```
+
+可以稍后通过以下方式启用开发者工具栏：
+
+```shell
+astro preferences enable devToolbar
+```
diff --git a/src/content/docs/zh-cn/install/auto.mdx b/src/content/docs/zh-cn/install/auto.mdx
index 8caa12691eaf9..c59ba2c1320b8 100644
--- a/src/content/docs/zh-cn/install/auto.mdx
+++ b/src/content/docs/zh-cn/install/auto.mdx
@@ -84,7 +84,7 @@ Astro 带有一个内置的开发服务器，拥有项目开发所需的一切
 
 Astro 将实时监听 `src/` 目录中的文件更改，因此你在开发过程中进行更改时无需重新启动服务器。
 
-在浏览器中查看你的站点时，你可以访问 [Astro 开发者工具栏](/zh-cn/reference/configuration-reference/#开发工具栏选项)。在你进行构建时，它将帮助你检查你的[群岛](/zh-cn/concepts/islands/)、发现无障碍性问题等等。
+在浏览器中查看你的站点时，你可以访问 [Astro 开发者工具栏](/zh-cn/guides/dev-toolbar/)。在你进行构建时，它将帮助你检查你的[群岛](/zh-cn/concepts/islands/)、发现无障碍性问题等等。
 
 如果你无法在浏览器中打开你的项目，请返回运行 `dev` 命令的终端并查看是否发生错误，或者检查你的项目的服务 URL 是否与​上方​链接的 URL 不同。
 
diff --git a/src/i18n/zh-cn/nav.ts b/src/i18n/zh-cn/nav.ts
index 9de94a5402506..ce604cf1f280b 100644
--- a/src/i18n/zh-cn/nav.ts
+++ b/src/i18n/zh-cn/nav.ts
@@ -26,6 +26,7 @@ export default NavDictionary({
 	'guides/content-collections': '内容集合',
 	'guides/view-transitions': '视图过渡动画',
 	'guides/prefetch': '预获取',
+	'guides/dev-toolbar': '开发者工具栏',
 
 	addons: '集成',
 	'guides/integrations-guide': '添加集成',