Google Chrome移動端模擬

Chrome 32 發布以后，開發者工具中新增了一個新工具——mobile emulation。這個工具絕對是為移動設備響應式設計測試而生的。

如果你還沒有打開該工具,那么請跟隨一下步驟：

• 按F12(或者Cmd+Alt+l on a Mac)
• 點擊Developer Tools under View -> Developer
• 右鍵網頁，點擊Inspect Element

在開發者工具的最上面，會看到一個像手機的新按鈕。點擊它開啟移動模擬模式。如下圖：

你可以看到開發者工具正常工作，但是有附加選項，網站被渲染成移動設備模擬狀態。

設備設置

在左上角，設備設置選項中有46個移動設備可供模擬，你可以設置以下內容：

• 屏幕分辨率
• 橫向和縱向旋轉
• 設置像素比
• 在可視化區域縮放、全屏操作

網絡設置

接下來是旁邊的藍色字體部分，網絡設置。我們可以設置網路速度offline 到 no throttling，可以幫助我們觀察網站加載速度快慢。

network下，我們可以手動設置代理，可以觀察網站反映速度。

斷點

斷點怎么辦？工具會自動檢查CSS設置中的斷點，并給每一個斷點提供鏈接。

你也可以模擬硬件感應裝置，包括：觸控輸入、地理定位、加速計等。

Usersnap Extension

完成上面的步驟，可很輕松模擬移動設備。不過還未完。

在不同情況下網站渲染情況如何？需要我們繼續模擬。然后，如何將信息分享給開發者和設計者呢？

Usersnap Chrome擴展和開發者工具良好融合，使用 Usersnap Widget ，你可以添加屏幕注釋兼容性報告，并使用移動模擬插件，將他應用到設置區域。

如果你沒有使用Usersnap，你可以在 Chrome Web Store中下載安裝。安裝后在工具欄中可以看到Usersnap圖標。第一次使用，需要激活。

點擊"OK"，然后登陸，就可以進入工具設置頁面。在頁面底部可以看到自己的項目。如圖：

選擇項目，點擊Select Project，你就可以使用工具了。回到移動模擬工具插件，我發現但頁面達到768px斷點，就會停止渲染。

因此，我想讓我的團隊知道這個問題，然后我可以修復它。點擊Usersnap按鈕，出現對話框，添加評論、高亮、注釋、規則等內容。

你可以在上圖中看到，我向我的團隊發送的信息，網站外觀、網站在移動設備中正常工作所需要的修改。通過這些方法，你是不是覺得網站設計、開發、測試更靈活，更可控呢。

總結

在這篇文章中，你學到了兩個很棒的工具幫助你測試網站、網站應用在多設備中的兼容性。

你使用過嗎？有如何體驗？歡迎交流！

本文由慧都控件網翻譯自，略有刪改，
轉載請注明：文章轉載自：慧都控件網 及譯文鏈接：用Google Chrome移動模擬工具做更好的響應式設計