我们在 Vue Amsterdam 2023 上发布了 Nuxt DevTools 的预览版，这是一个新的工具，旨在帮助你了解你的 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，用于共享在服务器和客户端之间可访问的状态。 - 利用 SEO 实用程序，例如
useHead和useSeoMeta，使元标签管理变得轻而易举。
此外，诸如 布局系统、插件、路由 中间件 和其他工具等功能使应用程序创建更容易，代码库更有条理。
诸如 基于文件的路由 和 基于文件的服务器 API 等约定使路由直观且毫不费力。
组件自动导入 使创建可在任何 Vue 文件中直接使用的共享组件变得容易。与全局组件不同，它们是代码拆分的。我们还引入了 组合式函数自动导入，其中 Vue 中的所有 API 都可以直接使用。Nuxt 模块还可以提供其自定义的组合式函数以进行自动导入，以及你的 本地组合式函数。
最近，我们引入了仅客户端和仅服务器组件，可以通过在文件名中添加 .client 和 .server 来使用它们。所有这些约定都是完全类型化的，开发人员甚至可以在进行路由导航或从 API 获取数据时获得类型自动完成。这些约定显着减少了样板代码，避免了重复，并提高了生产力。
在生态系统方面，Nuxt 拥有庞大的开发者社区，围绕它构建模块，有数百个高质量的模块 可用。模块允许开发人员获得他们想要的功能的集成，而无需担心配置或最佳实践。
问题
Nuxt 能够轻松创建大型应用程序，但是有一个问题：缺乏透明度。
对于我们引入的每个新功能和约定，我们都在框架中增加了一点抽象。
抽象是转移实现复杂性并使事情更容易专注于构建的好方法。另一方面，它们也会给用户带来额外的负担，让他们学习和理解底层发生了什么。还会导致隐式性，例如自动导入的组件来自哪里，或者有多少模块正在使用某个组件等等。它也可能使调试变得困难。
这可能被认为是任何工具的权衡，你必须学习和理解该工具才能有效地使用它。尽管改进了文档并提供了更多示例，我们仍然认为有机会提高透明度。
Nuxt DevTools 简介
Nuxt DevTools 是一个可视化工具，旨在帮助你了解你的 Nuxt 应用程序并进一步改善开发者体验。它的创建目的是为了提供更好的 Nuxt 和你的应用程序的透明度，查找性能瓶颈，并帮助你管理你的应用程序和配置。
它作为实验性模块发布，并在你的应用程序内部提供视图。安装后，它将在你的应用程序底部添加一个小图标。单击它将打开 DevTools 面板。
要尝试它，请参阅 安装指南。
概述
显示你的应用程序的快速概览，包括你正在使用的 Nuxt 版本、页面、组件、模块和插件。它还会检查你的 Nuxt 版本，并允许你一键升级。
页面
“页面”选项卡显示你当前的路由，并提供了一种快速导航到它们的方法。对于动态路由，它还提供了一个表单，用于交互式地填写每个参数。你还可以使用文本框来播放和测试每个路由是如何匹配的。
组件
“组件”选项卡显示你正在应用程序中使用的所有组件以及它们来自何处。你还可以搜索它们并转到源代码。
它还提供了一个图形视图，显示组件之间的关系。你可以过滤组件以查看特定组件的依赖项。这可以帮助识别意外的依赖关系，并提高页面的性能和捆绑包大小。
你还可以使用“检查器”功能来检查 DOM 树，并查看哪个组件正在渲染它。单击即可转到编辑器中的特定行。使其更容易进行更改，而无需彻底了解项目结构。
导入
“导入”选项卡显示所有注册到 Nuxt 的自动导入。你可以看到哪些文件正在导入它们，以及它们来自何处。某些条目还可以提供简短描述和文档链接。
模块
“模块”选项卡显示你已安装的所有模块，并提供指向其文档和源代码的链接。你可以在 Nuxt 模块 中找到更多可用的模块。
最近，我们引入了实验性升级功能，使你可以轻松升级你的 Nuxt 或模块。使用 终端选项卡，它透明地显示升级过程的输出。
资源
“资源”选项卡显示你的所有静态资源及其信息。你可以复制资源的路径，或使用它们的代码片段。将来，随着 Nuxt Image 的集成，你甚至可以一键优化图像。
插件
“插件”选项卡显示你正在应用程序中使用的所有插件。由于插件在应用程序挂载之前运行，因此每个插件花费的时间应尽可能少，以避免阻止应用程序渲染。提供的每个插件的时间成本有助于查找性能瓶颈。
钩子
“钩子”选项卡可以帮助你监控客户端和服务器端每个钩子中花费的时间。你还可以查看每个钩子注册了多少监听器，以及它们被调用了多少次。这有助于查找性能瓶颈。
应用配置
你可以在 DevTools 中检查和修改应用配置，尝试不同的配置并立即查看效果。
Payload & 数据
此选项卡显示由 useState、useAsyncData 和 useFetch 创建的状态。它可以帮助你了解数据是如何获取的以及状态是如何管理的，或者反应式地更改它们以查看它们是否影响你的应用程序。对于 useAsyncData 和 useFetch，你还可以手动触发重新获取。
终端
在某些集成中，它们可能需要运行子进程来执行某些作业。在 DevTools 之前，你要么完全隐藏子进程的输出并吞下潜在的警告/错误，要么管道输出到 stdout 并用多个输出污染你的终端。现在，你可以在 DevTools 中为每个进程获得输出，并清晰地隔离。
虚拟文件
“虚拟文件”选项卡显示 Nuxt 和 Nitro 生成的虚拟文件，以支持约定。这对于高级调试很有帮助。
检查
“检查”公开了 vite-plugin-inspect 集成，允许你检查 Vite 的转换步骤。它可以帮助你了解每个插件是如何转换你的代码的，并发现潜在的问题。
VS Code
感谢 VS Code Server，我们能够将功能齐全的 VS Code 实例集成到 DevTools 中。你可以安装扩展并同步你的设置。这使你可以获得更紧密的反馈循环，你可以在其中更改代码并立即查看结果，而无需离开浏览器。
模块贡献视图
考虑到生态系统，Nuxt DevTools 被设计为灵活且可扩展的。模块可以将其自己的视图贡献给 DevTools，为其集成提供交互式数据和 Playground。以下是一些示例
VueUse 模块 提供了一个搜索页面，用于查找可用的组合式函数并查看其文档。
UnoCSS 模块 提供了一个交互式检查器，用于查看每个模块如何贡献于最终的 CSS。
Nuxt Icon 模块 为所有可用的图标提供了一个搜索引擎。
Nuxt Vitest 模块 提供了 Vitest UI，用于以与你的 Nuxt 应用程序相同的管道运行测试。
对于模块作者
随着 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，以获取最新更新。
感谢你的阅读，我们期待你的反馈和贡献！