之前QQ浏览器一直是我前端调试工具的主力,因为它是一个套壳浏览器,所以它的兼容模式(谷歌Chrome内核)和极速模式(IE浏览器内核)简直是调试兼容性的神器,可以直接切换,不用再反复打开Chrome和IE。而且这个F12调试台有木有看起来觉得很熟悉,对,这个就是谷歌浏览器自带的原生开发者工具,这让我觉得直接用QQ浏览器代替谷歌浏览器进行调试完全是可以的。但是最后我还是老老实实的换成谷歌浏览器做主力调试工具,具体原因请接着往下看。
为了复现这次神奇的bug,我特地把几个月前写的代码回滚了下,当时是为了利用Mand Mobile这个UI库写一个手机h5下拉加载更多的功能,这个下拉可以加载到20条,如图1所示,我们可以看到控制台有两句“进来了”的输出语句,也打了断点,下拉确实触发了两次加载更多的方法,每次加载5条,但是页面就是只加载到了10条,也不显示滑动区域底部的提示信息。最后实在没辙,随便换了下谷歌浏览器,发现谷歌浏览器提示了warn,如图2所示。
图1 QQ浏览器运行的效果,没有提示
图2 谷歌浏览器运行的效果,提出警告
这下子就知道了,Vue页面用到的oneWeek方法没有进行定义,虽然说这是我犯得一个低级错误,但是QQ浏览器竟然一点错误和警告都不提,所以,我第一次对QQ浏览器感到很失望。套壳浏览器虽然本土化做的很好,各种辅助功能和外观都做的深得人心。但是认真分析一下,套壳浏览器之所以比不上原生的浏览器,一是因为他们为了缩小软件体积而精简了内核,但是这样就会在浏览页面或者调试的时候会出现不可预估和难以判断的bug和错误。二是相比于原生浏览器,套壳浏览器为了在其内核上进行修改,这是需要时间的,所以其内核版本比原生浏览器的内核版本会相差几个版本。比如我电脑安装了最新版本的QQ浏览器(如图4所示)和最新版本的Chrome浏览器(如图5所示)。
图4 QQ浏览器的Chromium版本为70.0.3538.25
图4 Chrome浏览器的Chromium版本为77.0.3865.90
77.0.3865.90版本是2019.9发布的,70.0.3538.25版本大概是2018.11发布的,相差了近一年,期间的开发版,稳定版,测试版,金丝雀版版本将近20个版本!当然,每个人有每个人喜欢的浏览器,我们没有权利去强制别人使用同一款浏览器,也不必有浏览器高低之分的言论。但是,你如果是个Web前端开发人员,最好使用原生浏览器,这不仅仅是为了那些使用者考虑,也会为你的调试带来许多的便利。
图5 根据网站通讯流量监测机构StatCounter的统计,Chrome还是一枝独秀
顺便下整理常用浏览器的内核(基于2019年9月):
Chrome浏览器:Chromium(基于Blink)
Safari浏览器:Webkit(Blink和Trident的鼻祖)
火狐浏览器:Gecko
Opera浏览器:Chromium(以前也有属于自己开发的Presto内核,现已淘汰,加入谷歌豪华套餐)
IE浏览器:IE(基于Trident)
UC浏览器:Webkit
Edge浏览器:Chromium
QQ浏览器:Chromium(极速模式)+IE(兼容模式)
360浏览器:Chromium(极速模式)+IE(兼容模式)
2345浏览器:Chromium(极速模式)+IE(兼容模式)
猎豹浏览器:Chromium(极速模式)+IE(兼容模式)
搜狗高速浏览器:Chromium
百度浏览器:IE
遨游浏览器:IE
世界之窗浏览器:IE