使用 Chrome 開發工具的設備模式來開發響應式 Web 應用

我們在桌面和移動設備上開發網站，通常我們傾向于最初的桌面體驗。 但是這與越來越多的用戶使用移動設備訪問網絡的趨勢相脫離。 為了提高網站的用戶體驗，我們需要準確地知道網站在移動設備上的效果。 不久前，Chrome 開發者工具包里加入了手機模擬器特性，但是它不能連接真實的設備，還需要很多試驗和調試。 Chrome38 Beta版包含一個新的設備模式：一次點擊就可以啟動手機模擬器、檢查設備連接情況、模擬片狀網絡。

現在，開啟chrome“獲取元素”圖標右側的設備模式。 開啟后，chrome會自動顯示一個手機模擬器窗口，它可以模擬手機上所有的觸摸事件。 通過調整模擬器而不是整個瀏覽器窗口的大小，你可以方便的測試各種尺寸的屏幕。 你可以選擇模擬器中預置的手機型號，它會自動調整模擬器窗口、觸摸效果、用戶代理、屏幕分辨率等設置。

每一次媒體查詢都會以可視化的形式表現出來，因此你可以在模擬器中關聯斷點。 點擊一次即可調整模擬器大小，這使我們可以反復測試網站關聯的樣式。 如果你想修改媒體查詢模塊，點擊右鍵，跳轉到定義css的代碼。

最后,設備模擬器需要精確的將連接顯示給移動用戶.例如,一個3G連接相對于辦公室的快速WIFI而言,極大程序的限制了網站的體驗.DevTools可以幫助模擬網絡連接狀況(吞吐量和延遲),如EDGE, 3G, 4G – 甚至是離線.  

典型的系統級的網絡條件限制了所有的東西,DevTools卻只限制當前的tab.這使得app可以離線運行,并嘗試AppCache和Service Worker場景,同時,在另一個tab瀏覽參考資料.

請在你的開發工作流中試驗Device Mode,然后告訴我你的想法.如果你急切的想知道更多關于DevTools的優點,請查看我的頁面Google I/O 2014 talk: Developing Across Devices.