vue调试工具vue-devtools下载与使用的一些方法

使用vue-cli的同学肯定知道有一个基于Chrome（内核浏览器）的一个调试工具——vue-devtool。但是在国内环境很难直接在Chrome商店下载得到（对于有条件的童鞋可以使用，PS：具体请脑补）。今天提供一个4.1.5版本的下载地址。 可以到csdn下载。附上链接: link.

1：我们打开chrome的扩展程序，讲刚下载的文件拖进去，就可以安装了

2：更改一些配置

首先打开chrome的开发者模式，然后允许vue-devtool在隐身模式使用，和允许访问网址。


改好之后，还需要修改插件的一个配置，找到插件的安装目录，在chrome浏览器输入：chrome:version 会出现下面显示的信息，并找到个人资料路径

找到安装目录之后，可以看到有个manifest.json文件。打开我们修改几个地方。

3:最后使用

使用vue-devtool可以查看vue组件里面的data里面的变量，methods里面的函数，和一些全局对象比如说:|'$refs,$route' ，可以查看vuex里面的变量及变化监听。