Mac安装Vue调试工具vue-devtools

本文主要介绍在无法翻墙的情况下安装Chrome插件vue-devtools的方法。如果你比较懒，请直接通过目录跳转到 收藏猫插件安装。
背景：Mac、Chrome、vue-devtools、github

通过github下载安装

1.github下载

1. 从github下载

git clone https://github.com/vuejs/devtools.git

2. 下载安装依赖包

cd devtools
npm install

注：
npm install时，笔者这里报错，错误为ERESOLVE unable to resolve dependency tree。关于这个错误的具体原因与解决方法，可以看这里。

3. 解决完报错，安装完依赖包后运行npm run build，正当我满心欢喜等待编译打包成功的时候，又报了如下的错误：

lerna ERR! yarn run build exited 2 in '@vue/devtools-api'
lerna ERR! yarn run build exited 2 in '@vue/devtools-api'

然后开始安装yarn，当在终端输入npm install -g yarn安装全局yarn时，又报错了，错误如下：

npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/yarn
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn'
npm ERR!  [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: '/usr/local/lib/node_modules/yarn'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/yourname/.npm/_logs/2022-04-14T03_06_37_438Z-debug-0.log

报错原因权限不够，执行sudo -s，再执行npm install -g yarn即可，yarn安装后，接着执行：

yarn install
yarn run build

4. 编译打包成功后进入packages目录下生成shell-chrome文件夹，此文件夹就是最后要放到扩展程序里的文件夹。

2.安装插件

1. 打开Chrome浏览器->更多工具->扩展程序->打开开发者模式
2. 点击加载已解压的扩展程序，选择刚刚生成的shell-chrome文件夹

3.vue-devtools使用

Vue项目，打开开发者工具(F12)，选择Vue就可以使用了：

---

收藏猫插件安装

收藏猫插件提供了一个下载vue-devtools插件的地址，你需要做的只有下载->拖拽到到Chrome浏览器，。

1.下载插件

插件地址在这里：https://chrome.pictureknow.com/extension?id=d50143a5f53d406dbe992277bfc90521

2.安装插件

打开Chrome浏览器->更多工具->扩展程序->打开开发者模式，然后将.crx文件拖拽进来即可。