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。