vue调试工具vue-devtools安装及使用

5,326 阅读2分钟

安装:

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 image.png 4. 重新打包 注意:由于当时执行npm run build 命令时,报错了,最后用的是yarn run build才打包成功 没有安装yarn的小伙伴请跳转到安装yarn

npm run build
// 失败的话建议安装yarn包,执行如下命令
yarn run build

扩展chrome插件

在谷歌浏览器里点击右上角的三点按钮 > 更多工具 > 扩展程序。或者在输入框中输入地址:chrome://extensions/ image.png

  • 打开页面后 打开右上角的开发者模式 > 左上角的加载已解压的扩展程序 > 选择刚刚打包好的shells/chrome文件即可

image.png

  • 安装完成,重新启动浏览器,建议将vue-tools点击刷新

image.png 以上就是vue的devtools的全部内容,下面则是题外的如何安装使用yarn包,不需要的小伙伴可以忽略

5. 遇到的问题(更新于2025年4月18日,由于vue-devtools在24年更新后,在chrome扩展中导入后会出现报错,无法运行等问题)

5.1 v7版本的仅支持vue3项目,不支持vue2项目

Snipaste_2025-04-18_11-40-58.png 所以只需要卸载当前版本,下载旧版本的Vue DevTools v6 就解决了 在 极简插件官网 重新安装了旧版本后,重新打开浏览器,打开自己的项目,就能成功显示Vue啦。

6. 安装yarn

更多yarn介绍在这篇文章juejin.cn/post/699248…

  1. 下载node.js,使用npm安装
    npm install -g yarn
    查看版本:yarn --version
  2. 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