Nuxt DevTools v1.0 · Nuxt 博客

我们激动地宣布 Nuxt DevTools v1.0 发布！ 🎉

自此版本起，Nuxt v3.8 及更高版本默认启用 Nuxt DevTools。所有 Nuxt 项目均可通用！

您可以升级到最新的 Nuxt 版本开始体验，并在浏览器中按下 Shift + Option + D (macOS) 或 Shift + Alt + D (Windows) 打开 DevTools。默认情况下，浮动面板是隐藏的，以减少干扰。您可以在 Nuxt DevTools 设置页面中启用它，或者在您的配置中显式启用它

nuxt.config.ts

export default defineNuxtConfig({
  devtools: {
    enabled: true
  }
})

我们构建 Nuxt DevTools 的原因

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

例如，基于文件的路由，布局系统，插件，路由中间件，组合式函数自动导入，基于文件的服务器 API，强大的模块系统以及更多。

List of Nuxt features that enhance developer experience

Nuxt 能够创建各种范围的应用程序，从简单的业余项目到大型应用程序，从简单的客户端渲染单页应用程序到在边缘具有无服务器功能的混合渲染站点等等。我们提供这些功能和约定，以便更轻松地支持所有这些用例和场景。

问题

在拥有强大框架的所有这些好处中，我们不得不做出一些权衡。有时，我们必须牺牲一些底层实现的透明度，以使事情更易于使用。

"Transparency" as the trade offs of having "Conventions", "Abstractions", "Sensible Defaults" and "Normalizations"

传统的抽象非常适合转移实现的复杂性，并使构建时更容易专注于重点。另一方面，它们也会给用户增加额外的负担，需要学习和理解底层发生了什么。也会导致隐式性，例如自动导入的组件来自哪里，或者有多少模块正在使用某个组件等等。这也可能使调试变得困难。

权衡是不可避免的。总的来说，我们相信这些权衡是值得的，因为它们有助于组织用户的代码库，并使其在长期内更易于维护。与此同时，我们也希望通过提供工具来帮助您理解底层发生了什么，并使学习曲线更加平滑，从而弥补我们失去的透明度。

这就是 Nuxt DevTools 的用武之地！我们在 2023 年 2 月首次推出它，以试验这个想法。经过几个月的探索和开发，以及来自社区出乎意料的积极反馈，这个想法已被证明是有用的，我们决定使其成为您 Nuxt 开发体验的核心部分。

功能

Nuxt DevTools 是一组可视化工具，旨在帮助您理解 Nuxt 应用程序并进一步改善开发者体验。它的创建目的是为了在 Nuxt 和您的应用程序之间提供更好的透明度，查找性能瓶颈，并帮助您管理您的应用程序和配置。

应用内 DevTools

从概述来看，Nuxt DevTools 是一个与您的应用程序并存的应用内 DevTools。它将显示为一个浮动面板，您可以单击以打开。

我们认为这比传统的浏览器扩展 DevTools 更好，因为它

跨所有浏览器工作，甚至在移动设备上也是如此！ - 浏览器扩展 DevTools 的功能受到每个浏览器提供的 API 的限制，并且维护多个扩展程序也需要大量精力。这种方法使我们可以更多地关注功能和特性，同时让任何浏览器和设备上的用户都可以访问它。
构建工具集成 - 传统的浏览器扩展 DevTools 只能访问应用程序的运行时上下文，而无法访问构建工具。DevTools 随 Nuxt 一起提供，使我们能够与构建工具通信，并提供更多的洞察和功能。
避免布局偏移 - 将 DevTools 作为浮动面板可以避免切换 DevTools 时的布局偏移。

页面视图

为了帮助改善基于文件的路由的隐式性，我们在 DevTools 中引入了页面视图。它列出了应用程序中已注册的所有页面，您可以轻松地测试并在它们之间导航。

组件视图

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

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

组合式函数视图

“组合式函数”视图显示了所有注册到 Nuxt 的自动导入的组合式函数。您可以看到哪些文件正在导入它们，以及它们的来源。某些条目还可以提供简短描述和文档链接。

模块管理

“模块”选项卡显示了应用程序中注册的所有模块，并提供指向其文档和存储库的链接。

我们还为您提供了搜索和探索社区模块的功能。只需单击一下即可安装它们！

静态资源管理

“资源”选项卡显示了 public 目录下所有的静态资源。它支持预览图像、视频、字体、PDF 和其他文件，您可以轻松复制 URL 或代码片段以在您的应用程序中使用。您也可以拖放文件以直接从 Nuxt DevTools 上传它们。

运行时配置编辑器

“运行时配置”选项卡显示了应用程序的运行时配置，并提供了一个交互式编辑器供您尝试不同的值。

Payload 编辑器

