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

国庆节日后回来，接着开发之前的项目（基于 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.2 ， 5.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 插件的运行日志呢？如果能直接看日志的话，各种问题就能够更好的排查了。