網(wǎng)上有個(gè)笑話,說(shuō) Chrome 是披著瀏覽器皮的操作系統(tǒng)。雖然只是一句玩笑話,但是也反映了 Chrome 功能較多的事實(shí)。
這篇文章的主題是 Chrome 如何調(diào)試網(wǎng)頁(yè),ionic 的也適用。因?yàn)?Chrome 功能非常多,我僅把最常用的功能列出來(lái)進(jìn)行分享。文章結(jié)尾有彩蛋。
準(zhǔn)備材料
Chrome 瀏覽器
http://www.google.cn/chrome/browser/desktop/
這個(gè)地址是官方的,應(yīng)該沒有被墻。不要再去亂七八糟的網(wǎng)站下了。
正文
首先拿百度舉例。
運(yùn)行 Chrome,打開百度首頁(yè)。右鍵檢查可打開調(diào)試面板,快捷鍵如下:
功能/平臺(tái) | Windows | Mac |
---|---|---|
打開/關(guān)閉 DevTools | F12、Ctrl + Shift + I | Command + Option + I |
打開 DevTools | Ctrl + Shift + C | Command + Option + C |
查看鼠標(biāo)指向的元素
就是鼠標(biāo)指哪顯示哪里的元素,右側(cè)按鈕是開關(guān)
手機(jī)模式
可以模擬手機(jī)的運(yùn)行,左側(cè)按鈕可以切換手機(jī)型號(hào),右側(cè)按鈕可以 打開/關(guān)閉 手機(jī)模式
Elements
左邊是 HTML 源碼,右邊是 CSS 樣式。可以手動(dòng)修改、禁用一些 CSS 樣式進(jìn)行查看
Console
控制臺(tái)輸出的 console.log 等都會(huì)在這里顯示。百度這里還有個(gè)招聘信息,感興趣的可以試試 :)
Sources
這個(gè)我主要用來(lái)打斷點(diǎn)。Command + P 搜索到你要找的文件,并打斷點(diǎn)。Windows 里應(yīng)該是 Ctrl + P 吧。
比如一個(gè) ionic 項(xiàng)目,我們要給 app.component.ts 這個(gè)文件打斷點(diǎn)調(diào)試,直接找到該文件,打斷點(diǎn)運(yùn)行。這個(gè)在 debug 的時(shí)候非常好用。
Network
查看一些網(wǎng)絡(luò)請(qǐng)求。分別會(huì)列舉名字、狀態(tài)碼、類型、大小、加載耗時(shí)等。
HTTP 狀態(tài)碼
這里簡(jiǎn)單列舉一下不同字頭的意思:
消息(1字頭)
成功(2字頭)
重定向(3字頭)
請(qǐng)求錯(cuò)誤(4字頭)
服務(wù)器錯(cuò)誤(5字頭)
再放個(gè)完整版:
HTTP 狀態(tài)碼大全
接下來(lái)我們點(diǎn)擊 ?? 圖標(biāo)清除一下已顯示的數(shù)據(jù)。并點(diǎn)擊百度頂部的新聞按鈕,并在 Network 中選擇 XHR(XMLHttpRequest),就可以看到他的 XHR 網(wǎng)絡(luò)請(qǐng)求。右下側(cè)可以選擇 Headers、Preview、Response 等。
這里不過(guò)多講解,想深入了解 HTTP 相關(guān)知識(shí)的,可以去看看《圖解HTTP》。
調(diào)試安卓應(yīng)用 Web 頁(yè)面
拿一個(gè)我的 ionic Demo 舉例。
1.打開 USB 調(diào)試、允許文件傳輸
2.手機(jī)裝上你要測(cè)試的應(yīng)用
3.在 Chrome 復(fù)制進(jìn)這段話
chrome://inspect/#devices
4.運(yùn)行該應(yīng)用
首次使用 inspect 的時(shí)候,有可能會(huì)出現(xiàn)畫面空白的問題。原因是 Chrome 需要下載一些工具,翻墻使用一次后即可解決
你會(huì)在網(wǎng)頁(yè)上看到你正在運(yùn)行的應(yīng)用,我們點(diǎn)擊 inspect
接下來(lái)就會(huì)在網(wǎng)頁(yè)上打開你手機(jī)的應(yīng)用,你可以通過(guò)點(diǎn)擊網(wǎng)頁(yè)來(lái)控制手機(jī),右邊的功能和前面講的操作技巧一樣,
可以打斷點(diǎn)、看網(wǎng)絡(luò)請(qǐng)求等
。缺點(diǎn)是可能有點(diǎn)卡
彩蛋
在最后分享給大家?guī)讉€(gè)實(shí)用的工具。
修改 hosts 上 Google 查資料
比如 ionic 中文資料太少,找起來(lái)還是 Google 方便。Chrome拓展程序:AdBlockPlus
屏蔽廣告的神器,更多工具 -> 拓展程序 里,搜索 ad 應(yīng)該就能找到他了,如果被墻了用上面那個(gè)改 hosts 的就能解決。
臨時(shí)找的圖,這還不算明顯的,有的網(wǎng)站使用前后那叫一個(gè)夸張。這個(gè)擴(kuò)展還有一個(gè)好處,他可以自定義過(guò)濾元素,遇到漏網(wǎng)之魚手動(dòng)屏蔽之后會(huì)記錄起來(lái)的。
-
Chrome拓展程序:Infinity新標(biāo)簽頁(yè)
以前不愛用 Chrome 就是他打開新標(biāo)簽頁(yè)不太習(xí)慣,這個(gè)插件完美解決了這個(gè)問題。包括圖標(biāo)自定義,界面自定義都很好用。不多介紹,試一試吧,適合自己的才是最好的。