之前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. HBase WAL原理学习

    1.概述 客户端往RegionServer端提交数据的时候,会写WAL日志,只有当WAL日志写成功以后,客户端才会被告诉提交数据成功,如果写WAL失败会告知客户端提交失败,换句话说这其实是一个数据落地 ...

  2. Burpsuit构造测试数据

      一.使用场景 测试设备web性能优化时,需要构造或删除多个user.设备.设备账号.订单等,除了使用excel批量导入外,有些数据构造/删除使用burpsuit代理并将对应请求发送到Burp In ...

  3. 前端 页面加载完成事件 - onload,五种写法

    在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$ ...

  4. 制作简易的3D相册

      今天介绍一下3D相册,用到了开源的FeatureCoverFlow控件,之前的几个作品用的也全都是开源的控件,为什么要用开源的控件呢,因为...他稳定啊! 1.准备   仍然是,去掉标题栏,然后导 ...

  5. charles 远程映射到URL地址

    本文参考:charles 映射到远程URL地址 远程映射/Map Remote Settings 功能:把你要请求的地址,映射到一个远程地址:相当于把你的请求地址修改了: 远程映射工具 远程映射工具根 ...

  6. TestNG(三) 基本注解BeforeMethod和AfterMethod

    package com.course.testng; import org.testng.annotations.*; public class BasicAnnotation { @Test //最 ...

  7. Python连载39-生成器、next函数、yield返回值

    ​一.生成器 1.定义(generator):一边循环一边计算下一个元素的机制/算法 2.满三个条件 (1)每次调用都能产生出for循环需要的下一个元素 (2)如果达到最后一个后,能够爆出StopIt ...

  8. php tp5 composer

    ## php tp5 composer安装tp5.1需要先去装个Apache或者Nginx,再装个php环境.一般Windows可以直接使用xmapp.然后tp5好像python的django啊... ...

  9. Decorator:从原理到实践

    前言 原文链接:Nealyang/personalBlog ES6 已经不必在过多介绍,在 ES6 之前,装饰器可能并没有那么重要,因为你只需要加一层 wrapper 就好了,但是现在,由于语法糖 c ...

  10. 安装pytest-allure-adaptor后,运行报错:AttributeError: module 'pytest' has no attribute 'allure'

    ​ 原因:因为pytest-allure-adaptor库基本被python3放弃了,运行很不友好,反正我运行就是报错 解决方法: 先卸载:pip uninstall pytest-allure-ad ...