市面上的浏览器多种多样,而浏览器的王者——IE 浏览器,它在 2002 年市场份额高达 95.4%。直到后续 Firefox,Safari,Chrome 相继问世才动摇了 IE 浏览器的地位,其中 Chrome 在 2008 年一经问世便表现出了非凡的天赋,一路披荆斩棘所向披靡。

最近,国外统计公司 Statcounter 公布了全球浏览器市场份额调查数据。

1.png

△ 桌面端主流浏览器占比

2.png

△ 移动端主流浏览器占比

从上面两张图中可以看出,无论是移动端还是桌面端,谷歌 Chrome 浏览器都名列第一,大幅领先其他品牌。

为何 Chrome 浏览器会有如此高的市场占比,我们一起来看下 Chrome 浏览器都有哪些优点。


Chrome 浏览器的优点

界面简洁

浏览器的本质是一个展示网络资源的工具,一个简洁的界面会让用户更加专注于内容,而不被浏览器的外观所干扰。毫无疑问,Chome 在这一点上就打败了不少对手。

整合了 Google 服务

Chrome 作为 Google 公司开发的浏览器,肯定会给自己的产品打打广告,但是 Google 的产品确实质量过硬,我们可以在 Chrome 上体验到很多优质的 Google 产品,比如在线文档表格编辑器、网页的自动翻译、Gmail 的离线版与桌面提醒等。

强大的开发者控制台

Chrome 具有功能强大的开发者控制台,可以监控网络带宽,查看源代码并选择颜色以在线调整设计,还可以进行前端的断点调试。正是因为这强大的开发者控制台,Chrome 受到了许多开发者的青睐。

丰富的扩展程序

Chrome 具有大量扩展功能,从简单的广告拦截到各种小工具的自定义扩展,一应俱全,可以强浏览器的功能以满足特殊需求。其中大部分的扩展程序都可以在 Chrome 网上应用商店上找到。还可以雇用开发人员来构建自己的应用程序,以改善项目的工作流程。

这里简单介绍一个拓展程序:Adblock Plus,经常使用 Chrome 浏览器的小伙伴应该对这个扩展程序非常熟悉。

3.png

这是一款免费的广告拦截器,功能非常强大。下面我们来测试看看。

首先我们不打开这个插件随意访问一个网站,可以看到单顶部位置就有3个广告。

4.png

此时我们打开插件再次访问,很明显的,广告就消失了,而且右侧的滚动广告栏中也变成了空白,界面一下清爽了许多。

5.png

Adblock Plus 插件还可以自行设置网站白名单,即对某些网站不做屏蔽广告操作。也可以自行添加或移除过滤列表等。

以上就是 Chrome 拥有的众多优点中的其中几项,更多优点相信大家在使用后就能发现。接下来我们讲讲如何巧用 Chrome,以及当我们接入 CDN 后,如何通过 Chrome 查看各项配置是否正确。

巧用 Chrome,判断 CDN 配置是否正确

  • 通过开发者控制台查看详细信息

很多小伙伴都会有这样的疑惑,接入 CDN 服务后,如何判别是否成功接入,并且查看节点、缓存等信息。我们可以通过 Chrome 浏览器控制台的 Network 面板查看资源加载情况,同时也可以通过点击任意一个资源查看请求和响应头信息。下图是响应头的基本字段描述,从这些字段中我们可以非常直观的得到节点IP、缓存情况、CDN接入情况等。

6.png

  • 通过扩展程序添加请求头

当我们接入又拍云CDN,并配置 Referer 防盗链后,怎么通过Chrome浏览器去验证是否配置成功呢?如图,我配置了Referer白名单并禁止Referer为空。

7.png

此时我直接访问配置在CDN的站点,肯定会报错,报错信息显示缺少了 Referer 头部。

8.png

这时使用 ModHeader 扩展程序,有兴趣的小伙伴也可以到 Chrome 商店下载。如图所示配置上 Referer 请求头。

9.png

再次访问刚刚的站点,就可以正常访问了。这代表说明我们 Referer 防盗链配置正确并且正常运作。

10.png

同时打开 Chrome 浏览器控制台的 Network 面板可以看到 Request Header 中也包含了刚刚通过扩展程序添加的请求头。

11.png

既然这个扩展程序可以添加请求头,那么他能够实现的功能肯定不止于检验 Referer的配置,所有和请求头相关的配置都可以通过这个来检查,非常方便。

以上就是一些 Chrome 的简单使用技巧啦。Chrome浏览器还有很多其他的妙用,一篇文章是无法全部概括的,大家可以自行探索一下,你会发现有很多有趣的地方。