Nuxt DevTools 简介

我们在 [Vue Amsterdam 2023](https://vuejs.amsterdam/) 发布了 [Nuxt DevTools](https://github.com/nuxt/devtools) 的预览版，这是一个帮助您理解 Nuxt 应用并进一步提升开发者体验的新工具。今天，我们发布了一个新的次要版本 [v0.3.0](https://github.com/nuxt/devtools/releases/tag/v0.3.0)，其中包含大量更新和改进。

在这篇文章中，我们将探讨创建 Nuxt DevTools 的原因、它如何增强您的开发体验以及您未来可以期待什么。

开发者体验

近年来，开发者体验 (DX) 越来越受到重视。各种工具和框架都在努力改进 DX。在此过程中，Nuxt 引入了许多创新功能和约定，使您的日常开发更加轻松高效。

在 Nuxt 3 中，我们切换到 [Vite](https://vite.vuejs.ac.cn/) 作为默认打包器，以便在开发过程中实现即时热模块替换 (HMR)，从而为您的工作流程创建更快的反馈循环。此外，我们还引入了 [Nitro](https://github.com/unjs/nitro)，这是一个新的服务器引擎，允许您将 Nuxt 应用部署到任何托管服务，例如 [Vercel](https://vercel.com)、[Netlify](https://netlify.com)、[Cloudflare](/blog/https//cloudflare.com) 和 [更多](https://nitro.unjs.io/deploy) **无需任何配置**。

Nuxt 提供了许多内置的最佳实践

• 在整个代码库中开箱即用地编写 TypeScript 和 ESM。
• 构建单页应用程序 (SPA)、服务器端渲染 (SSR)、静态网站生成 (SSG) 或 [混合它们**按路由**](/docs/guide/concepts/rendering#route-rules) - 使用相同的代码库进行同构，无需任何显式设置。
• 使用多个可组合函数，例如 [useState](/docs/api/composables/use-state) 和 [useAsyncData](/docs/api/composables/use-async-data) 来共享在服务器和客户端之间可访问的状态。
• 利用 SEO 工具，例如 [useHead](/docs/api/composables/use-head) 和 [useSeoMeta](/docs/getting-started/seo-meta#useseometa) 使元标签管理变得轻而易举。

此外，诸如 [布局系统](/docs/guide/directory-structure/layouts)、[插件](/docs/guide/directory-structure/plugins)、路由 [中间件](/docs/guide/directory-structure/middleware) 和其他工具等功能使应用程序创建更容易，代码库更井然有序。

诸如 [基于文件的路由](/docs/guide/directory-structure/pages) 和 [基于文件的服务器 API](https://nitro.unjs.io/guide/introduction/routing) 等约定使路由变得直观且轻松。

[组件自动导入](/docs/guide/directory-structure/components) 使创建可在任何 Vue 文件中直接使用的共享组件变得容易。与全局组件不同，它们是代码分割的。我们还引入了 [可组合函数自动导入](/docs/guide/concepts/auto-imports)，其中 Vue 的所有 API 都可以直接使用。Nuxt 模块还可以提供其自定义的可组合函数以自动导入，以及您的 [本地可组合函数](/docs/guide/directory-structure/composables)。

最近，我们引入了客户端和服务器端组件，可以通过在文件名中添加 .client 和 .server 来使用它们。所有这些约定都是完全类型化的，开发人员甚至在进行路由导航或从 API 获取数据时也可以获得类型自动完成。**这些约定显着减少了样板代码，避免了重复，并提高了生产力。**

在生态系统方面，Nuxt 拥有庞大的开发者社区，围绕它构建了各种模块，[提供了数百个高质量的模块](/modules)。模块允许开发人员获取他们想要的功能的集成，而无需担心配置或最佳实践。

问题

Nuxt 能够轻松创建大型应用程序，但存在一个问题：**缺乏透明度**。

对于我们引入的每个新功能和约定，我们都会为框架添加更多抽象。

抽象是转移实现复杂性并使事情变得更容易的好方法，以便在构建时更加专注。另一方面，它们也会给用户带来额外的学习和理解框架内部工作原理的负担。也导致隐含性，例如自动导入的组件来自哪里，或者有多少模块正在使用某个组件等。这也会使调试变得困难。

这可能被认为是任何工具的权衡，您必须学习并理解工具才能有效地使用它。尽管改进了文档并提供了更多示例，但**我们认为有机会改善缺乏透明度的问题**。

Nuxt DevTools 简介

[Nuxt DevTools](https://github.com/nuxt/devtools) 是一款可视化工具，可帮助您理解 Nuxt 应用并进一步提升开发者体验。它旨在提供 Nuxt 和您的应用程序的更好透明度，查找性能瓶颈并帮助您管理应用程序和配置。

它作为实验性模块发布，并在您的应用程序内部提供视图。安装后，它会在应用程序底部添加一个小图标。单击它将打开 DevTools 面板。

要尝试它，请参阅 [安装指南](https://devtools.nuxtjs.org/guide)。

概览

显示应用程序的快速概览，包括您正在使用的 Nuxt 版本、页面、组件、模块和插件。**它还会检查您的 Nuxt 版本并允许您一键升级。**

页面

页面选项卡显示您当前的路由，并提供了一种快速导航到它们的方法。对于动态路由，它还提供了一个表单，可以与每个参数交互式地填充。您还可以使用文本框来测试每个路由是如何匹配的。

组件

组件选项卡显示您在应用程序中使用的所有组件以及它们的来源。您还可以搜索它们并转到源代码。

它还提供了一个图形视图，显示组件之间的关系。您可以过滤组件以查看特定组件的依赖项。这可以帮助识别意外依赖项并提高页面的性能和捆绑包大小。

您还可以使用“检查器”功能来检查 DOM 树并查看哪个组件正在渲染它。点击跳转到您编辑器中的特定行。这使得更改变得更加容易，无需彻底了解项目结构。

导入

导入选项卡显示注册到 Nuxt 的所有自动导入。您可以查看哪些文件正在导入它们以及它们的来源。某些条目还可以提供简短的描述和文档链接。

模块

模块选项卡显示您已安装的所有模块，并提供指向其文档和源代码的链接。您可以在 [Nuxt 模块](/modules) 中找到更多可用的模块。

最近，我们引入了实验性升级功能，使您可以轻松升级 Nuxt 或模块。使用 [终端选项卡](/blog/introducing-nuxt-devtools#terminals)，它透明地显示升级过程的输出。

资源

资源选项卡显示所有静态资源及其信息。您可以复制资源的路径或使用它们的代码片段。将来，通过与 [Nuxt Image](https://image.nuxtjs.org/) 的集成，您甚至可以一键优化图像。

插件

插件选项卡显示您在应用程序中使用的所有插件。由于插件在应用程序挂载之前运行，因此每个插件花费的时间应尽可能短，以避免阻止应用程序渲染。提供的每个插件的时间成本可以帮助您查找性能瓶颈。

钩子

钩子选项卡可以帮助您监控客户端和服务器端每个钩子花费的时间。您还可以查看每个钩子注册了多少个监听器，以及它们被调用了多少次。这可以帮助您查找性能瓶颈。

应用配置

您可以在 DevTools 中检查和修改应用程序配置，尝试不同的配置并立即查看效果。

负载和数据

此选项卡显示由 [useState](/docs/api/composables/use-state)、[useAsyncData](/docs/api/composables/use-async-data) 和 [useFetch](/docs/api/composables/use-fetch) 创建的状态。这有助于了解数据是如何获取的以及状态是如何管理的，或者以反应式的方式更改它们以查看它们是否会影响您的应用程序。对于 useAsyncData 和 useFetch，您还可以手动触发重新获取。

终端

在某些集成中，它们可能需要运行子进程来执行某些作业。在 DevTools 之前，您要么完全隐藏子进程的输出并忽略潜在的警告/错误，要么将其传递到标准输出并在终端中输出多个输出。现在，您可以为每个进程在 DevTools 中获得输出，并且清晰地隔离。

虚拟文件

虚拟文件选项卡显示 Nuxt 和 Nitro 生成的虚拟文件以支持约定。这对于高级调试很有帮助。

检查

检查公开 [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) 集成，允许您检查 Vite 的转换步骤。这有助于了解每个插件如何转换您的代码并发现潜在问题。

VS Code

感谢 [VS Code Server](https://vscode.js.cn/docs/remote/vscode-server)，我们能够将一个**功能齐全的** VS Code 实例集成到 DevTools 中。您可以安装扩展程序并同步您的设置。这使您可以获得更紧密的反馈循环，您可以在其中更改代码并立即查看结果，而无需离开浏览器。

模块贡献视图

考虑到生态系统，Nuxt DevTools 旨在灵活且可扩展。模块可以为 DevTools 贡献自己的视图，以提供交互式数据和其集成的游乐场。以下是一些示例

[VueUse 模块](/modules/vueuse) 提供了一个搜索页面，用于查找可用的可组合函数并查看其文档。

[UnoCSS 模块](/modules/unocss) 提供了一个交互式检查器，以查看每个模块如何贡献到最终的 CSS。

[Nuxt Icon 模块](/modules/icon) 提供了一个所有可用图标的搜索引擎。

[Nuxt Vitest 模块](https://nuxtjs.org.cn/modules/vitest) 提供了 Vitest UI，用于使用与 Nuxt 应用相同的管道运行测试。

面向模块作者

随着 [v0.3.0](https://github.com/nuxt/devtools/releases/tag/v0.3.0) 的发布，我们改进了模块作者为 DevTools 贡献功能的能力。

它包括

• 模块贡献视图
• 访问客户端应用程序的上下文和 devtools 的实用程序
• 自定义 RPC 函数，用于在服务器和客户端之间通信
• 子进程生成和输出流式传输
• [@nuxt/devtools-kit](https://devtools.nuxtjs.org/module/utils-kit) - 一套帮助您将模块与 DevTools 集成的实用程序

• @nuxt/devtools-ui-kit - DevTools 中使用的 UI 组件，使您的模块视图与 DevTools 的其他部分保持一致
• 创建具有 DevTools 集成的模块的入门模板

请查看 Devtools 模块作者指南 以了解更多信息。

接下来会发生什么？

这仅仅是旅程的开始。我们计划为 DevTools 添加更多功能，同时探索以更直观和有趣的方式呈现数据的方法。

Nuxt DevTools 的目标是

您可以查看我们的 项目路线图 并分享您的 想法和建议，帮助我们使 DevTools 变得更好。

您可以关注最新的更新，方法是关注 GitHub 仓库，并关注 Nuxt 的官方 Twitter。

感谢您的阅读，我们期待您的反馈和贡献！