之前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

套壳浏览器与Chrome浏览器之间的差别的更多相关文章

  1. 用Python+selenium打开IE浏览器和Chrome浏览器的问题

    这几天在学Python+selenium自动化,对三大浏览器Firefox,Chrome和IE都做了尝试,也都分别下载了对应的webdriver,如:geckodriver.chromedriver. ...

  2. ie11浏览器和chrome浏览器对于bgsound和background的一些区别

    今天在编写一个非常简单的网页的时候,按照书上写的,使用了一个jpg图片作为背景图片,用background属性放在<body>标签内,同时使用<bgsound>标签插入背景音乐 ...

  3. Python+selenium学习(一) 打开Firefox浏览器,IE浏览器和Chrome浏览器

    from selenium import webdriver # open Firefox #driver=webdriver.Firefox() # Open IE #driver=webdrive ...

  4. 搜狗浏览器或者360浏览器安装chrome 浏览器插件

    https://www.cnblogs.com/ingvar/p/6403777.html#undefined

  5. Selenium2学习-006-WebUI自动化实战实例-004-解决 Chrome 浏览器证书提示:--ignore-certificate-errors

    此文主要讲述 Java 运行 Selenium 脚本时,如何消除 Chrome 浏览器启动后显示的证书错误报警提示,附带 Chrome 参数使浏览器最大化的参数. 希望能对初学 Selenium2 W ...

  6. Selenium2学习-005-WebUI自动化实战实例-003-三种浏览器(Chrome、Firefox、IE)启动脚本源代码

    此文主要通过 三种浏览器(Chrome.Firefox.IE)启动脚本 功能,进行 Selenium2 三种浏览器启动方法的实战实例讲解.文中所附源代码于 2015-01-18 20:33 亲测通过, ...

  7. Chrome浏览器扩展开发系列之八:Chrome扩展的数据存储

    Google Chrome浏览器扩展可以使用如下任何一种存储机制: HTML5的localStorage API实现的本地存储(此处略) Google的chrome.storage.* API实现的浏 ...

  8. Chrome浏览器 54 版本显示“Adobe flash player已过期”问题解决

    背景 电脑上面的软件很久没升级,用腾讯电脑管家批量做了一次升级,结果Chrome浏览器升级到54版本flash控件没法用了. 第一时间想到直接到flash官网下载一个新的进行安装,结果官网检测显示,C ...

  9. 【Selenium专题】WebDriver启动Chrome浏览器(二)

    官方API Constructor Summary ChromeDriver() Creates a new ChromeDriver using the default server configu ...

随机推荐

  1. Elastic Stack 笔记(六)Elasticsearch5.6 搜索详解

    博客地址:http://www.moonxy.com 一.前言 Elasticsearch 主要包含索引过程和搜索过程. 索引过程:一条文档被索引到 Elasticsearch 之后,默认情况下 ES ...

  2. Spring Boot 入门之 Cache 篇(四)

    博客地址:http://www.moonxy.com 一.前言 Spring Cache 对 Cahce 进行了抽象,提供了 @Cacheable.@CachePut.@CacheEvict 等注解. ...

  3. 你好,C语言

    对于我来说,C语言就和陌生人一样,对他完全不了解,更不要提什么C++了,这就要我主动和他打招呼,深入认识了解它了哈.目前对于C语言的理解,只知道他的的功强大,能操作硬件,编写各类驱动,强悍的LINUX ...

  4. Webpack 打包太慢? 试试 Dllplugin

    webpack在build包的时候,有时候会遇到打包时间很长的问题,这里提供了一个解决方案,让打包如丝般顺滑~ 1. 介绍 在用 Webpack 打包的时候,对于一些不经常更新的第三方库,比如 rea ...

  5. (二)spring 高级装配-Condition -条件化的bean

    Condition:满足某个特定条件的情况下创建bean 条件化配置bean: a:@Conditional 指定一个class ,它指明了通过条件对比的类.如果没有指定class则通过Condito ...

  6. java自学小段 产生随机数

    public class Suijishu { public static void main(String[] args) { double i=Math.random();//产生一个0-0.5的 ...

  7. 工厂模式(整理自李建忠<C++设计模式>视频)

    整理自李建忠<C++设计模式>视频 一.导入:"对象创建"模式和工厂模式 工厂模式只是该模式下的一种. 二.举例说明 有这样一个场景:需要在MainForm中设计一个按 ...

  8. [技术栈]CRC校验原理及C#代码实现CRC16、CRC32计算FCS校验码

    1.CRC.FCS是什么 CRC,全称Cyclic Redundancy Check,中文名称为循环冗余校验,是一种根据网络数据包或计算机文件等数据产生简短固定位数校验码的一种信道编码技术,主要用来检 ...

  9. Maven 梳理 - 常用三种archetype说明

    archetype:原型的意思,可理解为Maven项目模板工具包 常用archetype 1.cocoon-22-archetype-webapp 2.maven-archetype-quicksta ...

  10. 【SQL server基础】获取当前时间并固定格式

    Select CONVERT(varchar(), GETDATE(), ): // Select CONVERT(varchar(), GETDATE(), ): Select CONVERT(va ...