大家好，我是Echa。

好消息，Vue.js 官方宣布Vue DevTools 正式发布。就在前一段时间，小编发布过关于Nuxt 相关的DevTools，不知道粉丝们可否还记得。不记得也没关系——Nuxt DevTools 正式发布。其实跟整体都差不多，可以直白的的说Vue DevTools 大部分是借鉴了 Nuxt DevTools。下面小编给大家详细讲解。

全文大纲

1. Vue DevTools 介绍
2. Vue DevTools 特色
3. Vue DevTools 安装

Vue DevTools 介绍

Github：https://github.com/webfansplz/vite-plugin-vue-devtools

Vite + Vue DevTools = DX vite插件vue devtools是一个旨在增强vue开发人员体验的vite插件。

Vue DevTools 特色

页面选项卡

页面选项卡显示您的当前路线，并提供快速导航到这些路线的方法。对于动态路线，它还提供了一个表格，以交互方式填写每个参数。您也可以使用文本框来播放和测试每条路线是如何匹配的。

组件

“组件”选项卡显示您在应用程序和层次结构中使用的所有组件。您也可以选择它们来查看组件的详细信息（例如数据、道具）。

资源

显示所有静态资源及其信息的资源选项卡。您可以在浏览器中打开或下载资源。

执行时间表

执行时间表选项卡有三个类别：性能、路由器导航和Pinia。您可以在它们之间切换，以查看状态变化和时间线。

路由

“路由”选项卡是与Vue Router集成的一项功能，允许您查看已注册的路线及其详细信息。

Pinia

Pinia选项卡是与Pinia集成的一项功能，允许您查看已注册的模块及其详细信息。

图形

图形”选项卡提供了一个图形视图，用于显示组件之间的关系。

Inspect

Inspect公开了vite插件Inspect集成，允许您检查vite的转换步骤。了解每个插件是如何转换代码并发现潜在问题的，这可能很有帮助。

检查

您还可以使用“Inspector”功能来检查DOM树，并查看是哪个组件在渲染它。单击可转到特定行的编辑器。使更改变得更加容易，而不需要彻底理解项目结构。（此功能是基于vite插件vue检查器实现的）

Vue DevTools 安装

# vite-plugin-vue-devtools 

pnpm install vite-plugin-vue-devtools -D

用法

import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    VueDevTools(),
    vue(),
  ],
})

注意

• 仅在开发模式下可用。
• 仅支持Vue3.0+。
• 目前只支持单实例Vue应用程序（多实例支持即将推出）。
• 不支持SSR（如果您使用Nuxt，请直接使用Nuxt/devtools）。
• 该插件遵循Vue的devtools配置，因此如果您配置了隐藏选项，它也将应用于该插件。例如

// This Vue instance will be ignored by the plugin.
createApp({
  render: () => h(App),
  devtools: {
    hide: true,
  },
})

最后

一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。