Vue调试工具 vue-devtools

一、环境依赖：

二、安装包下载

直接进入官网，下载zip(注意下载master分支的)（不然会出问题）

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

三、安装构建

          1、解压缩，并进入vue-devtools-master，shift+右键 进入cmd或者shell命令行；

          2、 输入安装命令 npm install；

                如果有报错或者想提高速度，可以使用cnpm install。如果没有cnpm，需要进入命令行,输入

npm install -g cnpm --registry=https://registry.npm.taobao.org

          3、输入命令cnpm run build，生成最终的文件。

四、修改参数

          vue-devtools-master\shells\chrome 文件夹下的manifest.json 文件，将"persistent": false 改成"persistent": true

五、给浏览器添加扩展

          打开chrome浏览器，进入"更多工具"=>"扩展程序"=>“加载已解压的扩展程序”，将 文件夹vue-devtools-master\shells\chrome作为扩展包。

         

六、异常

         1、添加扩展后报错如下：

              

               解决方案 ： 该问题不是插件安装有问题，可是尝试把项目重新跑一下，把浏览器重新启动一下，或者换一个项目查看是否正常。