安装vue调试工具 vue-devtools

绝地灬酷狼 2022-05-14 04:13 481阅读 0赞

vue-devtools是一款基于chrome浏览器的插件，在调试过程中可以省去打console.log，他会自动把我们在data上定义的数据动态的显示出来（数据改变，它也跟随着改变）。用它来对vue应用进行调试可以极大地提高我们的调试效率。

步骤是网上找的，留篇文章，供以后自己参考

## 1.下载vue-devtools项目到本地 ##

网上找的资料有些是直接下载的，也有通过命令在GitHub上下载的，这里是用的第二种方法

新建一个文件夹来存放下载的文件，文件夹下右键，点击“Git Bash Here”进入Git  
![这里写图片描述][20180902154532367]

输入

$ git clone https://github.com/vuejs/vue-devtools

![这里写图片描述][20180902154710646]

注：这里有可能会出现如下错误  
![这里写图片描述][20180902154757380]  
这个错误是因为项目太久，tag资源文件太大导致的，网上找解决方法，输入如下命令，再重新输入上面命令就行了

git config --global http.postBuffer 524288000

![这里写图片描述][20180902154947293]

参考链接：[https://yq.aliyun.com/ziliao/294404][https_yq.aliyun.com_ziliao_294404]

## 2.在vue-devtools目录下安装依赖包 ##

先进入下载下来的vue-devtools文件夹下

$ cd vue-devtools

再输入一下命令，然后等待安装

$ cnpm install

![这里写图片描述][20180902155631207]

## 3.修改manifest.json文件 ##

manifest.json文件在下载下来的vue-devtools文件夹下的shells>>chrome  
![这里写图片描述][20180902155933837]  
将此处的false改成true，然后保存

## 4.编译代码 ##

输入命令

$ npm run build

等待、、、

## 5.打开Chrome浏览器扩展程序 ##

![这里写图片描述][20180902160324118]

点击加载已解压程序按钮 >> 选择 vue-devtools >> shells >> chrome ，放入  
![这里写图片描述][20180902160422783]

发现就安装起了  
![这里写图片描述][20180902160537224]

如果发现在控制台找不到“vue”，关闭已在的调试页面然后重新打开

2018/09/02

[20180902154532367]: /images/20220514/e42734493fc04ba495e70184f6a95dce.png
[20180902154710646]: /images/20220514/bbfd5faa08f94834a5a86029ead6ad96.png
[20180902154757380]: /images/20220514/86fbe79323754fa9ad40effcf2e0308c.png
[20180902154947293]: /images/20220514/25c55c4f7fa6467ab123d19e03c2ce4f.png
[https_yq.aliyun.com_ziliao_294404]: https://yq.aliyun.com/ziliao/294404
[20180902155631207]: /images/20220514/6d3ecc8516884e6eafe8a67120cb11f5.png
[20180902155933837]: /images/20220514/062ef111e2e749abb89e508f3f38710e.png
[20180902160324118]: /images/20220514/24a0b1765a274244a496f4370f8d7d14.png
[20180902160422783]: /images/20220514/284049e2602f4033b89b59bcc8479a42.png
[20180902160537224]: /images/20220514/35178dc23e6746bf80179b7946b6d6de.png