我们在Nuxt DevTools于Vue Amsterdam 2023大会上宣布了预览版，这是一个旨在帮助您理解 Nuxt 应用并进一步改善开发者体验的新工具。今天，我们发布了新的次要版本v0.3.0，带来了大量更新和改进。
在本文中，我们将探讨创建 Nuxt DevTools 背后的原因、它如何增强您的开发体验，以及未来值得期待的内容。
开发者体验
近年来，人们越来越关注开发者体验（DX）。各种工具和框架都在努力改善 DX。在此过程中，Nuxt 引入了许多创新的功能和约定，使您的日常开发更加简单高效。
在 Nuxt 3 中，我们将Vite作为开发期间即时热模块替换（HMR）的默认打包器，为您的工作流程创建了更快的反馈闭环。此外，我们还引入了Nitro，这是一个全新的服务器引擎，允许您将 Nuxt 应用部署到任何托管服务，例如Vercel, Netlify, Cloudflare等等更多 且零配置.
Nuxt 内置了许多通用实践
- 在整个代码库中开箱即用地编写 TypeScript 和 ESM。
- 构建单页应用（SPA）、服务端渲染（SSR）、静态站点生成（SSG）或 按路由混合渲染 —— 无需任何显式设置，即可同构使用同一代码库。
- 使用
useState和useAsyncData等多个组合式函数（Composables），用于在服务器和客户端之间共享状态。 - 利用 SEO 工具，如
useHead和useSeoMeta，让 meta 标签的管理变得轻而易举。
此外，布局系统、插件、路由 中间件 等功能，让应用创建变得更简单，代码库也更有组织性。
基于文件的路由 和基于文件的服务器 API等约定，使路由设置直观且轻松。
组件自动导入 功能使得创建在任何 Vue 文件中直接可用的共享组件变得非常容易。与全局组件不同，它们会被代码分割。我们还引入了 组合式函数自动导入，所有的 Vue API 均可直接使用。Nuxt 模块也可以提供自定义的组合式函数供自动导入，您自己的 本地组合式函数 也是如此。
最近，我们引入了仅限客户端和仅限服务器的组件，只需在文件名后添加 .client 和 .server 即可使用。所有这些约定都有完整的类型定义，开发人员在进行路由导航或从 API 获取数据时，甚至可以获得类型自动补全。这些约定显著减少了样板代码，避免了重复，并提高了生产力。
在生态系统方面，Nuxt 拥有庞大的开发者社区，他们围绕 Nuxt 构建了 数百个高质量模块。模块允许开发人员获取所需功能的集成，而无需担心配置或最佳实践。
问题所在
Nuxt 能够轻松创建大规模应用，但存在一个问题：缺乏透明度。
我们引入的每一个新功能和约定，都在框架中增加了更多的抽象层。
抽象是转移实现复杂性并使构建时更易于专注的好东西。但另一方面，它们也增加了用户学习和理解底层原理的负担。这也导致了隐式性，比如自动导入的组件来自哪里，或者某个组件被多少个模块使用等。这也会使得调试变得困难。
这或许是任何工具在权衡后的结果，您必须学习和理解工具才能高效地使用它。尽管我们改进了文档并提供了更多示例，我们仍然认为这是一个提高透明度的机会。
介绍 Nuxt DevTools
Nuxt DevTools它是一个可视化工具，旨在帮助您理解 Nuxt 应用并进一步提升开发者体验。它的创建是为了提供 Nuxt 和您应用的更好透明度，发现性能瓶颈，并帮助您管理应用和配置。
它作为实验性模块发布，并直接在您的应用内提供视图。安装后，它会在应用底部添加一个图标。点击它将打开 DevTools 面板。
要试用它，请参阅安装指南.
概览
它展示了应用的快速概览，包括您正在使用的 Nuxt 版本、页面、组件、模块和插件。它还会检查您的 Nuxt 版本，并允许您一键升级。
页面
页面标签页显示了当前的路由并提供快速导航方式。对于动态路由，它还提供了一个表格，可以交互式地填写每个参数。您还可以使用文本框来调试和测试每个路由是如何匹配的。
组件
组件标签页展示了您在应用中使用的所有组件以及它们的来源。您还可以搜索它们并跳转到源代码。
它还提供了一个关系图视图，展示了组件之间的关联。您可以过滤组件来查看特定组件的依赖项。这有助于识别意外的依赖关系，并优化页面的性能和包体积。
您还可以使用“检查器”（Inspector）功能来查看 DOM 树，并查看是哪个组件在渲染它。点击即可跳转到编辑器中的特定行。这使得修改代码变得更加容易，无需深入了解项目结构。
导入 (Imports)
导入标签页显示了所有注册到 Nuxt 的自动导入。您可以查看是哪些文件导入了它们，以及它们来自哪里。一些条目还提供了简短的描述和文档链接。
模块
模块标签页显示了您已安装的所有模块，并提供了指向其文档和源代码的链接。您可以在 Nuxt 模块 页面找到更多可用模块。
最近我们引入了实验性的升级功能，让您可以轻松升级 Nuxt 或模块。通过终端标签页 (Terminal tab)，它清晰地显示了升级过程的输出。
资产
资产标签页显示了您所有的静态资产及其信息。您可以复制资产路径或使用它们的代码片段。未来，通过集成Vercel 上使用 Nuxt Image，您甚至可以一键优化图像。
插件
插件标签页显示了您在应用中使用的所有插件。由于插件在应用挂载前运行，因此每个插件耗时应保持最小，以避免阻塞应用渲染。提供的每个插件的耗时信息有助于发现性能瓶颈。
钩子 (Hooks)
钩子标签页可以帮助您监控客户端和服务器端每个钩子的耗时。您还可以看到每个钩子注册了多少监听器，以及它们被调用了多少次。这有助于发现性能瓶颈。
应用配置 (App Config)
您可以在 DevTools 中检查和修改应用配置，尝试不同的配置并立即查看效果。
负载与数据 (Payload & Data)
此标签页显示了由 useState、useAsyncData 和 useFetch 创建的状态。这有助于理解数据是如何获取的以及状态是如何管理的，或者通过响应式修改它们来观察它们是否影响您的应用。对于 useAsyncData 和 useFetch，您还可以手动触发重新获取。
终端 (Terminals)
在某些集成中，可能需要运行子进程来执行特定任务。在 DevTools 之前，您要么完全隐藏子进程的输出并吞掉潜在的警告/错误，要么将其管道传输到标准输出（stdout），导致终端被大量的输出信息淹没。现在，您可以在 DevTools 中为每个进程查看独立且隔离的输出。
虚拟文件 (Virtual Files)
虚拟文件标签页显示了 Nuxt 和 Nitro 为了支持各项约定而生成的虚拟文件。这对于高级调试非常有用。
检查 (Inspect)
检查页面暴露了vite-plugin-inspect集成，允许您检查 Vite 的转换步骤。这有助于理解每个插件是如何转换您的代码的，并发现潜在问题。
VS Code
得益于VS Code Server，我们能够在 DevTools 中集成一个功能齐全的 VS Code 实例。您可以安装扩展并同步设置。这使您可以实现更紧密的反馈闭环，在不离开浏览器的情况下更改代码并立即查看结果。
模块贡献视图 (Module Contributed View)
考虑到生态系统，Nuxt DevTools 被设计为灵活且可扩展的。模块可以向 DevTools 贡献它们自己的视图，为它们的集成提供交互式数据和演练场。以下是几个示例：
VueUse 模块 提供了一个搜索页面来查找可用的组合式函数并查看其文档。
UnoCSS 模块 提供了一个交互式检查器，查看每个模块如何贡献最终的 CSS。
Nuxt 图标模块 为所有可用图标提供了一个搜索引擎。
Nuxt Vitest 模块为与您的 Nuxt 应用使用相同管道运行的测试提供了 Vitest UI。
致模块作者
随着 v0.3.0 的发布，我们改进了模块作者为 DevTools 做出贡献的能力。
它包括：
- 模块贡献视图
- 访问客户端应用的上下文和 devtools 的工具函数
- 用于服务器和客户端之间通信的自定义 RPC 函数
- 子进程生成和输出流处理
@nuxt/devtools-kit- 一套帮助您将模块与 DevTools 集成的工具函数@nuxt/devtools-ui-kit- DevTools 中使用的 UI 组件，使您的模块视图与 DevTools 其余部分保持一致- 用于创建带有 DevTools 集成的模块的入门模板
请查阅Devtools 模块作者指南了解更多信息。
未来期待什么？
这仅仅是旅程的开始。我们计划为 DevTools 添加更多功能，同时探索以更直观和有趣的方式呈现数据。
Nuxt DevTools 的目标是：
- 提高约定的透明度
- 检查性能与分析
- 交互式且有趣
- 个性化文档
- 轻松管理和构建应用
- 提供见解和改进建议
- 让开发体验更愉悦
您可以查看我们的项目路线图并分享您的想法与建议，帮助我们让 DevTools 变得更好。
您可以通过对我们的GitHub 仓库加星标，并关注Nuxt 官方 Twitter.
感谢您的阅读，我们期待您的反馈和贡献！