Nuxt DevTools 是 Nuxt 官方内置的开发者工具面板，提供性能分析、组件检查、模块管理、构建分析等能力，显著提升 Nuxt 项目的开发调试效率。
// nuxt.config.ts
export default defineNuxtConfig({
devtools: {
enabled: true,
},
})通过 nuxi init 创建的项目默认已开启。
| 方式 | 操作 |
|---|---|
| 页面图标 | 点击开发页面底部的 Nuxt 浮动图标 |
| 快捷键 | Shift + Option + D（macOS）开关面板 |
| 命令面板 | Cmd + K 打开 DevTools 内命令面板 |
首页展示项目全貌：
| 信息 | 说明 |
|---|---|
| Nuxt / Vue 版本 | 当前框架版本 |
| Pages 数量 | 已注册的页面路由数 |
| Components 数量 | 自动导入的组件数 |
| Imports 数量 | 自动导入的 API 数 |
| Modules / Plugins | 已加载的模块和插件 |
| 指标 | 含义 |
|---|---|
| SSR Load | 服务端渲染完整耗时 |
| Page Load | 页面加载总时间 |
| Navigation | 客户端路由导航耗时 |
这些指标帮助快速判断 SSR 渲染瓶颈和导航性能问题。
server/api/ 下所有 API 端点类似 VS Code 的命令面板体验：
实现从 UI 到源码的无缝定位，类似 React DevTools 的 "Open in Editor"。
| 场景 | 使用面板 |
|---|---|
| 排查路由未生效 | Pages 面板检查路由注册 |
| 组件未自动导入 | Components 面板确认导入状态 |
| SSR 渲染慢 | 首页 SSR Load 指标 |
| API 调试 | Server Routes 面板直接测试 |
| 定位源码 | 元素选择 → VS Code 跳转 |
Q: DevTools 会影响生产环境吗？
不会。DevTools 仅在开发模式（nuxt dev）下注入，生产构建不包含任何 DevTools 代码。
Q: DevTools 面板快捷键和浏览器冲突怎么办？
可在 nuxt.config.ts 中自定义快捷键，或通过浮动图标打开。团队可统一约定快捷键配置。
Q: 如何关闭 DevTools？
export default defineNuxtConfig({
devtools: { enabled: false },
})