我们很高兴地宣布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 只能访问您应用程序的运行时上下文，而无法访问构建工具。Nuxt 附带 DevTools，这使我们能够与构建工具进行通信，并提供更多的见解和功能。
- 避免布局偏移 - 将 DevTools 作为浮动面板可以避免在切换 DevTools 时发生布局偏移。
页面视图
为了帮助改善基于文件路由的隐含性，我们在 DevTools 中引入了页面视图。它列出了您应用程序中所有已注册的页面，您可以轻松地测试和在它们之间导航。
组件视图
组件选项卡显示了您应用程序中使用的所有组件以及它们的来源。您还可以搜索它们并跳转到源代码。
它还提供了一个图形视图，显示组件之间的关系。您可以过滤组件以查看特定组件的依赖项。这有助于识别意外的依赖项并提高页面的性能和捆绑包大小。
可组合函数视图
可组合函数视图显示了所有注册到 Nuxt 的自动导入可组合函数。您可以看到哪些文件正在导入它们，以及它们来自哪里。某些条目还可以提供简短的描述和文档链接。
模块管理
模块选项卡显示了您应用程序中所有已注册的模块，并提供指向其文档和存储库的链接。
我们还提供搜索和探索社区模块的功能。只需单击一下即可安装它们！
静态资源管理
资产选项卡显示您的 public 目录下的所有静态资产。它支持预览图像、视频、字体、PDF 和其他文件，您可以轻松复制 URL 或代码片段以在您的应用程序中使用。您还可以通过拖放文件直接从 Nuxt DevTools 上传它们。
运行时配置编辑器
运行时配置选项卡显示您应用程序的运行时配置，并提供一个交互式编辑器供您尝试不同的值。
Payload 编辑器
与运行时配置编辑器类似，Payload 编辑器允许您编辑来自 useState 和 useFetch 等可组合项的 Payload，以查看在服务器端渲染时从服务器传递到客户端的内容。
Open Graph 预览
Open Graph在社交媒体分享以及搜索引擎优化中扮演着重要角色。在传统工作流程中，我们通常需要先部署我们的应用程序，然后才能检查 Open Graph 是否在各种社交媒体平台上按预期工作。通过 Open Graph 预览，您现在可以在 DevTools 中预览 Open Graph，并通过即时反馈循环实时更新它。
我们还帮助您检查应用程序中的 Open Graph 标签，并提供改进建议。您可以复制生成的代码片段并将其粘贴到您的路由中，以一次性修复它们。
插件概览
插件概览列出了您的应用程序中所有已注册的插件。由于插件在您的应用程序渲染之前在运行时执行，因此保持插件高性能并避免阻塞渲染非常重要。我们提供每个插件的执行时间以及所有插件的总时间，以便您更好地识别潜在的性能瓶颈。
时间轴
时间线是一个工具，用于检查每个可组合项何时以及如何被调用。与浏览器 DevTools 的性能工具不同，此选项卡仅检查高级别的可组合项与其他事件（如路由导航）的结合，这更接近日常使用。它还记录了每个调用的参数和返回值，因此您可以更好地理解底层发生的事情。
生产构建分析器
虽然 Nuxt DevTools 主要专注于提供开发工具，但有时我们可能想知道生产环境中块是如何组成的。构建分析器允许您随时启动生产构建并分析块和模块，查看它们是如何打包的。您还可以在不同的分支上进行多次构建，以比较您的重构/更改如何影响捆绑包大小等。
服务器 API 调试器
Nuxt 通过服务器路由提供了一种非常方便的方式来创建服务器 API 函数。由于在 Nuxt 中我们拥有这些信息，我们能够为您提供一个调试服务器 API 函数的调试器，类似于 Postman 等工具。我们自动列出您的应用程序中所有可用的服务器 API。并且我们在您应用程序的相同上下文中执行这些函数，因此您无需在外部工具中手动设置它们。一如既往，我们还为您提供代码片段，您可以复制并粘贴到您的应用程序中。
嵌入式全功能 VS Code
得益于我们 DevTools 方法的灵活性，我们可以利用现代网络的强大功能，将一个全功能的 VS Code 直接嵌入到 DevTools 中。在这个 VS Code 中，您可以登录您的帐户并同步您的设置，所有扩展都像您的普通 VS Code 客户端一样工作。这使您无需离开浏览器即可快速编辑代码。
组件检查器
检查器允许您检查 DOM 树并查看是哪个组件正在渲染它。点击即可跳转到您的编辑器中的特定行。这使得在不要求彻底了解项目结构的情况下进行更改变得更加容易。
分屏
在最近的版本中，我们引入了分屏功能，允许您并排打开两个选项卡。
UI 定制
在 DevTools 设置中，我们提供了一些选项供您自定义要查看的选项卡以及 DevTools 的布局。
生态系统
在 Nuxt 中，我们非常重视生态系统。与 Nuxt 模块增强 Nuxt 核心的方式类似，我们也设计了 Nuxt DevTools 具有高度可扩展性，允许模块提供额外的功能和集成。
社区模块
我们很自豪地看到社区已经开始为 Nuxt DevTools 构建模块。以下是其中一些
Vitest 模块为与您的 Nuxt 应用程序使用相同管道运行的测试提供 Vitest UI。使您更容易在应用程序旁边调试测试。
VueUse 模块提供了一个搜索页面，用于查找可用的可组合项并查看其文档。
SiteMap 模块提供了一个交互式编辑器，用于管理您的站点地图。
TailwindCSS 模块提供 Tailwind 配置查看器，供您根据配置检查可用内容。
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 体验！我们期待看到它如何帮助您构建更好的应用程序并改善您的开发者体验。如果您有任何想法或建议，请随时在想法与建议讨论区告诉我们。
感谢您的支持，祝您编程愉快！🚀