Vue浏览器调试工具VueTools安装以及使用

vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器能够极大地提升咱们的调试效率。帮助咱们快速的调试开发vue应用。

直接跳转小白版本

安装方法一：

这里以 chrome 浏览器为例：

一、打开 chrome 网上应用店，搜索 vue.js

注：若是打不开页面须要 代理

 

 

 选择第一个，点击 添加至chrome

 

 

 点击添加扩展程序

 

 

 安装完成

 

安装方法二：

一、打开 网址：https://github.com/vuejs/vue-devtools

点击克隆或下载：

 

 

 二、下载完成以后解压到你的本地磁盘

三、使用终端命令 cd 至解压以后的文件夹

 

 

 四、运行命令 npm install 

 

 

 五、运行 npm run build 

六、修改shells>chrome文件夹下的mainifest.json 中的persistant为true

 

 

 七、找到浏览器扩展程序，勾选开发者模式选项

 

 

 

 

 八、而后咱们将插件文件夹里的shells>chorme文件夹直接拖到页面中，完成安装

 

安装方法三：小白版本

前面两个方法要么须要代理来实现，要么须要对NodeJs有必定的了解，这无疑对某些不喜欢折腾的同窗十分头疼，有没有一种很是便捷的方法来实现呢？确定是有的：

能够经过个人GitHub：https://github.com/chenlaogou111/VueDevTools仓库来进行下载，源码已经通过npm处理，对某些配置文件也都进行了配置，下载直接就可使用：

下载完成以后解压，打开谷歌扩展程序，点击左上角：加载已解压的扩展程序，点击chrome文件夹

 

 就完成安装了，是否是很是便捷

 

安装完成以后就可使用了，打开开发者工具，就会发如今选项中多出了一个 Vue 的选项，点击进去就是当前页面使用的全部组件以及数据均可以在这里进行查看和修改