Whidy Writes

Vue.js项目开发中Vue.js devtools无法使用小记

创建于:最后更新:whidy

国庆节日后回来,接着开发之前的项目(基于 Vue-CLI 4.4.6 搭建),发现有个项目在无论是 chrome 还是 firefox 下,切换 Vue.js devtools 的标签时,就会卡在显示Vue.js的LOGO动画,无法继续操作。这个突如其来的问题折腾了我很长时间。

在卡死后,我查看chrome的任务管理器,可以发现 Vue.js devtools 的CPU占用率 130% ,当前开发的页面CPU占用率 100% ,基本上就只能强行关闭了,但是同时测试其他的 vue2.6.10 的项目没有遇到这个问题。

各种测试

没办法,无法使用 Vue.js devtools 严重影响到Vue开发,而且未来若再次发生类似问题也不知所措,于是还是决定麻烦的去进行各种测试,排除问题原因。

测试一:降级Vue.js版本到2.6.10

我通过降级该项目的Vue.js版本到2.6.10,发现依然无法使用Vue.js开发者工具。

测试二:创建一个纯Vue.js最新版项目

这个项目没有使用Vue-CLI, 直接用Vue.js 2.6.12 + Webpack搭建, Vue.js devtools 使用正常!

测试三:创建一个Vue-CLI 3.x项目

于是对比可以正常使用 Vue.js devtools 的项目,初步推测可能和 Vue-CLI 版本有关,目前经发现 @vue/cli-service 3.x 的对应的 Vue.js 2.6.10 是没有问题的。

测试四:创建一个Vue-CLI 4.x项目

本地最新的VueCLI版本是 @vue/cli 4.5.6 ,我分别用了默认配置自定义配置创建项目均运行良好。

测试五:更换Vue.js devtools插件版本

最新的Vue.js devtools版本为 5.3.3 ,去github上面按照手动安装的说明试了下,失败了,只好去找现成的crx插件包安装,试了 5.3.25.3.0 ,均未能解决,看来也不是插件版本问题。

测试六:git回退一个个版本测试

我反复 git checkout xxx 无数版本,无数次 yarn serve 去测试,终于找到了不能正常使用 Vue.js devtools 那段代码,位于 index.html 下的一段外部js。

想不到的是内部应用的SDK统计代码造成的影响,最近公司内部的JSSDK做了一些更新,关于异常捕获相关的调整。可能正是这块和 Vue.js devtools 的某些代码冲突了,造成了无法正常使用。于是我将这个外部引入的注释掉就好了。

查了下部分代码,可能和SDK重写 EventListener 有关,后面有空再探索下。

结论

对于这个问题,我上午还去chrome插件上打了一分并描述了问题情况,我实在是想不到竟然是第三方js的部分代码影响到 Vue.js devtools 的使用。之所以打一分,也是希望得到作者的关注,不过在我后来找到原因后,我简单描述了问题原因,并表示可能不是 Vue.js devtools 的问题。

不过话说回来,如何查看chrome插件的运行日志呢?如果能直接看日志的话,各种问题就能够更好的排查了。

avatar

Whidy

一名爱折腾的前端开发工程师,喜欢玩游戏听歌写东西 ฅʕ•̫͡•ʔฅ