我们很高兴地宣布Nuxt DevTools v1.0发布！🎉
您可以升级到最新版本的 Nuxt，然后按下浏览器中的 Shift + Option + D (macOS) 或 Shift + Alt + D (Windows) 来打开 DevTools。默认情况下，浮动面板是隐藏的，以减少干扰。您可以在 Nuxt DevTools 设置页面中启用它，或者在您的配置中明确启用它。
export default defineNuxtConfig({
devtools: {
enabled: true
}
})
我们构建 Nuxt DevTools 的原因
近年来，对开发者体验（DX）的关注日益增加。工具和框架一直在努力改进 DX。在此过程中，Nuxt 引入了许多创新功能和约定，使您的日常开发更轻松、更高效。
例如，基于文件的路由、布局系统、插件、路由中间件、可组合项自动导入、基于文件的服务器 API、强大的模块系统等等。
Nuxt 能够创建各种应用，从简单的业余项目到大型应用，从简单的客户端渲染单页应用到具有边缘无服务器功能的混合渲染站点等。我们提供这些功能和约定，使其更容易支持所有这些用例和场景。
问题
拥有一个强大的框架带来了所有这些好处，但我们也不得不做出一些权衡。有时，为了使其更易于使用，我们不得不牺牲底层实现的一些透明度。
传统的抽象是很好的东西，可以转移实现的复杂性，让构建时更容易集中注意力。另一方面，它们也可能给用户带来额外的负担，让他们学习和理解底层发生的事情。这还会导致隐晦性，例如自动导入的组件来自哪里，或者有多少模块正在使用某个组件等。它还会使调试变得困难。
权衡是不可避免的。通常我们认为这些权衡是值得的，因为它们有助于组织用户的代码库，并使其在长期内更容易维护。同时，我们也希望通过提供一个工具来帮助您了解底层发生的事情，并使学习曲线更平滑，从而弥补我们失去的透明度。
这就是 Nuxt DevTools 的用武之地！我们于 2023 年 2 月首次推出它，以尝试这个想法。经过几个月的探索和开发，社区给予了令人惊喜的积极反馈，这个想法已被证明是有用的，我们决定将其作为您 Nuxt 开发体验的核心部分。
功能
Nuxt DevTools是一套可视化工具，旨在帮助您理解 Nuxt 应用并进一步改善开发者体验。它的创建是为了在 Nuxt 和您的应用之间提供更好的透明度，查找性能瓶颈，并帮助您管理应用和配置。
应用内 DevTools
从概述来看，Nuxt DevTools 是一个与您的应用并存的应用内 DevTools。它将显示为一个浮动面板，您可以单击打开。
我们认为这比传统的浏览器扩展 DevTools 更好，因为它：
- 适用于所有浏览器，甚至在移动设备上！ - 浏览器扩展 DevTools 的功能受限于每个浏览器提供的 API，而且维护多个扩展需要大量精力。这种方法将使我们能够更专注于功能，同时让所有浏览器和设备上的用户都能使用它。
- 构建工具集成 - 传统上，浏览器扩展 DevTools 只能访问您应用的运行时上下文，而无法访问构建工具。将 DevTools 与 Nuxt 一起提供，使我们能够与构建工具通信，并提供更多的洞察和功能。
- 避免布局偏移 - 将 DevTools 作为浮动面板将避免在切换 DevTools 时发生布局偏移。
页面视图
为了帮助改善基于文件路由的隐晦性，我们在 DevTools 中引入了页面视图。它列出了您应用中所有已注册的页面，您可以轻松地测试并在它们之间导航。
组件视图
“组件”选项卡显示您应用中使用的所有组件及其来源。您还可以搜索它们并跳转到源代码。
它还提供了一个图表视图，显示组件之间的关系。您可以过滤组件以查看特定组件的依赖项。这有助于识别意外的依赖项，并提高页面的性能和捆绑包大小。
可组合项视图
可组合项视图显示所有已注册到 Nuxt 的自动导入可组合项。您可以查看哪些文件正在导入它们，以及它们来自哪里。某些条目还可以提供简短描述和文档链接。
模块管理
“模块”选项卡显示您应用中所有已注册的模块，并提供其文档和存储库的链接。
我们还提供了一键搜索和探索社区模块的功能！
静态资源管理
“资产”选项卡显示您 public 目录下的所有静态资源。它支持预览图片、视频、字体、PDF 和其他文件，您可以轻松复制 URL 或代码片段以在您的应用中使用。您也可以拖放文件，直接从 Nuxt DevTools 上传它们。
运行时配置编辑器
“运行时配置”选项卡显示您应用的运行时配置，并提供一个交互式编辑器，供您尝试不同的值。
Payload 编辑器
与运行时配置编辑器类似，Payload 编辑器允许您编辑来自诸如 useState 和 useFetch 等可组合项的 payload，以查看在服务器端渲染时从服务器传递到客户端的内容。
开放图谱预览
开放图谱在社交媒体分享中扮演着重要角色，也是搜索引擎优化。在传统工作流程中，我们通常需要先部署应用，然后才能检查开放图谱是否在各种社交媒体平台上按预期工作。通过开放图谱预览，您现在可以在 DevTools 中预览开放图谱，并通过即时反馈循环实时更新它。
我们还会帮助您检查应用中的开放图谱标签，并提供改进建议。您可以复制生成的代码片段并粘贴到您的路由中，一次性修复它们。
插件概览
插件概览列出了您应用中注册的所有插件。由于插件在您的应用渲染之前在运行时执行，因此保持插件的性能并避免阻塞渲染非常重要。我们提供每个插件的执行时间以及所有插件的总时间，以便您更好地识别潜在的性能瓶颈。
时间轴
时间轴是用于检查每个可组合项何时以及如何被调用的工具。与浏览器 DevTools 的性能工具不同，此选项卡仅检查高级可组合项与路由导航等其他事件的结合，这更接近日常使用。它还记录每次调用的参数和返回值，以便您更好地理解底层发生的情况。
生产构建分析器
虽然 Nuxt DevTools 主要专注于提供开发工具，但有时我们可能想知道生产环境中 chunk 是如何组成的。构建分析器允许您随时启动生产构建并分析 chunk 和模块，查看它们是如何打包的。您还可以在不同的分支上进行多次构建，以比较您的重构/更改如何影响包大小等。
服务器 API 调试器
Nuxt 通过服务器路由提供了一种非常方便的方式来创建服务器 API 函数。由于 Nuxt 中有这些信息，我们能够为您提供一个调试服务器 API 函数的调试器，类似于 Postman 等工具。我们自动列出您应用中所有可用的服务器 API。我们会在您应用的相同上下文中执行这些函数，因此您无需在外部工具中手动设置它们。一如既往，我们还提供了可供您复制并粘贴到应用中的代码片段。
嵌入式全功能 VS Code
得益于我们 DevTools 方法的灵活性，我们可以利用现代 Web 的强大功能，将一个全功能的 VS Code 直接嵌入到 DevTools 中。在该 VS Code 中，您可以登录您的账户并同步您的设置，所有扩展都像您的普通 VS Code 客户端一样工作。这使您无需离开浏览器即可快速编辑代码。
组件检查器
检查器允许您检查 DOM 树并查看是哪个组件正在渲染它。点击即可跳转到您的编辑器中相应的行。这使得在不彻底了解项目结构的情况下进行更改变得更加容易。
分屏
在最近的版本中，我们引入了分屏功能，允许您并排打开两个选项卡。
UI 自定义
在 DevTools 设置中，我们提供了几个选项，供您自定义要查看的选项卡和 DevTools 的布局。
生态系统
在 Nuxt 中，我们非常重视生态系统。与 Nuxt 模块增强 Nuxt 核心的方式类似，我们也设计了 Nuxt DevTools，使其具有高度可扩展性，允许模块提供额外的功能和集成。
社区模块
我们很自豪地看到社区已经开始为 Nuxt DevTools 构建模块。以下是其中一些：
Vitest 模块为您的 Nuxt 应用提供与您的 Nuxt 应用相同管道运行的测试的 Vitest UI。使您更容易在应用旁边调试测试。
VueUse 模块提供了一个搜索页面，用于查找可用的可组合项并查看其文档。
SiteMap 模块提供了一个交互式编辑器，用于管理您的站点地图。
TailwindCSS 模块提供 Tailwind Config Viewer，供您根据配置检查可用内容。
UnoCSS 模块提供了一个交互式检查器，用于查看每个模块如何贡献最终的 CSS。
Storybook 模块为您的组件提供 Storybook UI。
这只是其中一小部分！我们期待看到更多模块加入 Nuxt DevTools！
受 Nuxt DevTools 启发而产生的项目
同时，我们也感到荣幸，其他框架也开始构建受 Nuxt DevTools 启发的自己的 DevTools：
webfansplz/vite-plugin-vue-devtools- Nuxt DevTools 的移植版，用于支持 Vite + Vue 3 应用的 DevTools。pheno-agency/vite-plugin-devtools- 尝试构建与 Vite 框架无关的 DevTools。- Modern.js DevTools- Modern.js 的应用内 DevTools
- Qwik DevTools- Qwik 的 DevTools
我们正在与这些项目的维护者密切合作，探讨如何将 DevTools 体验提升到新的水平。
接下来
Nuxt DevTools 刚刚达到 v1.0 版本，但这并不意味着我们已经完成。我们还有很多东西需要探索和改进。以下是我们正在考虑的一些想法：
- Nuxt 辅助功能集成 - 我们正在为 Nuxt 构建辅助功能集成 (#23255)。我们将在 Nuxt DevTools 中构建一个专用视图，供您交互式地检查辅助功能提示。
- Vue DevTools 集成 - 我们正在与 Vue 团队合作，将 Vue DevTools 体验带入一个共享工具，该工具适用于浏览器扩展和应用内 DevTools，例如
vite-plugin-vue-devtools和 Nuxt DevTools。 - 请告诉我们您的想法/建议！
未来
我们很高兴看到 Nuxt DevTools 如何帮助您构建更好的应用程序并改善您的开发人员体验。展望未来，我们正在构想比 Nuxt DevTools 本身更大的东西。我们相信，拥有这种特定于框架的 DevTools 是提供更好开发人员体验的未来之路。我们还看到，此类工具的许多部分实际上可以跨工具共享和重用。我们提出了 DevTools Kit 的想法。
DevTools Kit
DevTools Kit 是一个仍处于早期头脑风暴阶段的通用协议构想。我们设想在最好的世界中，DevTools 的每个功能都应该可组合、可扩展和可协作。元框架可以为自己的特定需求构建自己的功能，而常见的 Web 相关工具可以在不同框架之间共享和协作。
想象一下，我们可以将所有这些功能，每个都作为一个独立的包。我们可以拥有通用的 Web 相关工具，如 SEO、辅助功能、PWA、静态资源等。然后是低级构建工具相关的，如 Vite 构建分析器、Vite 检查器或 Webpack 可视化工具等。最后，我们可以拥有特定于框架和元框架的工具，如 Vue 组件视图或 Nuxt 服务器 API 调试器等。
届时，Vue DevTools 将是通用 Web 功能和 Vue 特定功能的组合。而 Nuxt DevTools 本质上将是上述功能的组合，继承 Vue DevTools 的所有功能，并在其之上添加 Nuxt 特定功能。
甚至可以根据您的喜好组合您自己的 DevTools。
尽管如此，我们仍在思考和讨论 DevTools Kit 的细节。敬请关注更多更新！
结论
我们希望您喜欢全新的 Nuxt DevTools 体验！我们期待看到它如何帮助您构建更好的应用并改善您的开发者体验。如果您有任何想法或建议，请随时在想法与建议讨论中告诉我们。
感谢您的支持，祝您编码愉快！🚀