前言

大家好，我是刘明，十年创业老兵，开源技术爱好者。
近期，Nuxt团队发布了官方开发者工具Nuxt DevTools.

• 官方团队为什么要发布Nuxt DevTools？
• Nuxt DevTools都有哪些功能呢？

带着这些问题，我把官方关于Nuxt DevTools介绍的文章翻译成中文，给各位童鞋分享。

原文标题：Introducing Nuxt DevTools
原文链接： https://nuxt.com/blog/introducing-nuxt-devtools
作者：Anthony Fu
发布日期：2023年3月24日

我们在Vue Amsterdam 2023上宣布了Nuxt DevTools的预览，这是一个新工具，可帮助您了解您的 Nuxt 应用程序并进一步改善开发人员体验。今天我们发布了一个新的次要版本0.3.0，其中包含一系列更新和改进.

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

开发者体验

近年来，人们越来越关注开发人员体验 (DX)。工具和框架一直在努力改进 DX。在此过程中，Nuxt 引入了许多创新功能和约定，使您的日常开发更轻松、更高效。
在 Nuxt 3 中，我们切换到Vite作为开发期间即时热模块替换 (HMR) 的默认捆绑器，从而为您的工作流程创建一个更快的反馈循环。此外，我们还引入了Nitro ，这是一种新的服务器引擎，允许您使用零配置将 Nuxt 应用程序部署到任何托管服务，例如Vercel、Netlify、Cloudflare等。
Nuxt 提供了许多内置的常见做法：

• 在整个代码库中编写开箱即用的 TypeScript 和 ESM。
• 构建单页应用程序 (SPA)、服务器端呈现 (SSR)、静态站点生成 (SSG)，或按路由混合它们- 使用同构的相同代码库，无需任何显式设置。
• 使用多个可组合函数，例如useState和useAsyncData，用于共享跨服务器端和客户端访问的状态。
• 增强 SEO 工具，例如useHead和useSeoMeta，使meta标签管理变得轻而易举。

此外，布局系统、插件、路由中间件和其他工具等功能使应用程序创建更容易，代码库更有条理。
基于文件的路由和基于文件的服务器 API 等约定使路由直观且轻松。
组件自动导入使得创建可在任何 Vue 文件中直接使用的共享组件变得容易。与全局组件不同，它们是代码拆分的。我们还引入了组合函数自动导入，其中 Vue 的所有 API 都可以直接使用。Nuxt 模块还可以使要本地组合函数和自定义组合函数自动导。
最近，我们引入了仅在客户端和服务器端使用的组件，可以通过在文件名中添加.client和.server来使用它们。所有这些约定都是完全类型化的，开发人员甚至可以在进行路由导航或从 API 获取数据时使用类型自动完成功能。这些约定显著减少了样板代码，避免了重复，并提高了生产力。
在生态系统方面，Nuxt 拥有庞大的开发人员社区，围绕它构建模块，提供数百个高质量模块。模块允许开发人员获得他们想要的功能的集成，而无需担心配置或最佳实践。

存在的问题

Nuxt 可以轻松创建一个大规模的应用程序，但是有一个问题：缺乏透明度。
对于我们引入的每一个新特性和约定，我们都在为框架添加更多的抽象。
抽象是弱化复杂性、使构建更容易和工作更关注的好东西。另一方面，它们也会增加用户学习和理解背后原理的额外负担。例如，自动导入的组件来自何处，或者有多少模块正在使用某个组件等。它还会使代码难以调试。
我们需要权衡利弊，您必须学习和理解该工具才能有效地使用它。虽然我们改进了文档并提供了更多示例，但我们相信有机会改善缺乏透明度的问题。

介绍 Nuxt DevTools

Nuxt DevTools是一种可视化工具，可帮助您了解您的 Nuxt 应用程序并进一步改善开发人员体验。它的创建是为了提高 Nuxt 和应用程序的透明度，找到性能瓶颈并帮助您管理您的应用程序和配置。
它作为实验模块引入，并在您的应用程序内部提供视图。安装后，它会在您的应用程序底部添加一个小图标。单击它将打开 DevTools 面板。
如需试用，请参阅 安装指南。

Nuxt DevTools选项卡介绍

