Chrome開發(fā)工具 設(shè)備模式 & 移動仿真

設(shè)備模式&移動仿真

隨著移動用戶的增長，移動端友好的響應(yīng)式網(wǎng)站設(shè)計變得越來越重要。網(wǎng)頁的內(nèi)容要在不同的設(shè)備以及各種網(wǎng)絡(luò)環(huán)境下看起來都不錯才行。但是想要測試移動端的體驗需要較長時間，并且調(diào)試也相當(dāng)困難。

在你的瀏覽器選項卡中有設(shè)備模式，該模式可以讓你看到在設(shè)備上的體驗效果，這就是移動仿真的力量。

你可以使用設(shè)備模式來：

• 通過模擬不同的屏幕大小和分辨率來測試你的響應(yīng)式設(shè)計效果如何，此模式下 Retina 屏幕也可以模擬。
• 使用網(wǎng)絡(luò)模擬器來評估你的站點(diǎn)的性能，并且不會影響到其他選項卡。
• 可視化并審查 CSS 媒體問題。
• 準(zhǔn)確模擬設(shè)備輸入，比如觸控事件、地理位置以及設(shè)備屏幕朝向。
• 結(jié)合目前已經(jīng)學(xué)過的 DevTools 技以及設(shè)備模式，可以更好的提高你的調(diào)試工作流效率。

注意：該文檔所提及的某些功能可能并不是穩(wěn)定版 Chrome 自帶的。如果你無法使用 Chrome 某種新特性，請使用 Chrome Canary 來獲取最新版本的 DevTools。

啟用設(shè)備模式

要打開設(shè)備模式請點(diǎn)擊切換設(shè)備模式 圖標(biāo)。當(dāng)設(shè)備模式開啟的時候，該圖標(biāo)會變成藍(lán)色并且當(dāng)前視圖會變成設(shè)備模擬器。

你也可以用鍵盤快捷鍵來讓設(shè)備模式在啟用和禁用之間切換：

Ctrl + Shift + M（或者在 Mac上使用 Cmd + Shift + M）

使用屏幕模擬器

設(shè)備模式下的屏幕模擬器可以讓你不用在不同設(shè)備之間切換就能測試站點(diǎn)的響應(yīng)靈敏度。

從使用預(yù)設(shè)的設(shè)備開始

設(shè)備模式中已經(jīng)含有不少預(yù)設(shè)的設(shè)備讓你能夠更快地開始調(diào)試。下拉預(yù)設(shè)的設(shè)備欄來快速選擇一個特定的設(shè)備。

從列表中選擇設(shè)備可以省去手動配置的時間。

每個預(yù)設(shè)的設(shè)備通過以下方式來模擬設(shè)備：

• 將請求指定為 UA 字符串
• 設(shè)置設(shè)備的分辨率和像素比
• 開啟觸控仿真（如果能夠使用的話）
• 模擬設(shè)備的滾動條并加入到視圖中，然后將視圖調(diào)整到設(shè)備的視角
• 頁面的自適應(yīng)文本不需要專門定義設(shè)備視角

提示：通過模擬屏幕分辨率 復(fù)選框可以開啟或者關(guān)閉屏幕分辨率模擬器。點(diǎn)擊更改方向 圖標(biāo)可以在橫向和豎向之間切換屏幕。選中 Fit 復(fù)選框來使模擬器的屏幕保持瀏覽器窗口大小，必要的時候會縮放視圖來適應(yīng)瀏覽器窗口（此設(shè)置是為了方便并且用統(tǒng)一的方式來模擬設(shè)備）。

自定義屏幕設(shè)置

如果想要對模擬器做出更加細(xì)致的設(shè)定，你可以使用預(yù)設(shè)設(shè)備列表下方的分辨率設(shè)置。

通過調(diào)整屏幕分辨率和像素比來自定義屏幕模擬器

想要自定義一個屏幕尺寸，可以在設(shè)備的長寬字段內(nèi)設(shè)置 CSS 像素尺寸值。

如果你想在一個非 Retina 屏的設(shè)備上模擬 Retina 屏設(shè)備，調(diào)整設(shè)備像素比 字段。設(shè)備像素比（DPR）是指邏輯上的像素和實際像素之比。擁有 Retina 屏的設(shè)備，比如 iPhone 5，擁有比普通設(shè)備更加高的像素密度，這對清晰度和視覺區(qū)域的大小有一定影響。

