发布· 2023年11月13日

Nuxt DevTools v1.0

Nuxt DevTools v1.0 现已发布，正式面向所有 Nuxt 项目开放！

Anthony Fu

@antfu

我们很高兴地宣布发布 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 能够构建各种范围的应用，从简单的爱好项目到大规模应用，从简单的客户端渲染单页应用到边缘带有 Serverless 函数的混合渲染网站等。我们提供这些功能和约定，是为了更轻松地支持所有这些用例和场景。

问题所在

在享受拥有强大框架带来的所有好处的同时，我们也必须做出一些权衡。有时，为了让事情更易于使用，我们不得不牺牲底层实现的一点透明度。

"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 标签并提供改进建议。你可以复制代码片段并将其粘贴到路由中，一次性修复它们。

插件概览

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

时间轴

时间线（Timeline）是一个用于检查每个组合式函数在何时以及如何被调用的工具。与浏览器 DevTools 的性能工具不同，此标签页仅检查结合了路由导航等其他事件的高级组合式函数，这更贴近日常使用。它还记录每次调用的参数和返回值，以便你更好地理解底层发生的事情。

截至 2023 年 11 月，时间线仍是一项实验性功能，需要手动启用。

生产构建分析器

虽然 Nuxt DevTools 主要专注于提供开发工具，但有时我们可能想了解代码块（chunks）在生产环境中是如何组合的。构建分析器允许你随时启动生产构建并分析代码块和模块，查看它们是如何打包的。你还可以在不同的分支上进行多次构建，以比较重构/更改如何影响打包体积等。

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 模块提供了 Vitest UI，用于运行与 Nuxt 应用相同管道的测试。这使得在应用旁边调试测试变得更加容易。

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

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 Inspector 或 Webpack 可视化工具等。最后，我们可以拥有特定于框架和元框架的工具，如 Vue 组件视图或 Nuxt 服务器 API 游乐场等。

Nuxt DevTools