【Vue.js】Vue.js的Chrome浏览器开发插件DevTools的安装步骤

1、插件下载

最新版插件源码下载地址： https://github.com/vuejs/vue-devtools/tree/master（版本4.1.5） Chrome插件安装包（.crx文件）下载地址： https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd（版本5.3.3）

2、源码版本插件安装

1. 安装Node.js环境（安装步骤参见我的博文：https://yanyan.blog.csdn.net/article/details/103838456）
2. 解压GitHub上下载的插件，解压目录为：E:softwareVue.jsvue-devtools-master；
3. cmd进入解压目录E:softwareVue.jsvue-devtools-master，进入命令行操作模式；
4. 使用npm淘宝镜像安装依赖包地址：http://npm.taobao.org/ 命令行安装npm淘宝镜像如下，之后就可以使用cnpm代替npm安装依赖包了：

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

1. 在解压目录下运行：

>> cnpm install

1. 安装webpack

>> cnpm install --global webpack

1. 安装webpack-cli

>> cnpm install --global webpack-cli

1. 在解压目录下运行：

>> cnpm run build

1. cnpm run build 执行完，会在E:softwareVue.jsvue-devtools-mastershellschromesrc文件夹里产生如上图所示的几个js文件；

1. 打开E:softwareVue.jsvue-devtools-mastershellschromemanifest.json并把文件中的"persistent":false改成true
2. 打开Chrome浏览器，更多工具>扩展程序，点击“加载已解压的扩展程序”，将E:softwareVue.jsvue-devtools-mastershellschrome文件夹放入，vue.js devtools插件就已经安装成功。

1. 测试安装成功 cmd进入目录：E:softwareVue.jsvue-devtools-master，运行npm run dev，得到如下结果说明安装插件成功。

3、插件安装包（.crx文件）安装

1. 打开chrome://extensions/，扩展程序管理器，将下载好的.crx文件拖入即可弹出安装提示，点击确定安装即可。

1. 两次安装好的DevTools插件如下：