安装:
1. 下载dev-tools dev-tools,gitHub地址:github.com/vuejs/devto…
// 由于我使用github上的git下载地址clone失败了
// 下面贴出我成功clone的地址
git clone https://github.com/vuejs/vue-devtools
2. 在vue-devtools目录下安装依赖包
// 在项目文件下打开cmd命令行窗口
npm install
// 或者使用yarn
3. 修改manifest.json文件
把"persistent":false改成true
4. 重新打包 注意:由于当时执行
npm run build命令时,报错了,最后用的是yarn run build才打包成功 没有安装yarn的小伙伴请跳转到安装yarn
npm run build
// 失败的话建议安装yarn包,执行如下命令
yarn run build
扩展chrome插件
在谷歌浏览器里点击右上角的三点按钮 > 更多工具 > 扩展程序。或者在输入框中输入地址:
chrome://extensions/
- 打开页面后 打开右上角的开发者模式 > 左上角的加载已解压的扩展程序 > 选择刚刚打包好的
shells/chrome文件即可

- 安装完成,重新启动浏览器,建议将vue-tools点击刷新
以上就是vue的devtools的全部内容,下面则是题外的如何安装使用yarn包,不需要的小伙伴可以忽略
5. 遇到的问题(更新于2025年4月18日,由于vue-devtools在24年更新后,在chrome扩展中导入后会出现报错,无法运行等问题)
5.1 v7版本的仅支持vue3项目,不支持vue2项目
所以只需要卸载当前版本,下载旧版本的Vue DevTools v6 就解决了
在 极简插件官网 重新安装了旧版本后,重新打开浏览器,打开自己的项目,就能成功显示Vue啦。
6. 安装yarn
更多yarn介绍在这篇文章juejin.cn/post/699248…
- 下载node.js,使用npm安装
npm install -g yarn
查看版本:yarn --version - Yarn 淘宝源安装,分别复制粘贴以下代码行到黑窗口运行即可
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
4. 重新打包
注意:由于当时执行