目录
概述
本文记录vue-devtools调试工具install以及build打包过程中遇到的：npm install报错，npm run build 报错，以及如何安装build后的chrome扩展包。
准备工作
最近开始使用Vue开发前端，需要安装Vue-devtools调试工具。可是安装的时候发现需要到Chrome Web Store，这个链接在国内是无法访问的。所以这里采用Plan B，从gitHub上拉取代码，然后build的方式进行安装。GitHub地址：GitHub - vuejs/devtools: ?? Browser devtools extension for debugging Vue.js applications.
https://github.com/vuejs/devtoolsReleases · vuejs/devtools · GitHubhttps://github.com/vuejs/devtools/releases下载最新的Source Code后，解压到不带中文以及空格的目录中。
下面开始安装过程。我已经已经安装了nodejs、npm、yarn等。并配置了cnpm。这些工具的安装过程这里不赘述了。
nodejs：v16.13.0
npm：8.5.2
yarn：1.22.15
安装过程
install安装
cnpm installbuild编译
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' �����?����?���??���?�������
���������?���
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:\Users\Z\AppData\Roaming\npm-cache\_logs\2022-03-05T06_43_03_405Z-debug.log解决办法：安装rimraf
cnpm install rimraf --save-dev遇到报错2
重新运行insatll过程，又遇到一个error，报错2：
error D:\vue-devtools-main\node_modules\electron: Command failed.
Command: node install.js
Directory: D:\vue-devtools-main\node_modules\electron
RequestError: read ECONNRESET
at ClientRequest.<anonymous> (D:\vue-devtools-main\node_modules\got\source\request-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\node_modules\@szmarczak\http-timer\source\index.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-checknpm 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扩展文件分享
最后分享一下编译出来的扩展包吧，如果你不想体验这个编译过程，建议直接用我编译这个扩展包就可以了。
?chrome-vue-devtools-v6.0.12-Web开发文档类资源-CSDN文库https://download.csdn.net/download/fx_yzjy101/83484852
?