Nuxt DevTools v1.0 · Nuxt 博客

我们很高兴地宣布 Nuxt DevTools v1.0 发布！🎉

自此版本起，Nuxt DevTools 在 Nuxt v3.8 及更高版本中默认启用。所有 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 上传它们。

运行时配置编辑器

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

负载编辑器

与运行时配置编辑器类似，负载编辑器允许您编辑来自可组合项（如 useState 和 useFetch）的负载，以查看服务器端渲染时从服务器传递到客户端的内容。

Open Graph 预览

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

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

插件概览

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

时间线

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

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

生产构建分析器

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

Nuxt 提供了一种非常方便的方式，可以使用服务器路由创建服务器 API 函数。由于我们在 Nuxt 中拥有该信息，因此我们能够为您提供一个用于测试和调试服务器 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 模块提供了一个搜索页面，用于查找可用的 composable 并查看其文档。

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

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

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 的体验引入到一个共享工具中，该工具既适用于浏览器扩展，也适用于像 vite-plugin-vue-devtools 和 Nuxt DevTools 这样的应用内 DevTools。
请告诉我们您的想法/建议！

未来

我们很高兴看到 Nuxt DevTools 如何帮助您构建更好的应用程序并改善您的开发人员体验。展望未来，我们正在设想比 Nuxt DevTools 本身更大的东西。我们相信，拥有这种特定于框架的 DevTools 是提供更好开发人员体验的未来方向。我们还看到此类工具的许多部分实际上可以在不同的工具之间共享和重用。我们提出了 DevTools Kit 的想法。

DevTools Kit

DevTools Kit 是一个通用协议的想法，目前仍处于早期的头脑风暴阶段。我们设想在最好的情况下，DevTools 的每个功能都应该是可组合的、可扩展的，并且是协作的。元框架可以根据其特定需求构建自己的功能，而常见的 Web 相关工具可以在不同框架之间共享和协作。

DevTools Kit

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

Nuxt DevTools