什么？你还在用 vue

前言

最近，我发现了 vite-plugin-vue-devtools，我想知道和平时用的浏览器版 Vue Devtools 到底有啥区别？ 于是果断安装了，结果发现比浏览器版香多了！

正文

首先，两者的定位其实是不一样的。

浏览器版的 Vue Devtools，大家肯定很熟，就是你在 Chrome 应用商店里安装的那个扩展。装好之后，打开浏览器的开发者工具，就能看到 Vue 组件树、props、事件、状态变化，啥都能看，很方便。

但问题也挺多的，比如：

• 有时候 Chrome 更新了，插件版本没跟上，就用不了了；
• 有些企业版浏览器或者特殊环境，根本装不了扩展；
• 移动端真机调试？很难用，几乎废了。

于是呢，vite-plugin-vue-devtools 就横空出世了。

它的思路很简单粗暴：

直接把 Devtools 面板塞进你的网页里！不靠浏览器扩展了！

用起来也很简单，装上插件，在 Vite 项目里配一下，开发环境自动注入一个小侧边栏，点一下就能打开 Vue Devtools 面板。

import { defineConfig } from'vite'
import vue from'@vitejs/plugin-vue'
import vueDevTools from'vite-plugin-vue-devtools'

// /config/
exportdefault defineConfig({
plugins: [
    vue(),
    vueDevTools(),
  ]
})

体验跟浏览器插件几乎一模一样，而且更稳。

几乎一模一样

不一样的地方有四个：vite 版多了组件 Graph 依赖视图、vite 文件审查、Asset 文件视图、组件快速定位：

不怕浏览器升级，不怕权限限制，连手机上预览项目时都能直接用，非常香。

当然啦，它也有个小限制，就是只能在开发环境生效。

一旦你打包上线了，vite-plugin-vue-devtools 的代码是不会出现在生产包里的，

所以如果你需要排查线上 bug，或者调试别人的 Vue 应用，还是得靠传统浏览器扩展版！

总结一句话：

vite-plugin-vue-devtools 更适合本地开发，浏览器版 Vue Devtools 更适合生产环境排查。

两者搭配着用，体验最好。

最后

总之，现在做 Vue 3 + Vite 开发，vite-plugin-vue-devtools 基本属于必装插件了，特别是你要做真机联调或者需要一个稳定的调试体验的时候，真的会爱上。

仓库地址： v7开始，使用的新仓库目前只有 2.7k