Chrome開發者工具不完全指南（五、移動篇）
前面介紹了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
二、Console
Console面版可以輸出你自己程式碼。它可以配合其他面板一起使用。點選右上角的>_剪頭可以啟用或者收起它。它也分了四個選項:
Console: 用於輸出和現實除錯資訊
Search: 在域名下查詢檔案和內容
Emulation : 啟用移動開發模式
Rendering: 在介面顯示各種監控資訊
關於Console的玩法，已經有一位大神詳細講解過。我這裡就不一一介紹。點選這裡去拜讀大神的文章吧。Search也比較簡單，露珠就不囉嗦了。現在主要講解一下Emulation
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開發者工具都介紹的差不多了，下一篇是本系列的尾篇。介紹幾款外掛用（包括高大上的開發者工具面板哦），敬請關注！
相關推薦
Chrome開發者工具不完全指南（五、移動篇）
前面介紹了Chrome開發者工具的大部分內容工具，現在介紹最後兩塊功能Audits和Console面板。一、Audits Audits面板會針對目前網頁提出若干條優化的建議，這些建議分為兩大類，一類是網路載入效能，另一類是介面效能。首先開下它的主介面。 Audits面板的網路優化建議參照的是雅虎前端工
Chrome開發者工具不完全指南（四、效能進階篇）
前言 Profiles面板功能的作用主要是監控網頁中各種方法執行時間和記憶體的變化，簡單來說它就是Timeline的數字化版本。它的功能選項卡不是很多（只有三個），操作起來比較前面的幾塊功能版本來說簡單，但是裡面的資料確很多，很雜，要弄懂它們需要花費一些時間。尤其是在記憶體快照中的各種龐雜的資料。在這篇
Chrome開發者工具不完全指南（一、基礎功能篇）
就算你不是一名前端開發工程師，相信你也不會對Chrome瀏覽器感到陌生。根據最新的一份（2015/06）的瀏覽器市場佔有率報告，Chrome近乎佔有瀏覽器天下的半壁江山。簡單、快捷使它成為了新時代人們的新寵。如果你是一名web開發人員，我推薦你使用Chrome。作為前端開發的"IDE"，你只需要搭配一個編
Chrome開發者工具不完全指南（二、進階篇）
function a () { b(); } function b() { c(); } function c() { //在該處斷點，檢視call stack } a->b->c. call stack 從上到下的順序就是 c
Chrome開發者工具不完全指南：（三、效能篇）
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div{ height: 20px; widows: 20p
Hadoop不完全分佈（單機、偽分佈）模式搭建
一，配置一臺普通的虛擬機器 二、解壓安裝Hadoop 三、配置Java與Hadoop的環境變數 鍵入命令： vim /etc/profile 按i進入插入狀態 ，開始使用vim編輯器編輯： 在末尾插入下列這段程式碼： export JAVA_HOME='
ctf工具不完全指南
最近接連趕上了ssctf和hctf，對我來說算是一償夙願，總算從在網站上做做以前的題，到參加比賽，正式邁入圈內了。雖然學校內的氛圍不濃厚，但總算也能拉起一支能參賽的隊伍，第一次正式參賽的結果算是讓我挺滿意的。戰後是時候來個總結了。 經驗上的差距讓一些本來可以做的題目也
更效率、更優雅 | 阿里巴巴開發者工具不完全盤點
從人工到自動化，從重複到創新，技術演進的歷程中，伴隨著開發者工具類產品的發展。 阿里巴巴將自身在各類業務場景下的技術積澱，通過開
Spring Data REST不完全指南（二）
上一篇文章介紹了Spring Data REST的功能及特徵，以及演示瞭如何在專案中引入Spring Data REST並簡單地啟動演示了Spring Data REST專案。在本文中，我們將深入瞭解Spring Data REST的特性，以此來滿足我們日常api開發工作的要求。 如果僅僅是上一篇文章中對Sp
Spring Data REST不完全指南（三）
上一篇我們介紹了使用Spring Data REST時的一些高階特性，以及使用程式碼演示瞭如何使用這些高階的特性。本文將繼續講解前面我們列出來的七個高階特性中的後四個。至此，這些特效能滿足我們大部分的介面開發場景。 需要滿足的一些要求： 1.針對欄位級別，方法級別，類級別進行限制（禁止某些欄位，方法，介面的
自己動手開發智能聊天機器人完全指南（附完整源碼）
ace 音箱 應用 圖片 先來 來看 ping 12px 搜索引擎 一、前言本文是《自己動手開發智能聊天機器人完全指南（附完整源碼）》的第二篇，也是21天實戰人工智能系列《知識圖譜完全項目案例剖析》裏面的知識圖譜應用的案例。前文中實現了一個最基本的人工智能聊天機器人，其能力
機器學習系列(12)_XGBoost參數調優完全指南（附Python代碼）
row cti tar libraries 叠代 數據科學家 值範圍 邏輯回歸 doc https://blog.csdn.net/han_xiaoyang/article/details/52665396 轉： 原文地址：Complete Guide to Paramet
自己動手開發智慧聊天機器人完全指南（附python完整原始碼）
一、前言人工智慧時代，開發一款自己的智慧問答機器人，一方面提升自己的AI能力，另一方面作為轉型AI的實戰練習。在此把學習過程記錄下來，算是自己的筆記。二、正文2.1 下載pyaiml下載pyaiml2.2 安裝pip install aiml安裝aiml2.3 檢視安裝完成後
CentOS 7離線安裝CDH 5.16.1完全指南（含各種錯誤處理）
二進制安裝 分鐘 mon 火墻 下一步 emc bsp 自動安裝 名稱 安裝包下載 1、CM軟件包下載 從http://archive.cloudera.com/cm5/redhat/7/x86_64/cm/5.16.1/RPMS/x86_64/下載rpm包，如下：
CSS中居中的完全指南（中英對照翻譯）
翻譯自：https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child of CSS complaining. Why does it have to be so har
spring cloud（五、配置中心）
在分散式系統中，由於服務數量巨多，為了方便服務配置檔案統一管理，實時更新，所以需要分散式配置中心元件。在Spring Cloud中，有分散式配置中心元件spring cloud config ，它支援配置服務放在配置服務的記憶體中（即本地），也支援放在遠端Git倉庫中。 一、設定一個配置中心（e
sql注入——不定期更新（二、關鍵詞繞過）
0x01 前言sql注入的過程中，經常會遇到來自防守方的過濾，waf等情況，那麼一般的sql注入語句就不能成為成功的payload，這個時候需要我們用各種繞過的姿勢，見招拆招0x02 這裡用一個簡單的例子來寫一下思路這裡過濾了一些sql注入常用的語句和過濾符號，正常的sql注
不分組求和（Linq、儲存過程）
A linq group by 常數： http://bbs.csdn.net/topics/390775189 如 var sum = list.GroupBy(r => 0).Select(g => new {
C# Winform 窗體美化（五、滑鼠穿透）
五、滑鼠穿透 以前在玩射擊遊戲的時候，狙擊槍的設定一般是開鏡才有準星，所以想是不是可以自己造一個默認準星出來，思路是現在視窗上畫一個準星，然後把窗體其他區域都透明，然後設定滑鼠穿透； 結果是：
Linux核心原始碼分析--檔案系統（五、Inode.c）
_bmap() 1、_bmap()函式用於把一個檔案資料塊對映到盤塊的處理操作 因為一個i節點對應一個檔案，所以上面的i節點對映的邏輯塊號就是檔案資料存放的邏輯塊號；i_zone[0]到i_zone[6]是直接邏輯塊號，i