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