我们在 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 中检查和修改应用配置，尝试不同的配置并立即查看效果。
负载 & 数据
此选项卡显示由 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 贡献自己的视图，为其集成提供交互式数据和游乐场。以下是一些示例：
VueUse 模块提供了一个可用的组合式函数搜索页面，并查看其文档。
UnoCSS 模块提供了一个交互式检查器，以查看每个模块如何贡献最终的 CSS。
Nuxt Icon 模块为所有可用的图标提供搜索引擎。
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来获取最新动态。
感谢您的阅读，我们期待您的反馈和贡献！