我们很高兴地宣布 Nuxt DevTools v1.0 发布！🎉
您可以通过升级到最新版本的 Nuxt 并按下浏览器中的 Shift + Option + D（macOS）或 Shift + Alt + D（Windows）来开始使用它。默认情况下，浮动面板隐藏以减少干扰。您可以在 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 上传它们。
运行时配置编辑器
运行时配置选项卡显示应用程序的运行时配置，并提供一个交互式编辑器，供您使用不同的值。
有效负载编辑器
与运行时配置编辑器类似，有效负载编辑器允许您编辑来自组合式函数（如 useState 和 useFetch）的有效负载，以查看在服务器端渲染时从服务器传递到客户端的内容。
开放图预览
开放图 在社交媒体分享以及 SEO 中发挥着重要作用。在传统的工作流程中，我们通常需要先部署我们的应用程序，以检查开放图是否在各种社交媒体平台上按预期工作。使用开放图预览，您现在可以在 DevTools 中预览开放图，并通过即时反馈循环实时更新它。
我们还可以帮助您检查应用程序中的开放图标签并提供改进建议。您可以复制生成的代码片段并将其粘贴到您的路由中，以一键修复它们。
插件概述
插件概述列出了在您的应用程序中注册的所有 插件。由于插件在应用程序渲染之前在运行时执行，因此保持插件性能良好并避免阻塞渲染非常重要。我们提供了每个插件的执行时间以及所有插件的总时间，以便您可以更好地识别潜在的性能瓶颈。
时间线
时间线是一个工具，您可以使用它来检查每个组合式函数何时以及如何被调用。与浏览器 DevTools 的性能工具不同，此选项卡仅检查高级组合式函数与其他事件（如路由导航）的组合，这更接近日常使用。它还记录每个调用的参数和返回值，以便您可以更好地了解幕后发生的事情。
生产构建分析器
虽然 Nuxt DevTools 主要侧重于提供开发工具，但有时我们可能想知道生产环境中如何组合块。构建分析器允许您随时启动生产构建并分析块和模块，并查看它们是如何捆绑的。您还可以对不同分支进行多次构建，以比较您的重构/更改如何影响包大小等。
服务器 API 游乐场
Nuxt 提供了一种非常方便的方式，可以使用 服务器路由 创建服务器 API 函数。由于我们在 Nuxt 中拥有这些信息，因此我们能够为您提供一个游乐场，用于测试和调试您的服务器 API 函数，类似于 Postman 等工具。我们自动列出了应用程序中可用的所有服务器 API。并且我们在应用程序的相同上下文中执行这些函数，因此您无需在外部工具中手动设置它们。与往常一样，我们还提供代码片段供您复制粘贴到您的应用程序中。
嵌入式全功能 VS Code
得益于我们 DevTools 方法的灵活性，我们可以利用现代 Web 的强大功能，直接在 DevTools 中嵌入一个功能齐全的 VS Code。在该 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 构建一个 a11y 集成（#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 体验！我们期待着看到它如何帮助您构建更好的应用程序并改善您的开发体验。如果您有任何想法或建议，请随时在 想法与建议 讨论中告诉我们。
感谢您的支持，祝您编程愉快！🚀