[图片来自Nuxt]

文章多数内容来自https://github.com/nuxt/devtools start点起来👏👏👏

虽然行业还处在阴云之中👀，但是对于 Vue 用户和 Nuxt 用户最近有一个令人兴奋的好消息🎉🎉！！！

@antfu 大佬(tql😱)在2023年2月9号 vuejsamsterdam 上介绍了他和 Nuxt 团队最新的项目 Nuxt Devtools。

官方的介绍是 Nuxt Devtools 是一套可视化工具，它可以帮助你更直观的去观察 Nuxt 开发的应用，带来更好的开发体验。下面会列出一些功能预览，让我们一起感受它的强大吧

[图片来自Nuxt]

waring: 目前 Nuxt Devtools 还处在开发阶段，很多api都还是实验性的，可能会出现改动。所以可以先只尝尝鲜😋

功能预览

官方给出了一个目前功能的总览 overview

Shows a quick overview of your app, including the Nuxt version, the pages, the components, the modules, and the plugins you are using. In the future we will add more, and allow you to upgrade your Nuxt with a single click.

可以显示你的应用程序的快速概述，包括Nuxt版本、页面、组件、模块和你正在使用的插件。在未来，我们将增加更多的内容，并且你只需要点一下就可以升级你的Nuxt。

查看页面路径

Pages 选项卡中帮你直观的展示了当前的路由路径，并且列出了所有的路径，你可以快速的导航到目标路径，并且你还可以使用文本框来查看每条路线的匹配情况

[图片来自Nuxt]

查看使用的组件

Components 选项卡中你可以直观的看到应用中使用的所有的组件，并且可以看到每一个组件的来源和地址，点击即可进入组件的源代码，当然你也可以方便的搜索到你想找的组件。

[图片来自Nuxt]

切换到图形视图后，会通过一个关系图显示组件之间的关系，还并了解每个组件的依赖性。xdm把牛x打在评论区！！

[图片来自Nuxt]

我感觉最实用的功能来了，你可以在界面上方便的看到要检查的UI是哪个组件渲染的，这对定位问题来说简直是神器啊😱

[图片来自Nuxt]

查看导入

Imports 选项卡可以查看项目中使用自动导入并注册到 Nuxt 中的一些方法或者 hook，点击条目即可查看它被哪些文件引用以及它们来自哪里，一些条目还可以提供简短的描述和文档链接，并且可以进行搜索。

[图片来自Nuxt]

查看模块

Modules 选项卡显示了你所安装的所有模块和它们的文档链接。在未来，我们将尝试提供一个可视化的用户界面，以一键安装新模块

[图片来自Nuxt]

查看Hooks

hooks 选项卡可以检测每个 hook 所花费的时间，对查找项目的性能瓶颈很有帮助

[图片来自Nuxt]

Virtual Files

虚拟文件选项卡显示了Nuxt生成的虚拟文件

[图片来自Nuxt]

Inspect

Inspect 暴露了 vit-plugin-inspect 的集成，这样你可以检查 Vite 的转换步骤。

[图片来自Nuxt]

上手体验

Nuxt Devtools 需要 Nuxt v3.1.0 或者更高版本

你可以通过进入你的项目根目录并运行以下命令在你的项目中启用 Nuxt DevTools。

// 在某一个项目根目录下执行 只对某一个项目生效
npx nuxi@latest devtools enable

然后重新启动你的 Nuxt 服务器，在浏览器中打开你的应用程序。点击底部的 Nuxt 图标（或按 Alt+D ）来切换 DevTools。

当你运行 nuxi devtools enable 时，Nuxt DevTools 将作为一个全局模块被安装在你的本地，只对你启用的项目进行激活。配置将被保存在你的本地 ~/.nuxtrc 文件中，所以它不会影响你的团队，除非他们也选择加入。

当然，你可以通过运行以下命令来禁用每个项目

npx nuxi@latest devtools disable

到此你就可以愉快的进行玩耍了！！！感受它带来的丝滑体验

感谢 @antfu @nuxt

欢迎点赞关注哦~