【Vue.js】Vue.js的Chrome浏览器开发插件DevTools的安装步骤
作者:神秘网友
发布时间:2020-09-01 05:02:37
【Vue.js】Vue.js的Chrome浏览器开发插件DevTools的安装步骤
【Vue.js】Vue.js的Chrome浏览器开发插件DevTools的安装步骤[var1]
最新版插件源码下载地址：
https://github.com/vuejs/vue-devtools/tree/master（版本4.1.5）
Chrome插件安装包（.crx文件）下载地址：
https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd（版本5.3.3）
[var1]
- 安装Node.js环境（安装步骤参见我的博文：https://yanyan.blog.csdn.net/article/details/103838456）
- 解压GitHub上下载的插件，解压目录为：E:\software\Vue.js\vue-devtools-master；
- cmd进入解压目录E:\software\Vue.js\vue-devtools-master，进入命令行操作模式；
- 使用npm淘宝镜像安装依赖包地址：http://npm.taobao.org/
命令行安装npm淘宝镜像如下，之后就可以使用cnpm代替npm安装依赖包了：
>> npm install -g cnpm --registry=https://registry.npm.taobao.org
- 在解压目录下运行：
>> cnpm install
- 安装webpack
>> cnpm install --global webpack
- 安装webpack-cli
>> cnpm install --global webpack-cli
- 在解压目录下运行：
>> cnpm run build
cnpm run build执行完，会在E:\software\Vue.js\vue-devtools-master\shells\chrome\src文件夹里产生如上图所示的几个js文件；
- 打开E:\software\Vue.js\vue-devtools-master\shells\chrome\manifest.json并把文件中的"persistent":false改成true
- 打开Chrome浏览器，更多工具>扩展程序，点击“加载已解压的扩展程序”，将E:\software\Vue.js\vue-devtools-master\shells\chrome文件夹放入，vue.js devtools插件就已经安装成功。
- 测试安装成功
cmd进入目录：E:\software\Vue.js\vue-devtools-master，运行npm run dev，得到如下结果说明安装插件成功。
[var1]
-
打开chrome://extensions/，扩展程序管理器，将下载好的.crx文件拖入即可弹出安装提示，点击确定安装即可。
-
两次安装好的DevTools插件如下：
