vue/cli3的项目在控制台中出现debugger:///VMXXXXXX解决方法。

前几天搭建了一个基于vue/cli3的新项目,配置完vue.config.js之后,一切顺利,似乎没什么问题。但是打开控制台一看,console里的信息来源都变成了VMXXXX,鼠标移上去还会显示debugger:///VMXXXXXX,如下图:

vue/cli3的项目在控制台中出现debugger:///VMXXXXXX解决方法。
仔细研究一下发现,不止是显示出现问题,同时console里面的信息也打印了两次。
进一步观察发现,不止是信息打印,而是app.vue的生命周期随着子组件的显示和隐藏,被重复执行了。
刚发现这点时真的震惊了,一度以为是自己代码写得有问题或者是vue.config.js的配置有严重问题。

随后各种百度,论坛,聊天群求助无果。
最后的解决方案莫名其妙,升级一下chrome就好了 。
之前的版本是7xxx,重新安装了最新的84版本,就没有这个另人困扰的问题了。

vue/cli3的项目在控制台中出现debugger:///VMXXXXXX解决方法。



我真的服了。。。又特么出来了。
求解决方案啊。。。!!!



稳住,别慌,问题不大。
经过一些列排查(删了建,建了删),问题一步步的明朗起来。

先说结论:
1、和浏览器无关,因为上面已经证实了。
2、和vue.config.js的配置无关,因为我已经在cli2环境下复现该问题。
3、代码的锅。

问题出在下图中的函数中。

vue/cli3的项目在控制台中出现debugger:///VMXXXXXX解决方法。

该函数动态的创建了一个iframe,并且添加到了文档中,然后再删除。
问题出在创建的时候,会通过iframe标签的src属性发送一个document的请求,同时添加iframe标签。
而在vue项目中,此番操作会导致整个项目无闪烁刷新,所有资源(除了index.html之外)都重新加载。
至于为什么,我查阅了很久找不到答案,求路过大神告知。

这也就是为什么,上面提到的console会打印两次,生命周期也走了两次,都是因为调用了该方法。

那么为什么要加这个函数?
分析代码,很容易看到是为了改变文档标题而写,那么改变标题用document.title就够了,为什么还要加下面的一大团?
又是一番查阅,终于发现端倪,是为了解决一个兼容性问题而添加的:

iso微信浏览器环境中,无法通过document.title改变文档标题,详见知乎讨论。

当然了,看到后来又有很多回答说此bug已经修复,所以无需使用该hack功能。
但是由于目前公司网络封网维护,无法部署线上环境测试,所以也不清楚是否真的不用再加这个iframe了。

既然找到了问题,那么解决问题就很简单,注释下方的iframe即可防止页面伪刷新,或者将iframe的src地址置空。

任何祖传代码都有他产生的特定背景,例如上述例子中,能够想象到当时的开发人员为了解决ios微信下改变不了文档标题的无奈,所以百度到了这样一团代码,虽然不明原理,但是能够解决问题。



刚本地局域网用ios真机测试了一下,去掉iframe相关代码,仅靠document.title,能够成功修改文档标题。
说明微信中这个问题已经修复了,所以可以放心的去除iframe代码了。