与运行时配置编辑器类似，“Payload 编辑器”允许您编辑来自组合式函数（如 useState 和 useFetch）的 payload，以查看在服务器端渲染时从服务器传递到客户端的内容。

Open Graph 预览

Open Graph 在社交媒体分享以及 SEO 中起着重要的作用。在传统的工作流程中，我们通常需要先部署我们的应用程序，以检查 Open Graph 在各种社交媒体平台上是否按预期工作。借助 Open Graph 预览，您现在可以在 DevTools 中预览 Open Graph，并通过即时反馈循环实时更新它。

我们还会帮助您检查应用程序中的 Open Graph 标签，并提供改进建议。您可以复制生成的代码片段并将其粘贴到您的路由中以一次性修复它们。

插件概览

“插件概览”列出了应用程序中注册的所有插件。由于插件在应用程序渲染之前在运行时执行，因此保持插件的性能并避免阻塞渲染非常重要。我们提供了每个插件的执行时间和所有插件的总时间，以便您可以更好地识别潜在的性能瓶颈。

时间线

时间线是一个工具，供您检查每个组合式函数何时以及如何被调用。与浏览器 DevTools 的性能工具不同，此选项卡仅检查高级组合式函数与其他事件（如路由导航）的组合，这更贴近日常使用。它还记录每次调用的参数和返回值，以便您可以更好地了解底层发生了什么。

截至 2023 年 11 月，时间线仍然是一项实验性功能，需要手动选择加入。

生产构建分析器

虽然 Nuxt DevTools 主要专注于提供开发工具，但有时我们可能想知道 chunk 在生产环境中是如何组成的。“构建分析器”允许您启动生产构建并在任何时候分析 chunk 和模块，并查看它们是如何捆绑的。您还可以在不同的分支上进行多次构建，以比较您的重构/更改如何影响捆绑包大小等。

Nuxt 提供了一种非常方便的方式来使用服务器路由创建服务器 API 函数。由于我们在 Nuxt 中拥有这些信息，因此我们能够为您提供一个 playground 来测试和调试您的服务器 API 函数，类似于 Postman 等工具。我们会自动列出您的应用程序中可用的所有服务器 API。并且我们在与您的应用程序相同的上下文中执行这些函数，因此您无需在外部工具中手动设置它们。与往常一样，我们还为您准备了代码片段，供您复制并粘贴到您的应用程序中。

嵌入式全功能 VS Code

得益于我们的 DevTools 方法的灵活性，我们可以利用现代 Web 的强大功能，将全功能的 VS Code 嵌入到 DevTools 中。在 VS Code 中，您可以登录您的帐户并同步您的设置，并且所有扩展程序都像您正常的 VS Code 客户端一样工作。这使您可以快速编辑代码，而无需离开浏览器。

组件检查器

“检查器”允许您检查 DOM 树，并查看哪个组件正在渲染它。单击即可转到编辑器中特定行。使更改变得更加容易，而无需彻底了解项目结构。

分屏

在最近的版本中，我们引入了分屏功能，允许您并排打开两个选项卡。

UI 自定义

在 DevTools 设置中，我们提供了一些选项供您自定义您想看到的选项卡以及 DevTools 的布局。

生态系统

在 Nuxt 中，我们非常重视生态系统。与 Nuxt 模块如何增强 Nuxt 核心类似，我们还将 Nuxt DevTools 设计为高度可扩展的，允许模块提供额外的功能和集成。

社区模块

我们很自豪地看到社区已经开始为 Nuxt DevTools 构建模块。以下是其中一些模块

Vitest 模块为使用与您的 Nuxt 应用程序相同管道运行的测试提供 Vitest UI。使其更容易与您的应用程序一起调试您的测试。

VueUse 模块提供了一个搜索页面，用于查找可用的组合式函数并查看其文档。

SiteMap 模块提供了一个交互式编辑器，供您管理站点地图。

TailwindCSS 模块提供了 Tailwind Config Viewer，供您根据您的配置检查可用的内容。

UnoCSS 模块提供了一个交互式检查器，用于查看每个模块如何贡献最终的 CSS。

Storybook 模块为您的组件提供 Storybook UI。

这些只是一小部分！我们期待看到更多模块加入 Nuxt DevTools！

受 Nuxt DevTools 启发的项目

与此同时，我们也很荣幸看到其他框架开始构建受 Nuxt DevTools 启发的 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 相关工具可以在不同的框架之间共享和协作。

DevTools Kit

想象一下，我们可以拥有所有这些功能，每个功能都是一个独立的软件包。我们可以拥有通用的 Web 相关工具，如 SEO、可访问性、PWA、静态资源等。然后是低级构建工具相关的，如 Vite 构建分析器、Vite Inspector 或 Webpack 可视化工具等。最后，我们可以拥有框架和元框架特定的工具，如 Vue 组件视图或 Nuxt 服务器 API Playground 等。

Nuxt DevTools