前面介紹了Chrome開發者工具的大部分内容工具，現在介紹最後兩塊功能Audits和Console面闆。
一、Audits
Audits面闆會針對目前網頁提出若幹條優化的建議，這些建議分為兩大類，一類是網絡加載性能，另一類是界面性能。首先開下它的主界面。
Audits面闆的網絡優化建議參照的是雅虎前端工程師的十四條黃金建議。為了驗證這一點，我們可以做一次簡單的測試。根據十四條web性能建議中的其中一條:把css檔案應該放入html文檔的頂部，避免網頁在渲染dom後出現閃爍的問題。我們寫如下不規範代碼
XHTML
| 1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> <!-- 把css檔案放入底部 --> <link rel="stylesheet" type="text/css" href="xuu.css"> </html> |
然後我們開始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開發者工具都介紹的差不多了，下一篇是本系列的尾篇。介紹幾款插件用（包括高大上的開發者工具皮膚哦），敬請關注！
轉載于:https://www.cnblogs.com/qianduanjingying/p/5032945.html