vue-devtools介绍与安装

vue-devtools

vue-devtools是一款浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大提高我们的调试效率。

由于vue是借助数据驱动的，所以在开发调试中查看DOM不能解析出什么，

但是借助vue-devtools插件，就可以很容易的对数据结构进行解析和调试。

安装

下载地址：

https://github.com/vuejs/vue-devtools#vue-devtools

安装有多种途径：

1.通过直接下载谷歌浏览器插件（需要翻墙）。

2.下载火狐浏览器插件。

https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

3.下载后外部引入

https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md

官网带使用说明。

4.自己构建

需要node 6+ 、npm 3+

打开git 命令行，输入：

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

进入clone下来的vue-devtools文件夹，在此处打开命令行。

输入：

npm install 

或者

cnpm install

(使用淘宝镜像的话)

 

然后找到目录下的shells下的chrome下的manifest.json

将persistent:false 改为true

然后再回到目录下的命令行，输入：

npm run build

 

谷歌浏览器扩展

打开谷歌浏览器的扩展程序选项，要勾选开发者模式，才会有加载已解压的扩展程序，点击选中shells下的chrome文件夹即可。

chrome文件夹下载：

https://download.csdn.net/download/badao_liumang_qizhi/10735017

使用

运行vue项目，按F12,找到vue。