vue-devtools-简介、下载、安装、配置、使用

水深无声 2023-09-25 17:50 18阅读 0赞

# 一、简介 #

vue-devtools是一款基于chrome游览器的插件，可以用于调试vue应用，也可以用来辅助我们找到各页面对应的Vue.js文件路径，这将极大地提高我们的开发和调试效率。

# 二、下载 #

下载路径：https://github.com/vuejs/vue-devtools  
将下载好的文件夹放在任意磁盘下  
![在这里插入图片描述][1bfdcd236d3e4ec4b9d8b01879b60623.png]

# 三、安装方法一 #

前提：先安装好node和npm打开cmd，进入devtools-main的目录之下，执行命令npm run build 进行vue-devtools的安装  
![在这里插入图片描述][37baf03fccb44ce3a510dc683335fae3.png]  
若出现上图的情况，则更先执行命令npm install -g lerna  
![在这里插入图片描述][50ce32d0dfd94e35b6d426fad8757858.png]  
再次执行命令npm run build，发现又报错了，有些报错是因为npm自身的局限性，以及部分模块没有安装。  
![在这里插入图片描述][f8736ac997ea45a09af0b7c372b4e233.png]  
安装以下三个命令：yarn install  
1、npm install yarn -g  
2、npm install webpack webpack-cli –g  
3、npm install -g cnpm --registry=https://registry.npm.taobao.org（cnpm -v可以查看版本）  
![在这里插入图片描述][54e071f506f34ffa9a45d023d19a230e.png]  
接着，进行cnpm install安装package.json中的依赖包  
![在这里插入图片描述][9b6bf20272ae4426b1ada904fe7933ac.png]  
cnpm install electron  
![在这里插入图片描述][71dc954a3b3a4969ba290594c2ff85e7.png]  
cnpm install cypress  
![在这里插入图片描述][753bb95658464656a69396128dfdae7f.png]  
如过此时，执行npm run build还是错误，那么考虑换安装方法二。

# 三、安装方法二（推荐） #

1、克隆：git clone -b v5.1.1 https://github.com/vuejs/vue-devtools.git  
2、修改mainifest.json 中的persistant为true  
![在这里插入图片描述][ea16fd8ac6d94e539edcbab84ef06ad6.png]  
3、执行命令 npm i  
4、执行安装命令 npm run build  
![在这里插入图片描述][61d2116397224d26b7f12ad418489045.png]  
终于成功了！

# 四、配置 #

chrome中找到 更多工具 / 扩展程序 选项  
![在这里插入图片描述][3cd2260850ea429ba1eab1967702e927.png]  
勾选“开发者模式”  
![加粗样式][648533ee6642445a848bba6bde3ff200.png]  
然后点击 加载已解压的扩展程序，选择vue-devtools\\shells\\chrome，确认  
![在这里插入图片描述][98f5da8a3170420bbb30785d9a2b2d1e.png]  
![在这里插入图片描述][e9a1fe4d47d54aeca63f964f05ff4a14.png]  
![在这里插入图片描述][a089f4f3b82340bead7211f63a872b84.png]

# 五、使用 #

用谷歌浏览器打开vue项目，点击F12，选择“vue”，即可使用了。  
vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试  
![在这里插入图片描述][65beca93e81f43ad8ed3d59fb57b545a.png]  
![在这里插入图片描述][a892c19cf5684f6ab02336a3009888f9.png]

[1bfdcd236d3e4ec4b9d8b01879b60623.png]: https://img-blog.csdnimg.cn/1bfdcd236d3e4ec4b9d8b01879b60623.png
[37baf03fccb44ce3a510dc683335fae3.png]: https://img-blog.csdnimg.cn/37baf03fccb44ce3a510dc683335fae3.png
[50ce32d0dfd94e35b6d426fad8757858.png]: https://img-blog.csdnimg.cn/50ce32d0dfd94e35b6d426fad8757858.png
[f8736ac997ea45a09af0b7c372b4e233.png]: https://img-blog.csdnimg.cn/f8736ac997ea45a09af0b7c372b4e233.png
[54e071f506f34ffa9a45d023d19a230e.png]: https://img-blog.csdnimg.cn/54e071f506f34ffa9a45d023d19a230e.png
[9b6bf20272ae4426b1ada904fe7933ac.png]: https://img-blog.csdnimg.cn/9b6bf20272ae4426b1ada904fe7933ac.png
[71dc954a3b3a4969ba290594c2ff85e7.png]: https://img-blog.csdnimg.cn/71dc954a3b3a4969ba290594c2ff85e7.png
[753bb95658464656a69396128dfdae7f.png]: https://img-blog.csdnimg.cn/753bb95658464656a69396128dfdae7f.png
[ea16fd8ac6d94e539edcbab84ef06ad6.png]: https://img-blog.csdnimg.cn/ea16fd8ac6d94e539edcbab84ef06ad6.png
[61d2116397224d26b7f12ad418489045.png]: https://img-blog.csdnimg.cn/61d2116397224d26b7f12ad418489045.png
[3cd2260850ea429ba1eab1967702e927.png]: https://img-blog.csdnimg.cn/3cd2260850ea429ba1eab1967702e927.png
[648533ee6642445a848bba6bde3ff200.png]: https://img-blog.csdnimg.cn/648533ee6642445a848bba6bde3ff200.png
[98f5da8a3170420bbb30785d9a2b2d1e.png]: https://img-blog.csdnimg.cn/98f5da8a3170420bbb30785d9a2b2d1e.png
[e9a1fe4d47d54aeca63f964f05ff4a14.png]: https://img-blog.csdnimg.cn/e9a1fe4d47d54aeca63f964f05ff4a14.png
[a089f4f3b82340bead7211f63a872b84.png]: https://img-blog.csdnimg.cn/a089f4f3b82340bead7211f63a872b84.png
[65beca93e81f43ad8ed3d59fb57b545a.png]: https://img-blog.csdnimg.cn/65beca93e81f43ad8ed3d59fb57b545a.png
[a892c19cf5684f6ab02336a3009888f9.png]: https://img-blog.csdnimg.cn/a892c19cf5684f6ab02336a3009888f9.png