含视频：最新安装谷歌浏览器chrome的vuejs devtools 插件详解

视频另见：https://weibo.com/tv/v/HplZnsY0L?fid=1034:4360415392558633

    

             视频                                       步骤

准备工作：

下载vue-devtools-dev.zip压缩包，官网https://github.com/vuejs/vue-devtools

并解压到本地位置：D：ProTools\vue-devtools-dev

步骤：

1-1进入解压后包的路径下，cmd执行npm install

 上行命令表示：下载依赖

【注意】若上行命令太慢可使用npm淘宝镜像，即执行 npm install -g cnpm --registry=https://registry.npm.taobao.org

或执行cnpm install

成功执行，见下图

1-2 编译源程序，cmd执行 npm run build

   或者执行 cnpm run build，

执行上行命令目的，加载背景脚本"build/background.js"，否则会报错

成功执行，见下图

执行完，会在shells>chrome下的src文件夹里生产如上图所示的几个js文件

 

1-3 修改manifest.json

位置：D:\ProTools\vue-devtools-dev\shells\chrome，把json文件里的"persistent":false改成true

27行 28行 29行 30行 31行 32行

"background": {     "scripts": [       "build/background.js"     ],     "persistent": true   }

2-1，扩展chrome插件

①打开chrome浏览器，打开更多工具>扩展程序；

②再点击加载已解压的扩展程序，然后把shells>chrome文件夹放入

 

2-2，测试是否安装成功

①启动项目，即cmd执行npm run dev，

②打开localhost:8080可以看到插件已经安装并运行了。

测试成功，见上图