網(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)自定義，界面自定義都很好用。不多介紹，試一試吧，適合自己的才是最好的。
