先导vue
vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器能够极大地提升咱们的调试效率。帮助咱们快速的调试开发vue应用。
git
第一步：github
咱们能够先从github上找到vue-devtools的项目，下载到本地。下载vue-devtools连接。chrome
克隆方法：git clone https://github.com/vuejs/vue-devtools.gitshell
第二步：
npm
解压下载好的文件，进入到vue-devtools目录，安装项目所须要的依赖包。json
安装方法：npm install 或者 cnpm install （注：cnpm命令是国内的镜像，速度会快一些）浏览器
第三步：
ui
编译项目文件。this
编译方法：npm run build
第四步：
修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。
persistent参数改成true，访问协议是否包含：1.http://*/*; 2.https://*/*; 3.file:///*;这三种状况
第五步：
添加至浏览器：
添加方法：在chrome浏览器输入地址：“chrome://extensions/”进入扩展程序页面，
而后点击“加载已解压的扩展程序...”按钮；选择vue-devtools>shells目录下的Chrome文件夹；
还需容许文件地址是否访问。若是看不到“加载已解压的扩展程序...”按钮，先勾选“开发者模式”。以下图:
第六步：
使用：
打开咱们的vue应用，打开调试，点击vue扩展图标，就能够使用了。以下图：
注：若是点击vue扩展图标仍是提示：
Vue.jsis detectendonthis page.Open DevToolsand lookfor the Vue panel