Chrome開發者工具不徹底指南（5、移動篇）

時間 2019-11-13

原文原文鏈接

　　前面介紹了Chrome開發者工具的大部份內容工具，如今介紹最後兩塊功能Audits和Console面板。
1、Audits
　　Audits面板會針對目前網頁提出若干條優化的建議，這些建議分爲兩大類，一類是網絡加載性能，另外一類是界面性能。首先開下它的主界面。

　　Audits面板的網絡優化建議參照的是雅虎前端工程師的十四條黃金建議。爲了驗證這一點，咱們能夠作一次簡單的測試。根據十四條web性能建議中的其中一條:把css文件應該放入html文檔的頂部，避免網頁在渲染dom後出現閃爍的問題。咱們寫以下不規範代碼css

<!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高性能建站》這本書。相信會對你有幫助。
2、Console
Console面版能夠輸出你本身代碼。它能夠配合其餘面板一塊兒使用。點擊右上角的>_剪頭能夠啓用或者收起它。它也分了四個選項:
　　Console: 用於輸出和現實調試信息
　　Search: 在域名下查找文件和內容
　　Emulation : 啓用移動開發模式
　　Rendering: 在界面顯示各類監控信息
　　關於Console的玩法，已經有一位大神詳細講解過。我這裏就不一一介紹。點擊這裏去拜讀大神的文章吧。Search也比較簡單，露珠就不囉嗦了。如今主要講解一下Emulation模式下的移動開發。移動開發毫無疑問已經成爲web開發的主力軍了。因此，chrome也打造了一款配合咱們開發和測試的工具。html

1.進入移動開發模式
　　手機開發模式個人建議是把控制面版右置。這樣對手機開發來講是方便的。長按控制面板右上角類型標籤（img4）能夠切換控制面板的出現位置。調整完控制面板的位置後。點擊Emulation而後再點擊出如今選項擊面版中的文字。或者你直接點擊開發者工具界面左上角的手機圖標進入開發者模式。你能夠看到當你切換到移動開發模式後，鼠標已經變成了小黑圈圈了。
2.調試設備
　　在Device下拉菜單中選擇不一樣的手機模式。裏面包括安卓和蘋果系統的流行機器。勾選Emulate mobile選項能夠適應屏幕。Resolution這一項能夠調整手機屏幕的高度和寬度。
3.模擬網絡情況
　　Netword中選擇模擬的網絡情況。包括主流和非主流的各類網絡。（WIFI，3G，2G等）Sensors選項中自定義移動端的經緯度。在模型中能夠設定3D視圖角度。把鼠標放上去直接旋轉模型。這個功能暫時沒發現有啥卵用。

　　不少調試能夠在界面進行，這也是露珠一般作的。實際應用到的選項chrome都人性化地列在了主界面。選擇了移動開發模式後界面會變成這樣子:

　　須要注意的是，Chrome瀏覽器模擬的只是界面，內核和原生的不少功能是模擬不了的，不過這對於作html5移動開發的來講已經足夠了吧。前端

3、結束語html5

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