前言
最近，我发现了 vite-plugin-vue-devtools，我想知道和平时用的浏览器版 Vue Devtools 到底有啥区别？ 于是果断安装了，结果发现比浏览器版香多了！
往期精彩推荐
- 🚀🚀🚀 神了！RedwoodJS 轻松碾压 NextJS，成了我的最爱❤️
- 🚀🚀🚀 2025 年了，我不允许你还不知道 vite-plugin-pwa
- ⚡⚡⚡尤雨溪宣布开发 Vite Devtools，这两个很哇塞 🚀 的 Vite 插件，你一定要知道！
- 更多精彩文章欢迎关注我的公众号：萌萌哒草头将军
正文
首先，两者的定位其实是不一样的。
浏览器版的 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'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
]
})
体验跟浏览器插件几乎一模一样，而且更稳。
不一样的地方有四个：vite 版多了组件 Graph 依赖视图、vite 文件审查、Asset 文件视图、组件快速定位：
| Graph 视图 | vite 审查 | Asset 文件 | Dom 定位 |
|---|---|---|---|
不怕浏览器升级，不怕权限限制，连手机上预览项目时都能直接用，非常香。
当然啦，它也有个小限制，就是只能在开发环境生效。
一旦你打包上线了，vite-plugin-vue-devtools 的代码是不会出现在生产包里的，
所以如果你需要排查线上 bug，或者调试别人的 Vue 应用，还是得靠传统浏览器扩展版！
总结一句话：
vite-plugin-vue-devtools 更适合本地开发，浏览器版 Vue Devtools 更适合生产环境排查。
两者搭配着用，体验最好。
最后
总之，现在做 Vue 3 + Vite 开发，vite-plugin-vue-devtools 基本属于必装插件了，特别是你要做真机联调或者需要一个稳定的调试体验的时候，真的会爱上。