網(wǎng)頁中關(guān)于 DPR 密度的一些例子如下：

• CSS 媒體查詢，比如 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }
• CSS 圖片設(shè)置規(guī)則
• 圖片來源屬性如何設(shè)置
• window.devicePixelRatio 屬性

提示：如果你有 Retina 屏設(shè)備，你就會注意到低 dpi 圖像看起來會存在馬賽克而高 dpi 看起來則相當(dāng)清晰。想要在普通屏幕中模擬這種效果，將 DPR 設(shè)置為 2 并且通過縮放來調(diào)整屏幕尺寸。此時 2x 的信息看起來會很清晰，而 1x 則很模糊。

模擬網(wǎng)絡(luò)連接

對于移動端用戶來說，在不同網(wǎng)絡(luò)狀況下站點(diǎn)都能有良好表現(xiàn)是非常重要的。

設(shè)備的網(wǎng)絡(luò)連接狀況可以讓你來測試你的站點(diǎn)在不同網(wǎng)絡(luò)狀況下的變現(xiàn)如何，包括 2G、3G 甚至是離線狀態(tài)都可以模擬。在預(yù)設(shè)的列表中可以選擇網(wǎng)絡(luò)連接，選好之后相應(yīng)的網(wǎng)絡(luò)帶寬限制和延時操作狀況就會在程序中生效。

網(wǎng)絡(luò)限制會自動限制其最大下載吞吐量（傳輸速率）。延時操作會在連接時自行產(chǎn)生最低的延遲（RTT）。

審查 media query

Media query 是響應(yīng)式網(wǎng)站設(shè)計中相當(dāng)重要的一部分。設(shè)備模式讓你能夠更輕松地審查 media query。

要使用 media query，點(diǎn)擊窗口左邊頂部的 media query 圖標(biāo)。DevTools 會檢測到你的樣式表中的 media query 并將他們用不同顏色的長條在頂部顯示。

media query 的顏色表示：

• 藍(lán)色：查詢目標(biāo)的最大寬度。
• 綠色：查詢目標(biāo)寬度范圍。
• 橘色：查詢目標(biāo)最小寬度。

預(yù)覽屏幕樣式

點(diǎn)擊 media query 條形圖案來調(diào)整模擬器的分辨率并預(yù)言目標(biāo)屏幕大小的樣式。

查看 CSS

右鍵點(diǎn)擊某個長條可以查看 media query 是在 CSS 中哪里定義的，并且可以跳轉(zhuǎn)到源碼中的相應(yīng)位置。

提示：你使用 media query 監(jiān)視器的時候，你可能覺得你并不想一直開啟移動模擬器。要在不退設(shè)備模式的情況下關(guān)閉移動模擬器，點(diǎn)擊 全部重置 圖標(biāo)并刷新頁面即可。

預(yù)覽更多媒體類型的樣式

Media query 監(jiān)視器的目標(biāo)樣式主要用于屏幕。如果你想預(yù)覽其他媒體類型，比如輸出，你可以在模擬選項下的 media 面板中實現(xiàn)這一功能。

通過點(diǎn)擊瀏覽器窗口頂部右側(cè)的 More overrides 圖標(biāo)來打開 DevTools 模擬菜單。

選中 CSS media 復(fù)選框，然后在下拉列表中選擇一種媒體類型。

模擬設(shè)備傳感器

由于大多數(shù)電腦沒有觸控屏幕、GPS 芯片以及加速器，這些設(shè)備的輸入是很難在開發(fā)設(shè)備上測試的。設(shè)備模式的傳感模擬器減少了大部分模擬常規(guī)設(shè)備傳感器的開銷。

要控制傳感器，點(diǎn)擊瀏覽器右側(cè)上方的 More overrides 圖標(biāo)。然后在出現(xiàn)的模擬菜單中選擇 Sensors。

注意：如果你的應(yīng)用使用 JavaScript（如 Modernizr）來檢測傳感器狀況，請確認(rèn)你是在開啟傳感模擬器后重新加載頁面。

觸發(fā)觸摸事件

觸屏模擬器讓你可以精準(zhǔn)測試點(diǎn)擊事件，并且其反應(yīng)就像你用的就是一臺觸屏設(shè)備一樣。

在 sensors 面板中選中 Enable touch screen 復(fù)選框來啟用觸控模擬。