Overview

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

Pages

Pages选项卡显示您当前的路由，并提供一种快速导航到它们的方法。对于动态路由，它还提供了一个表单来交互式地填写每个参数。您还可以使用文本框来播放和测试每条路线的匹配情况。

Components

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

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

您还可以使用“检查器”功能检查 DOM 树并查看哪个组件正在渲染它。单击以转到特定行的编辑器。无需透彻了解项目结构，即可更轻松地进行更改。

Imports

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

Modules

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

最近我们推出了实验性升级功能，可以让您轻松升级 Nuxt 或模块。使用Terminal 选项卡，它透明地显示升级过程的输出。

Assets

显示所有静态资产及其信息的资产选项卡。您可以复制资产的路径，或使用它们的代码片段。未来，随着Nuxt Image的集成，您甚至可以一键优化图像。

Plugins

Plugins选项卡显示您在应用中使用的所有插件。由于插件在安装应用程序之前运行，因此在每个插件上花费的时间应该最少，以避免阻止应用程序呈现。提供的每个插件的时间成本可以帮助找到性能瓶颈。

Hooks

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

App Config

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

Payload & Data

此选项卡显示由,和创建的状态。了解数据是如何获取的以及状态是如何管理的，或者被动地更改它们以查看它们对您的应用程序的影响会很有帮助。对于和，您还可以手动触发重新获取。useStateuseAsyncDatauseFetchuseAsyncDatauseFetch

Terminals

在某些集成中，他们可能需要运行子流程来完成某些工作。在 DevTools 之前，您要么完全隐藏子进程的输出并吞下潜在的警告/错误，要么通过管道传输到标准输出并用多个输出污染您的终端。现在您可以在 DevTools 中获得每个进程的输出并清楚地隔离。

Virtual Files

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

Inspect

Inspect 暴露集成，允许您检查 Vite 的转换步骤。了解每个插件如何转换您的代码并发现潜在问题会很有帮助。

VS Code

感谢VS Code Server，我们能够将功能齐全的VS Code 实例集成到 DevTools 中。您可以安装扩展程序并同步您的设置。这使您能够获得更紧密的反馈循环，您可以在其中更改代码并立即查看结果，而无需离开浏览器。

Module Contributed View

考虑到生态系统，Nuxt DevTools 被设计为灵活和可扩展的。模块可以向 DevTools 贡献自己的视图，为它们的集成提供交互式数据。以下是几个例子：

• VueUse 模块提供了可用组合函数的搜索页面并查看其文档。
• UnoCSS 模块提供了一个交互式检查器来查看每个模块如何为最终的 CSS 做出贡献。
• Nuxt Icon 模块为所有可用的图标提供了一个搜索引擎。
• Nuxt Vitest 模块为使用与 Nuxt 应用程序相同的管道运行的测试提供 Vitest UI。

对于模块作者

随着v0.3.0的发布，我们提高了模块作者为 DevTools 做出贡献的能力。
这包括：

• 模块贡献视图
• 访问客户端应用程序的上下文和开发工具的实用程序
• 自定义 RPC 函数以在服务器和客户端之间进行通信
• 子进程生成和输出流程化
• @nuxt/devtools-kit- 一组实用程序可帮助您将模块与 DevTools 集成
• @nuxt/devtools-ui-kit- DevTools 中使用的 UI 组件，使您的模块的视图与 DevTools 的其余部分保持一致
• 使用 DevTools 集成创建模块的入门模板
  请查看 Devtools 模块作者指南以了解更多信息。

我们还会做什么？

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

• 提高约定的透明度
• 检查性能和分析
• 互动有趣
• 个性化文档
• 轻松管理和搭建应用程序
• 提供见解和改进
• 让开发体验更愉快
  您可以查看我们的项目路线图并分享您的想法和建议，帮助我们改进 DevTools。
  您可以通过关注GitHub 存储库和关注Nuxt 的官方 Twitter来关注最新更新。
  感谢您的阅读，我们期待您的反馈和贡献！

翻译至此结束。
我是刘明，十年创业老兵，开源技术爱好者。无论你是交流学习，还是有开发需求，欢迎私信联系。
有问题，找老刘。