Vue-Devtools 安装问题

Mac系统 Chrome 浏览器安装 vue-devtools

第一步: 找到vue-devtools的github项目，并将其下载到本地

vue-devtools的github项目地址

cd vue-devtools-dev
npm install
num run build (执行到这步遇到错误）

npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] dev:shell: `cd packages/shell-dev && webpack-dev-server --inline --hot --no-info`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] dev:shell script.
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!     /Users/mac/.npm/_logs/2020-06-02T03_08_14_315Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `cross-env PORT=8100 npm run dev:shell`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above

解决 ： yarn install
然后再 npm run build 就OK了
然后提示运行： yarn upgrade
如果运行更新比较卡的话，可以试试
yarn upgrade-interactive
它会以交互的方式，让你选择更新内容。
可能有些模块更新后，需要重新运行 yarn install . 所以不仿一个个升级。这样容易发现哪里卡住。
有时发现，刚才升级了某个模块，如cypress ，然后它又要运行 yarn install ，然后cypress又恢复到原来版本，这可能是交叉引用，循环依赖的恶果，这点node 比较让人头疼。
我的解决办法是。这些模块先不升级，最后再说。我的就是最后升级cypress 就OK了。
yarn upgrade 升级到最新版本后，再运行 npm run build就能打包成功了。
最后二步，就是常规操作了，网上教程到处是：

第四步: 打开Chrome 扩展程序页面, 开启 开发者模式
地址栏中输入 chrome://extensions/, 打开扩展程序页面.
页面右上角 开启开发者模式
第五步: 加载已解压的扩展程序
方法1: 将 vue-devtools-master/shells/chrome文件夹 拖入 Chrome 扩展程序页面 即可
这一步，我的不一样，也许我的是macos，我的文件夹是vue-devtools-dev/packages/shell-chrome

936A869EE75C30C617183A6E8D4197DF.png