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

一时失言乱红尘 2022-12-02 15:16 441阅读 0赞

## 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:\\software\\Vue.js\\vue-devtools-master；
3.  cmd进入解压目录E:\\software\\Vue.js\\vue-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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]

1.  `cnpm run build` 执行完，会在E:\\software\\Vue.js\\vue-devtools-master\\shells\\chrome\\src文件夹里产生如上图所示的几个js文件；  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1][]
2.  打开E:\\software\\Vue.js\\vue-devtools-master\\shells\\chrome\\manifest.json并把文件中的"persistent":false改成true
3.  打开Chrome浏览器，更多工具>扩展程序，点击“加载已解压的扩展程序”，将E:\\software\\Vue.js\\vue-devtools-master\\shells\\chrome文件夹放入，vue.js devtools插件就已经安装成功。  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2][]
4.  测试安装成功  
    cmd进入目录：E:\\software\\Vue.js\\vue-devtools-master，运行`npm run dev`，得到如下结果说明安装插件成功。  
    ![20200831213536798.png_pic_center][]

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

1.  打开chrome://extensions/，扩展程序管理器，将下载好的.crx文件拖入即可弹出安装提示，点击确定安装即可。  
    ![20200831214509272.png_pic_center][]  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3][]
2.  两次安装好的DevTools插件如下：  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/131c1dbd5e874acfb8e7c611cce84c8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/8c60a522af9544af808468b12e6f6b95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/369282d3c4a547aea617605c7ca41606.png
[20200831213536798.png_pic_center]: /images/20221123/31c5d7d86cc84b0d92bd173752ed0f8a.png
[20200831214509272.png_pic_center]: /images/20221123/e28fd252c223442488044fcd480c1589.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/a47de861e3a54d8c838d936add9cf441.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/8db40d6bd05446208389acd4817c5f9f.png