> 原文：http://www.cnblogs.com/constantince/p/4624241.html
前面介紹了Chrome開發者工具的大部分內容工具，現在介紹最后兩塊功能**Audits**和**Console**面板。
## 一、Audits
Audits面板會針對目前網頁提出若干條優化的建議，這些建議分為兩大類，一類是網絡加載性能，另一類是界面性能。首先開下它的主界面。
**Audits**面板的網絡優化建議參照的是雅虎前端工程師的十四條黃金建議。為了驗證這一點，我們可以做一次簡單的測試。根據十四條web性能建議中的其中一條:把css文件應該放入html文檔的頂部，避免網頁在渲染dom后出現閃爍的問題。我們寫如下不規范代碼
~~~
<!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**的玩法，已經有一位大神詳細講解過。我這里就不一一介紹。[點擊這里](http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html)去拜讀大神的文章吧。*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開發者工具都介紹的差不多了，下一篇是本系列的尾篇。介紹幾款插件用（包括高大上的開發者工具皮膚哦），敬請關注！
