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