参考Vue3-devtools开发者工具正确安装方法_vue-devtools安装-CSDN博客

下载安装

• Github下载地址： GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.

• 在进入到下载首页后，我们会看到这样一个页面

• 

• 点击mian选项，然后再点击Tags选择我们要下载的版本，目前最新版本是v.6.6.3，此文档所下载的是目前最新版本。

• 选择完要下载的版本后，我们点击code选项，选择以压缩包的形式进行下载。

• 

下载后解压

打开控制器

因为devtools必须使用yarn进行下载，所以我们要下载yarn这个包管理工具。

 sudo npm install -g yarn

运行发现下载不下来，出现npm ERR! request to https://registry.npm.taobao.org/yarn failed, reason: certificate has expired报错 （淘宝镜像证书到期）

解决方案 更改镜像

sudo cache clean --force
npm config set registry https://registry.npmmirror.com
npm config get registry https://registry.npmmirror.com

安装好yarn后，通过yarn来安装相关依赖：

yarn install

这一步出现问题：node版本低 

解决方案：

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

依赖安装完成后，开始打包build。 需要注意，这里的命令需要带watch，如果不带，会出错

yarn run build:watch

继续执行命令行 

yarn run dev:chrome

此时packages\shell-chrome文件下就出现了build文件，此文件相当重要，没有此文件是无法成功添加扩展的。

最后在谷歌浏览器扩展程序加载已解压的扩展程序，选择package下shell-chrome