---
title: "Nuxt DevTools v1.0"
description: "Nuxt DevTools v1.0 已经发布，现在所有 Nuxt 项目都可以使用！"
canonical_url: "https://nuxt.zhcndoc.com/blog/nuxt-devtools-v1-0"
---
# Nuxt DevTools v1.0

> Nuxt DevTools v1.0 已经发布，现在所有 Nuxt 项目都可以使用！

我们很高兴地宣布 [Nuxt DevTools v1.0](https://github.com/nuxt/devtools) 的发布！ 🎉

<tip>

从这个版本开始，Nuxt DevTools 默认启用了 [Nuxt v3.8](https://nuxt.zhcndoc.com/blog/v3-8) 及更高版本。现在所有 Nuxt 项目都可以使用！

</tip>

您可以通过升级到最新版本的 Nuxt，然后在浏览器中按下 `Shift + Option + D`（macOS）或 `Shift + Alt + D`（Windows）来打开 DevTools。默认情况下浮动面板是隐藏的，以减少干扰。您可以在 Nuxt DevTools 设置页面中启用它，或者在您的配置中明确启用它：

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  devtools: {
    enabled: true
  }
})
```

## 我们为何构建 Nuxt DevTools

近年来，对开发者体验（DX）的关注日益增加。工具和框架一直在努力改善 DX。在此过程中，Nuxt 引入了许多创新特性和约定，使您的日常开发更加轻松高效。

例如，[基于文件的路由](https://nuxt.zhcndoc.com/docs/guide/directory-structure/pages)、[布局系统](https://nuxt.zhcndoc.com/docs/guide/directory-structure/layouts)、[插件](https://nuxt.zhcndoc.com/docs/guide/directory-structure/plugins)、[路由中间件](https://nuxt.zhcndoc.com/docs/guide/directory-structure/middleware)、[自动导入的可组合项](https://nuxt.zhcndoc.com/docs/guide/concepts/auto-imports)、[基于文件的服务器 API](https://nitro.zhcndoc.com/guide/routing)、[强大的模块系统](https://nuxt.zhcndoc.com/modules) 等等。

![提升开发者体验的 Nuxt 特性列表](https://nuxt.zhcndoc.com/assets/blog/devtools/slide-dx.png)

Nuxt 能够创建各种范围的应用，从简单的业余项目到大规模应用，从简单的客户端渲染的单页应用到具有无服务器函数的边缘混合渲染站点等。我们提供这些特性和约定，使其更容易支持所有这些用例和场景。

### 问题

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

!["透明度" 作为拥有 "约定"、"抽象"、"合理的默认值" 和 "规范化" 的权衡](https://nuxt.zhcndoc.com/assets/blog/devtools/slide-transparency.png)

传统的抽象是将实现复杂性转移出去并使事情更易于聚焦构建的好方法。另一方面，它们也可能给用户增加额外的负担，以学习和理解背后发生了什么。这也会导致隐含性，例如自动导入的组件来自哪里，或者有多少模块正在使用某个特定组件等。这也可能使调试变得困难。

权衡是不可避免的。通常我们认为这些权衡是值得的，因为它们将帮助组织用户的代码库，并使其更易于长期维护。与此同时，我们还希望通过提供一种工具来帮助您了解背后发生了什么，并使学习曲线更平滑，从而补偿我们失去的透明度。

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

## 特性

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

### 应用内 DevTools

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

<article-video cloudinary="v1700132388/devtools/0-intro_ilgwel">



</article-video>

我们认为这是一种比传统浏览器扩展 DevTools 更好的方法，因为它：

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

### 页面视图

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

<article-video cloudinary="v1700132393/devtools/1-pages_kkbecx">



</article-video>

### 组件视图

组件标签页显示了您在应用中使用的所有组件以及它们的来源。您也可以搜索它们并转到源代码。

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

<article-video cloudinary="v1700132398/devtools/2-components_paj0uv">



</article-video>

### 可组合视图

可组合视图显示了所有自动导入到 Nuxt 的可组合项。您可以看到哪些文件正在导入它们，以及它们来自哪里。一些条目还可以提供简短的描述和文档链接。

<article-video cloudinary="v1700132395/devtools/3-imports_qhahdf">



</article-video>

### 模块管理

模块选项卡显示您应用中注册的所有模块，以及它们的文档和代码库链接。

我们还提供了搜索和探索社区模块的能力。并且可以通过一键安装！

<article-video cloudinary="v1700132389/devtools/4-modules_v5ha5u">



</article-video>

### 静态资源管理

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

<article-video cloudinary="v1700132394/devtools/5-assets_mpzyrs">



</article-video>

### 运行时配置编辑器

运行时配置标签页显示了您应用的运行时配置，并提供了一个交互式编辑器，让您尝试不同的值。

<article-video cloudinary="v1700132393/devtools/6-runtime-configs_fzlrik">



</article-video>

### 有效载荷编辑器

与运行时配置编辑器类似，有效载荷编辑器允许您编辑来自可组合项的 payload，如 [`useState`](https://nuxt.zhcndoc.com/docs/api/composables/use-state) 和 [`useFetch`](https://nuxt.zhcndoc.com/docs/api/composables/use-fetch)，以查看服务器渲染时从服务器传递到客户端的内容。

<article-video cloudinary="v1700132389/devtools/7-payload_nfzobp">



</article-video>

### Open Graph 预览

[Open Graph](https://ogp.me/) 在社交媒体分享以及 [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) 中扮演着重要角色。在传统工作流程中，我们通常需要先部署应用，以检查 Open Graph 是否在各种社交媒体平台上按预期工作。有了 Open Graph 预览，您现在可以在 DevTools 中预览 Open Graph 并实时更新它，获得即时反馈循环。

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

<article-video cloudinary="v1700132390/devtools/8-open-graph_hjawen">



</article-video>

### 插件概览

插件概览列出了您应用中注册的所有 [插件](https://nuxt.zhcndoc.com/docs/guide/directory-structure/plugins)。由于插件在应用渲染之前在运行时执行，因此保持插件性能并避免阻塞渲染非常重要。我们提供了每个插件的执行时间以及所有插件的总时间，以便您更好地识别潜在的性能瓶颈。

<article-video cloudinary="v1700132390/devtools/9-plugins_bhcobr">



</article-video>

### 时间线

时间线是一种用于检查每个可组合项在何时以及如何被调用的工具。不同于浏览器 DevTools 的性能工具，此标签页只检查高层级的可组合项，并结合路由导航等其他事件，这更贴近日常使用。它还会记录每次调用的参数和返回值，因此您可以更好地了解底层发生了什么。

<warning>

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

</warning>

<article-video cloudinary="v1700132392/devtools/10-timeline_zeei5s">



</article-video>

### 生产构建分析器

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

<article-video cloudinary="v1700132394/devtools/11-build-analyze_f3wx6q">



</article-video>

### 服务器 API 游乐场

Nuxt 提供了一种非常方便的方式来创建服务器 API 函数，使用 [服务器路由](https://nuxt.zhcndoc.com/docs/guide/directory-structure/server#server-routes)。由于在 Nuxt 中我们有这些信息，我们能够为您提供一个游乐场，让您测试和调试您的服务器 API 函数，类似于 Postman 等工具。我们会自动列出您应用中所有可用的服务器 API。并且我们在应用的 **相同上下文中** 执行这些函数，因此您不需要在外部工具中手动设置它们。一如既往，我们还为您提供了代码片段，供您复制并粘贴到您的应用中。

<article-video cloudinary="v1700132388/devtools/12-server-api_owjyjg">



</article-video>

### 嵌入式全功能 VS Code

由于我们 DevTools 方法的灵活性，我们可以利用现代网络的力量，在 DevTools 中嵌入一个全功能的 VS Code。在那个 VS Code 中，您可以登录您的账户并同步您的设置，所有扩展就像您正常的 VS Code 客户端一样工作。这使您可以快速编辑代码，而无需离开浏览器。

<article-video cloudinary="v1700132395/devtools/13-vscode_je5x0m">



</article-video>

### 组件检查器

检查器允许您检查 DOM 树并查看哪个组件正在渲染它。点击以转到编辑器中的特定行。这使得在不需要深入了解项目结构的情况下进行更改变得更加容易。

<article-video cloudinary="v1700132391/devtools/0-inspector_fuxmr7">



</article-video>

### 分屏

在最近发布的版本中，我们引入了一个分屏功能，允许您并排打开两个标签页。

<article-video cloudinary="v1700132391/devtools/0-split-view_mdeiie">



</article-video>

### UI 自定义

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

<article-video cloudinary="v1700132391/devtools/0-settings_weflmu">



</article-video>

## 生态系统

在 Nuxt 中，我们非常重视生态系统。类似于 Nuxt 模块增强 Nuxt 核心，我们还设计了 Nuxt DevTools，让其具有高度可扩展性，允许模块提供额外的功能和集成。

### 社区模块

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

[Vitest 模块](https://nuxt.com/modules/vitest) 提供了 Vitest UI，使测试与您的 Nuxt 应用在相同的管道中运行。使您可以更轻松地调试与您的应用一起运行的测试。

<article-video cloudinary="v1700132393/devtools/99-vitest_wwikpc">



</article-video>

[VueUse 模块](https://nuxt.zhcndoc.com/modules/vueuse) 提供了一个搜索页面，用于查找可用的可组合项并查看它们的文档。

<article-video cloudinary="v1700132390/devtools/99-vueuse_simsfj">



</article-video>

[SiteMap 模块](https://nuxt.zhcndoc.com/modules/sitemap) 提供了一个交互式编辑器，供您管理您的站点地图。

<article-video cloudinary="v1700132390/devtools/99-sitemap_xpsfek">



</article-video>

[TailwindCSS 模块](https://nuxt.zhcndoc.com/modules/tailwindcss) 提供了 Tailwind 配置查看器，供您根据配置检查可用的内容。

<article-video cloudinary="v1700132388/devtools/99-tailwind_dgiodc">



</article-video>

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

<article-video cloudinary="v1700132394/devtools/99-unocss_xvii5x">



</article-video>

[Storybook 模块](https://nuxt.zhcndoc.com/modules/storybook) 为您的组件提供了一个 Storybook UI。

<article-video cloudinary="v1700132388/devtools/99-storybook_ifxt4r">



</article-video>

它们只是其中的一部分！我们期待看到更多的模块来到 Nuxt DevTools！

### 受 Nuxt DevTools 启发的项目

与此同时，我们也感到荣幸，其他框架开始构建他们自己的 DevTools，受到 Nuxt DevTools 的启发：

- [`webfansplz/vite-plugin-vue-devtools`](https://github.com/webfansplz/vite-plugin-vue-devtools)  - 一个 Nuxt DevTools 移植，支持 Vite + Vue 3 应用的 DevTools。
- [`pheno-agency/vite-plugin-devtools`](https://github.com/pheno-agency/vite-plugin-devtools)  - 一个构建与框架无关的 Vite DevTools 的实验。
- [Modern.js DevTools](https://github.com/Asuka109/modern.js/tree/dev/modernjs-devtools/packages/devtools/plugin)  - Modern.js 的应用内 DevTools
- [Qwik DevTools](https://github.com/QwikDev/devtools)  - Qwik 的 DevTools

我们正在与这些项目的维护者密切合作，看看我们如何将 DevTools 的体验提升到一个新的水平。

## 接下来是什么

Nuxt DevTools 刚刚达到了 v1.0，但这并不意味着我们已经完成了。我们仍然有很多想要探索和改进的事情。以下是我们正在考虑的一些想法：

- Nuxt 可访问性集成 - 我们正在为 Nuxt 构建一个 a11y 集成 ([#23255](https://github.com/nuxt/nuxt/issues/23255))。我们将在 Nuxt DevTools 中为您构建一个专用视图，以便您交互式地检查可访问性提示。
- Vue DevTools 集成 - 我们正在与 Vue 团队合作，将 Vue DevTools 体验带到一个共享工具中，适用于浏览器扩展和应用内 DevTools，如 `vite-plugin-vue-devtools` 和 Nuxt DevTools。
- [告诉我们您的想法/建议！](https://github.com/nuxt/devtools/discussions/29)

## 未来

我们对 Nuxt DevTools 如何帮助您构建更好的应用并改善开发者体验感到兴奋。展望未来，我们正在设想比 Nuxt DevTools 本身更宏大的东西。我们相信，拥有这样与框架相关的 DevTools 是提升开发者体验的前进方向。我们也看到，这类工具的许多部分实际上可以在不同工具之间共享和复用。于是我们提出了 DevTools Kit 的想法。

### DevTools Kit

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

![DevTools Kit](https://nuxt.zhcndoc.com/assets/blog/devtools/slide-devtools-kit.png)

想象一下，我们可以拥有这一切特性，每个都是一个独立的包。我们可以拥有与 Web 相关的通用工具，如 SEO、可访问性、PWA、静态资源等。然后是与底层构建工具相关的特性，如 Vite 构建分析器、Vite 检查器或 Webpack 可视化工具等。最后，我们还可以拥有框架和元框架特定的工具，如 Vue 组件视图，或 Nuxt 服务器 API 游乐场等。

![Nuxt DevTools](https://nuxt.zhcndoc.com/assets/blog/devtools/slide-nuxt-devtools.png)

![Nuxt DevTools](https://nuxt.zhcndoc.com/assets/blog/devtools/slide-vue-devtools.png)

那时，Vue DevTools 将由通用 Web 特性和 Vue 特定特性组成。而 Nuxt DevTools 本质上将由上述特性组成，继承 Vue DevTools 的所有特性，并在其之上添加 Nuxt 特定特性。

![Your DevTools](https://nuxt.zhcndoc.com/assets/blog/devtools/slide-your-devtools.png)

甚至可以根据您的喜好组合您自己的 DevTools。

也就是说，我们仍在思考和讨论 DevTools Kit 的细节。请继续关注更多更新！

## 结论

我们希望您喜欢新的 Nuxt DevTools 体验！我们期待看到它如何帮助您构建更好的应用并改善您的开发者体验。如果您有任何想法或建议，请随时在 [想法和建议](https://github.com/nuxt/devtools/discussions/29) 讨论中告诉我们。

感谢您的支持，祝您编程愉快！ 🚀


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.