1. 程式人生 > >白話科普系列——最好用的瀏覽器 Chrome,你用了麼?

白話科普系列——最好用的瀏覽器 Chrome,你用了麼?

市面上的瀏覽器多種多樣,而瀏覽器的王者——IE 瀏覽器,它在 2002 年市場份額高達 95.4%。直到後續 Firefox,Safari,Chrome 相繼問世才動搖了 IE 瀏覽器的地位,其中 Chrome 在 2008 年一經問世便表現出了非凡的天賦,一路披荊斬棘所向披靡。 最近,國外統計公司 Statcounter 公佈了全球瀏覽器市場份額調查資料。 ![桌面端主流瀏覽器佔比](https://upload-images.jianshu.io/upload_images/80097-bc5302a1e685efe8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ![移動端主流瀏覽器佔比](https://upload-images.jianshu.io/upload_images/80097-cff6ce3a3a7501e1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 從上面兩張圖中可以看出,無論是移動端還是桌面端,谷歌 Chrome 瀏覽器都名列第一,大幅領先其他品牌。 為何 Chrome 瀏覽器會有如此高的市場佔比,我們一起來看下 Chrome 瀏覽器都有哪些優點。 ## Chrome 瀏覽器的優點 **介面簡潔** 瀏覽器的本質是一個展示網路資源的工具,一個簡潔的介面會讓使用者更加專注於內容,而不被瀏覽器的外觀所幹擾。毫無疑問,Chome 在這一點上就打敗了不少對手。 **整合了 Google 服務** Chrome 作為 Google 公司開發的瀏覽器,肯定會給自己的產品打打廣告,但是 Google 的產品確實質量過硬,我們可以在 Chrome 上體驗到很多優質的 Google 產品,比如線上文件表格編輯器、網頁的自動翻譯、Gmail 的離線版與桌面提醒等。 **強大的開發者控制檯** Chrome 具有功能強大的開發者控制檯,可以監控網路頻寬,檢視原始碼並選擇顏色以線上調整設計,還可以進行前端的斷點除錯。正是因為這強大的開發者控制檯,Chrome 受到了許多開發者的青睞。 **豐富的擴充套件程式** Chrome 具有大量擴充套件功能,從簡單的廣告攔截到各種小工具的自定義擴充套件,一應俱全,可以增強瀏覽器的功能以滿足特殊需求。其中大部分的擴充套件程式都可以在 Chrome 網上應用商店上找到。還可以僱用開發人員來構建自己的應用程式,以改善專案的工作流程。 這裡簡單介紹一個拓展程式:Adblock Plus,經常使用 Chrome 瀏覽器的小夥伴應該對這個擴充套件程式非常熟悉。 ![](https://upload-images.jianshu.io/upload_images/80097-2bdf4bb0a3a20c84.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 這是一款免費的廣告攔截器,功能非常強大。下面我們來測試看看。 首先我們不開啟這個外掛隨意訪問一個網站,可以看到單頂部位置就有3個廣告。 ![](https://upload-images.jianshu.io/upload_images/80097-bef086494c6ed6b8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 此時我們開啟外掛再次訪問,很明顯的,廣告就消失了,而且右側的滾動廣告欄中也變成了空白,介面一下清爽了許多。 ![](https://upload-images.jianshu.io/upload_images/80097-cbed9dc9aa21c59c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) Adblock Plus 外掛還可以自行設定網站白名單,即對某些網站不做遮蔽廣告操作。也可以自行新增或移除過濾列表等。 以上就是 Chrome 擁有的眾多優點中的其中幾項,更多優點相信大家在使用後就能發現。接下來我們講講如何巧用 Chrome,以及當我們接入 CDN 後,如何通過 Chrome 檢視各項配置是否正確。 ## 巧用 Chrome,判斷 CDN 配置是否正確 **- 通過開發者控制檯檢視詳細資訊** 很多小夥伴都會有這樣的疑惑,接入 CDN 服務後,如何判別是否成功接入,並且檢視節點、快取等資訊。我們可以通過 Chrome 瀏覽器控制檯的 Network 面板檢視資源載入情況,同時也可以通過點選任意一個資源檢視請求和響應頭資訊。下圖是響應頭的基本欄位描述,從這些欄位中我們可以非常直觀的得到節點IP、快取情況、CDN接入情況等。 ![](https://upload-images.jianshu.io/upload_images/80097-e88bacb1010dd562.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) **- 通過擴充套件程式新增請求頭** 當我們接入又拍雲CDN,並配置 Referer 防盜鏈後,怎麼通過Chrome瀏覽器去驗證是否配置成功呢?如圖,我配置了Referer白名單並禁止Referer為空。 ![](https://upload-images.jianshu.io/upload_images/80097-6a49de499bcf1dfa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 此時我直接訪問配置在CDN的站點,肯定會報錯,報錯資訊顯示缺少了 Referer 頭部。 ![](https://upload-images.jianshu.io/upload_images/80097-9292189dbd31530c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 這時使用 ModHeader 擴充套件程式,有興趣的小夥伴也可以到 Chrome 商店下載。如圖所示配置上 Referer 請求頭。 ![](https://upload-images.jianshu.io/upload_images/80097-59857fb771e4df53.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 再次訪問剛剛的站點,就可以正常訪問了。這代表說明我們 Referer 防盜鏈配置正確並且正常運作。 ![](https://upload-images.jianshu.io/upload_images/80097-5785ccd73ab1ba75.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 同時開啟 Chrome 瀏覽器控制檯的 Network 面板可以看到 Request Header 中也包含了剛剛通過擴充套件程式新增的請求頭。 ![](https://upload-images.jianshu.io/upload_images/80097-d82e53706b08d8cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 既然這個擴充套件程式可以新增請求頭,那麼他能夠實現的功能肯定不止於檢驗 Referer的配置,所有和請求頭相關的配置都可以通過這個來檢查,非常方便。 以上就是一些 Chrome 的簡單使用技巧啦。Chrome瀏覽器還有很多其他的妙用,一篇文章是無法全部概括的,大家可以自行探索一下,你會發現有很多有趣的地方。 ![](https://upload-images.jianshu.io/upload_images/80097-e91b2eda3e84a719.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) #### 推薦閱讀 [如何選擇適合自己網站的防盜鏈](https://www.upyun.com/tech/article/583/%E5%A6%82%E4%BD%95%E9%80%89%E6%8B%A9%E9%80%82%E5%90%88%E8%87%AA%E5%B7%B1%E7%BD%91%E7%AB%99%E7%9A%84%E9%98%B2%E7%9B%97%E9%93%BE.html) [“網頁內容無法訪問”可能是跨域錯誤!](https://www.upyun.com/tech/article/586/%E2%80%9C%E7%BD%91%E9%A1%B5%E5%86%85%E5%AE%B9%E6%97%A0%E6%B3%95%E8%AE%BF%E9%97%AE%E2%80%9D%E5%8F%AF%E8%83%BD%E6%98%AF%E8%B7%A8%E5%9F%9F%E9%94%99%E8%AF%AF%EF%BC%8