如何build并在Chrome浏览器上安装vue-devtools调试工具

C

概述

本文记录vue-devtools调试工具install以及build打包过程中遇到的：npm install报错，npm run build 报错，以及如何安装build后的chrome扩展包。

准备工作

最近开始使用Vue开发前端，需要安装Vue-devtools调试工具。可是安装的时候发现需要到，这个链接在国内是无法访问的。所以这里采用Plan B，从gitHub上拉取代码，然后build的方式进行安装。GitHub地址：下载最新的Source Code后，解压到不带中文以及空格的目录中。

下面开始安装过程。我已经已经安装了nodejs、npm、yarn等。并配置了cnpm。这些工具的安装过程这里不赘述了。

nodejs：v16.13.0

npm：8.5.2

yarn：1.22.15

安装过程

install安装

cnpm install

build编译

npm run build

遇到报错1

> vue-devtools@6.0.12 build D:devtools-6.0.12
> lerna run build

lerna info Executing command in 9 packages: "yarn run build"
lerna ERR! yarn run build exited 1 in @vue/devtools-api
lerna ERR! yarn run build stdout:
yarn run v1.22.15
$ rimraf lib && yarn build:esm && yarn build:cjs
$ tsc --module es2015 --outDir lib/esm -d
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run build stderr:
tsc ڲⲿҲǿеij
ļ
error Command failed with exit code 1.
error Command failed with exit code 1.
lerna ERR! yarn run build exited 1 in @vue/devtools-api
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-devtools@6.0.12 build: `lerna run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersAppDataRoaming
pm-cache\_logs2022-03-05T06_43_03_405Z-debug.log

解决办法：安装rimraf

cnpm install rimraf --save-dev

遇到报错2

重新运行insatll过程，又遇到一个error，报错2：

error D:vue-devtools-main
ode_moduleselectron: Command failed.
Command: node install.js
Directory: D:vue-devtools-main
ode_moduleselectron
RequestError: read ECONNRESET
    at ClientRequest.<anonymous> (D:vue-devtools-main
ode_modulesgotsource
equest-as-event-emitter.js:178:14)
    at Object.onceWrapper (node:events:510:26)
    at ClientRequest.emit (node:events:402:35)
    at ClientRequest.origin.emit (D:vue-devtools-main
ode_modules@szmarczakhttp-timersourceindex.js:37:11)
    at TLSSocket.socketErrorListener (node:_http_client:447:9)
    at TLSSocket.emit (node:events:390:28)

解决办法：安装electron，然后设置electron_mirror，指向国内的地址

yarn add electron --ignore-workspace-root-check

npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

再次运行install，这次换个命令，yarn install

yarn install

很长时间的等待，留个图吧，在这等了很久很久很久

环境安装成功了，接下来build一下

yarn run build

yarn run build

还是很长很长很长的等待，成功了。

编译后，生成的扩展文件在packages目录下

Chome安装本地扩展

Chrome版本是99

在地址栏输入：chrome://extensions/

将开发者模式打开，会显示“加载已解压的扩展程序”、“打包扩展程序”、“更新”等按钮。

选择“加载已解压的扩展程序”，选中shell-chrome目录，vue-devtools就安装好了。

Chrome浏览器的vue-devtools扩展文件分享

最后分享一下编译出来的扩展包吧，如果你不想体验这个编译过程，建议直接用我编译这个扩展包就可以了。