當(dāng)你和模擬界面進(jìn)行交互的時候，光標(biāo)會變成一個手指大小的圓圈，并且觸控事件會可以像在移動設(shè)備上一樣被觸發(fā)。（例如 touchstart，touchmove,touchend）

注意：要觸發(fā) elem.ontouch 處理，你必須使在 Chrome 上使用命令行標(biāo)簽 --touch-events。默認(rèn)情況下觸控仿真不會觸發(fā)這些處理器。

模擬多點(diǎn)觸控

在支持多點(diǎn)觸控輸入的設(shè)備上（電腦的觸控板等），你可以模擬移動設(shè)備的多點(diǎn)觸控事件。如果想要了解關(guān)于設(shè)置多點(diǎn)觸控模擬的更多信息，請參考 HTML5 Rocks 上“DevTools” 部分的網(wǎng)頁多點(diǎn)觸控開發(fā)指南。

提示：可以使用這份代碼來嘗試結(jié)合 DevTools 調(diào)試器以及觸控仿真。

重寫地理定位數(shù)據(jù)

和電腦不同，移動設(shè)備一般會使用 GPS 硬件來監(jiān)測位置信息。在設(shè)備模式下，你可以通過 Geolocation API 來模擬定位。

在 sensors 面板下選中 Emulation geolocation coordinates 復(fù)選框可以開啟定位模擬器。

在地理定位信息無法使用的情況下，你可以使用模擬來重寫 navigator.geolocation 的位置信息。

提示：使用這份代碼來實際體驗一下地理定位模擬器。

模擬設(shè)備屏幕方向

如果你需要測試加速器信息，只需要使用 Orientation API。同時，你也可以使用加速計模擬器來模擬相關(guān)數(shù)據(jù)。

在 sensors 面板中選中 Accelerometer 復(fù)選框來啟用加速計模擬器。

你可以對以下方向數(shù)據(jù)做出操作：

• α: z軸的旋轉(zhuǎn)數(shù)值
• β: 從左向右的傾斜值
• γ: 從前向后的傾斜值

你也可以直接點(diǎn)擊并拖動加速計模型來將設(shè)備調(diào)整到需要的方向。

提示：通過這份代碼來實際嘗試加速計模擬器。

自定義設(shè)備

設(shè)備模式提供了大量的仿真設(shè)備。如果你發(fā)現(xiàn)有些設(shè)備并沒有涵蓋到，那么你可以添加一個自定義的設(shè)備。要添加一個自定義的設(shè)備，請執(zhí)行以下步驟：

1. 前往 DevTools 設(shè)置頁面。
2. 激活 Devices 選項卡。
3. 點(diǎn)擊面板底部的 "Add custom device" 按鈕。
4. 在接下來顯示的表單中填入相應(yīng)的數(shù)據(jù)。
5. 點(diǎn)擊 "Add Device"。
6. 開啟設(shè)備模式然后在設(shè)備列表中找到你設(shè)置的自定義設(shè)備。

添加新設(shè)備

限制

盡管 Chrome 的設(shè)備模式提供了許多實用的工具，它也有著一定的限制。

目前已知的問題有以下這些：

• 設(shè)備硬件問題
  • GPU 和 CPU 還無法模擬。
• 瀏覽器的 UI 問題
  • 移動系統(tǒng)的某些顯示部分，比如地址欄，無法模擬。
  • 一些原生的顯示模式，比如 <select> 元素等，無法模擬。
  • 一些增強(qiáng)功能，比如通過數(shù)字輸入來打開鍵盤等行為，可能和實際設(shè)備不大相同。
• 瀏覽器的功能問題
  • 在模擬器中使用了 WebGL 功能，但是在 iOS 7 的設(shè)備上并不支持該功能。
  • Chrome 不支持 MathML，但是 iOS 7 設(shè)備支持該工呢過。
  • iOS 5 方向縮放問題并沒有模擬出來。
  • CSS 的行高屬性在模擬器中可以使用，但是 Opera Mini 并不支持該屬性。
  • 一些 CSS 規(guī)則的限制，比如在 Internet Exploer 中的那樣，并沒有模擬出來。
• AppCache
  • 在模擬器中 AppCache 的 manifest 文件以及查看源請求并沒有覆蓋掉 UA。

盡管有著上述諸多現(xiàn)實，設(shè)備模式模擬器依舊足以承擔(dān)大多數(shù)工作。當(dāng)你想在實際設(shè)備上測試的時候，你可以參考 DevTools 的教程 remote debugging 來了解更多信息。