vue3 devtools version 6.4.5 避坑 npm run build lerna ERR

基于vue3开发的网站发现devtools的图标没亮，有点郁闷，怀疑是devtools扩展插件版本不支持。

于是去安装了最新版本的devtools 6.5.0，结果在npm run build时发现报错，即便拖到扩展程序里了也没法用。

更加郁闷了，然后尝试安装devtools 6.4.5版本，很行，亲测可用！

PS：因为版本问题，无端耗费一个多小时，写下来吸取教训。

以下是具体步骤

Step1：官网下载vue devtool

网址：GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.

注意版本问题：最新版本有可能build不成功，退而求其次

点击tags进入：Tags · vuejs/devtools · GitHub

 选择6.4.5版本

 

Step2：解压并在VS code中初始化

右键》在集成终端中打开，执行命令：npm install

注意：在powershell中执行成功率高？

 

Step3：修改配置

如果不是最新版，persist的值默认是false

用vscode在文件夹中查找persist，打开对应的文件夹，将false改为true

注意：若不修改会报错 无法为内容脚本加载 JavaScript“build/hook.js”

Step4：run build(关键步骤)

执行命令：npm run build/Yarn run build

6.5.0版本报错：

 

看到如下提示：一定要success，否则即便在谷歌浏览扩展中打开了也用不了

6.4.5版本success：这是powershell下安装的截图，用VS code也行

 

Step5：将shell-chrome文件夹拖放到谷歌扩展

 

 

Step6：详情页允许访问所有网站

注意：不管是哪个版本都会有个错误提示……

 

 

Step7：查看报错并清除报错

不赞成使用Manifest，在2023年将会被移除

忽略这个报错

 

Step8：打开test1网页检验插件

 点击扩展程序按钮》点击磁钉按钮：将devtools固定到工具栏

 当网页是vue2、3开发的，点击devtool按钮会出现如下界面

 F12进入》选择vue