我们很高兴地宣布 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，如 useState 和 useFetch，以查看服务器渲染时从服务器传递到客户端的内容。
Open Graph 预览
Open Graph 在社交媒体分享以及 SEO 中扮演着重要角色。在传统工作流程中，我们通常需要先部署应用，以检查 Open Graph 是否在各种社交媒体平台上按预期工作。有了 Open Graph 预览，您现在可以在 DevTools 中预览 Open Graph 并实时更新它，获得即时反馈循环。
我们还帮助您检查应用中的 Open Graph 标签，并提供改进建议。您可以复制生成的代码片段，并将其粘贴到您的路由中，一次性解决它们。
插件概览
插件概览列出了您应用中注册的所有 插件。由于插件在应用渲染之前在运行时执行，因此保持插件性能并避免阻塞渲染非常重要。我们提供了每个插件的执行时间以及所有插件的总时间，以便您更好地识别潜在的性能瓶颈。
时间线
时间线是一个工具，用于检查每个可组合项何时以及如何被调用。与浏览器 DevTools 的性能工具不同，此标签仅检查与路由导航等其他事件相结合的高级可组合项，这更接近日常使用。它还记录了每次调用的参数和返回值，以便您更好地了解背后发生了什么。
生产构建分析器
虽然 Nuxt DevTools 主要集中在提供开发工具上，但有时我们可能想知道生产环境中块是如何组成的。构建分析器允许您随时启动生产构建并分析块和模块，并查看它们是如何捆绑的。您还可以在不同的分支上进行多次构建，比较您的重构/更改如何影响捆绑包大小等。
服务器 API 游乐场
Nuxt 提供了一种非常方便的方式来创建服务器 API 函数，使用 服务器路由。由于在 Nuxt 中我们有这些信息，我们能够为您提供一个游乐场，让您测试和调试您的服务器 API 函数，类似于 Postman 等工具。我们会自动列出您应用中所有可用的服务器 API。并且我们在应用的 相同上下文中 执行这些函数，因此您不需要在外部工具中手动设置它们。一如既往，我们还为您提供了代码片段，供您复制并粘贴到您的应用中。
嵌入式全功能 VS Code
由于我们 DevTools 方法的灵活性，我们可以利用现代网络的力量，在 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 启发的项目
与此同时，我们也感到荣幸，其他框架开始构建他们自己的 DevTools，受到 Nuxt 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 体验！我们期待看到它如何帮助您构建更好的应用并改善您的开发者体验。如果您有任何想法或建议，请随时在 想法和建议 讨论中告诉我们。
感谢您的支持，祝您编程愉快！ 🚀