Chrome開發者工具不完全指南（五、移動篇）

前面介紹了Chrome開發者工具的大部分內容工具，現在介紹最後兩塊功能Audits和Console皮膚。

一、Audits

Audits皮膚會針對目前網頁提出若干條優化的建議，這些建議分為兩大類，一類是網路載入效能，另一類是介面效能。首先開下它的主介面。

Audits皮膚的網路優化建議參照的是雅虎前端工程師的十四條黃金建議。為了驗證這一點，我們可以做一次簡單的測試。根據十四條web效能建議中的其中一條:把css檔案應該放入html文件的頂部，避免網頁在渲染dom後出現閃爍的問題。我們寫如下不規範程式碼

然後我們開始run了。你可以看到它會給出我們期望的建議，在web Page Performance裡面它給出了紅點，後面的建議是：將css放入頭部:

提升介面效能對於使用者體驗來說非常重要。如果你按照了十四條建議來處理優化你的web介面，那麼出現在Audits中的資訊會變得很少。如果你還不知道這十四條建議，我推薦你去閱讀《web高效能建站》這本書。相信會對你有幫助。

二、Console

Console面版可以輸出你自己程式碼。它可以配合其他皮膚一起使用。點選右上角的>_剪頭可以啟用或者收起它。它也分了四個選項:

Console:  用於輸出和現實除錯資訊
Search:  在域名下查詢檔案和內容
Emulation :  啟用移動開發模式
Rendering:  在介面顯示各種監控資訊

關於Console的玩法，已經有一位大神詳細講解過。我這裡就不一一介紹。點選這裡去拜讀大神的文章吧。Search也比較簡單，露珠就不囉嗦了。現在主要講解一下Emulation模式下的移動開發。移動開發毫無疑問已經成為web開發的主力軍了。所以，chrome也打造了一款配合我們開發和測試的工具。

1.進入移動開發模式

手機開發模式我的建議是把控制面版右置。這樣對手機開發來說是方便的。長按控制皮膚右上角型別標籤（img4）可以切換控制皮膚的出現位置。調整完控制皮膚的位置後。點選Emulation然後再點選出現在選項擊面版中的文字。或者你直接點選開發者工具介面左上角的手機圖示進入開發者模式。你可以看到當你切換到移動開發模式後，滑鼠已經變成了小黑圈圈了。

2.除錯裝置

在Device下拉選單中選擇不同的手機模式。裡面包括安卓和蘋果系統的流行機器。勾選Emulate mobile選項可以適應螢幕。Resolution這一項可以調整手機螢幕的高度和寬度。

3.模擬網路狀況

Netword中選擇模擬的網路狀況。包括主流和非主流的各種網路。（WIFI，3G，2G等）Sensors選項中自定義移動端的經緯度。在模型中可以設定3D檢視角度。把滑鼠放上去直接旋轉模型。這個功能暫時沒發現有啥卵用。

很多除錯可以在介面進行，這也是露珠通常做的。實際應用到的選項chrome都人性化地列在了主介面。選擇了移動開發模式後介面會變成這樣子:

需要注意的是，Chrome瀏覽器模擬的只是介面，核心和原生的很多功能是模擬不了的，不過這對於做html5移動開發的來說已經足夠了吧。

三、結束語

本篇文章主要介紹了移動開發測試的工具部分。chrome在模擬移動開發時效果有些欠缺。如果需要真機除錯，諸位可以考慮UC流浪器的開發版本（只支援安卓），chrome的移動版本（只支援安卓），或者自己買臺mac（露珠買不起啊）再買臺iphone（露珠的是小米的吊當機啊）配合聯調。weinre那玩意兒只能調樣式，還得自己加程式碼建議就不要去用了。好了，Chrome開發者工具都介紹的差不多了，下一篇是本系列的尾篇。介紹幾款外掛用（包括高大上的開發者工具皮膚哦），敬請關注！