vue的调试工具操作简介

vue的调试工具 vue-devtools 的安装和使用(一)

我们想使用vue来开发项目，如果有调试工具，会更方便我们的开发。
下面就是我分享的两种安装方法:
第一种:直接将压缩包拖进的扩展程序(以下是在chrome中安装)
将这个压缩包进行解压
第二步:
打开chrome浏览器=>点击更多工具=>点击拓展程序=>将文件拖进扩展程序(开发者模式下)
第三步:
如果你拖进扩展程序里的话会是下面的情形:
这个时候请点击详细信息:
将你的按钮改成和我的一样的，其他的不变
第四步:关闭浏览器重新打开
在你的浏览器右上角会看到一个如图显示的图片
在你的控制台会出现vue:
console会出现：
则为安装成功了

第二种方法:通过cmd
第一步:clone下来我们需要的安装包
通过cmd：执行指令如
git clone https://github.com/vuejs/vue-devtools
第二步:下载依赖
在vue-devtools目录下执行指令
cnpm install或者npm install
第三步:修改manifest.json文件
将persistent:false改为persistent:true
第四步:运行,执行指令
npm run build
第五步:在chrome中设置
更多工具 > 拓展程序
点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图
然后在控制台看到如方法一相同则为安装成功