行動第一代的新型裝置模式

Paul Bakaus
Paul Bakaus

專為行動裝置打造的全新裝置模式

早在一年多前,我們就推出了裝置模式來模擬裝置,並支援回應式設計。現在要進行首次重大升級,並從 Chrome 49 版開始,有什麼新功能?

行動裝置已成為 Chrome 開發人員工具的起點。雖然我們過去提供模擬行動裝置的方法,但開發的預設值是電腦版。行動裝置模擬功能一律必須開啟。由於行動版網站的使用率 已成為許多平台的瀏覽人

最新消息

新裝置模式。

首先最重要的一點,就是簡化使用者介面,且不會佔用太多空間。我們預期新的裝置模式會成為大多數使用者的主要開發模式,因此開發人員必須採用簡潔又簡單的設計來擴充開發人員工具的主要導覽列。

新裝置模式。

全新快速跳動裝置尺規來掌控媒體查詢。

此外,我們還將可視區域置中,並在頂端加入新的快速跳動裝置尺規。這在設計回應式設計時提供絕佳協助,可讓您瞭解最常見的裝置大小。

最後,許多選項都盡可能組合或隱藏在切換鈕後方這些新的複合選項可讓您更輕鬆地切換不同模式。如要切換特定控制選項或自訂工具列使用體驗 請按一下三點圖示選單的圖示

預設為回應式廣告

裝置模式下拉式選單。

主要的開發人員工具工具列現在展開至瀏覽器視窗左側,並包含可模擬各種行動裝置和電腦裝置的最重要的工具。您可以選擇兩種開發模式:

  • 回應式
  • 特定裝置

不論是哪一種模式,可視區域都位於 Chrome 中能夠調整大小的專用視窗。這種做法有極大優勢,可讓您依照自己的偏好,最大化瀏覽器視窗和開發人員工具,而且當您測試多種大小的網頁大小後再切換時,不會有跳動的情形。

建議您在啟用疊代作業時採用「回應式」模式,確保網站可在各種裝置上運作,而非只有少數特定裝置。在這個模式中,可視區域旁的控點可以自由調整大小。

特定裝置是指您選擇特定裝置並將可視區域鎖定在其大小時。當您想進行最終修正,並在即將上市的幾款熱門裝置上進行微調時,這項功能就能派上用場。既然下拉式選單中 會列出各種裝置,就不只能列出目前最熱門的裝置如果您選取其中一個選項,我們會盡可能讓裝置行為如實交易:觸控事件、使用者代理程式、可視區域,以及裝置的 Chrome 和 UI (如有) 皆經過模擬。

整合式遠端偵錯

即使是成效最佳的模擬動作,也只能對您到目前為止。以下列舉一些現今功能無法使用的功能,例如:

  • 檢查按鈕是否夠大。
  • 在速度較慢的手機上測試網站效能。
  • 針對特定裝置的隨機情況和限制進行偵錯。

如要充分測試這些情境,您必須使用實際實體裝置進行測試、工作及偵錯。

「Inspect Devices」對話方塊。

目前您可以瀏覽 chrome://inspect、透過 USB 連結裝置,並透過開發人員工具開啟遠端偵錯工作階段。但我們現在更進一步 重構遠端偵錯功能的外觀和行為 並嵌入開發人員工具的核心您現在可以直接在新的主選單中,使用「Inspect Devices」對話方塊存取,不必前往另一個頁面。這樣就能更輕鬆地在工作流程中加入實體偵錯功能,只要接上手機,無需退出開發人員工具!

其他舊模擬控制項的新家

由於目前行動裝置是開發人員工具的預設行動裝置,因此網路節流等功能已移至適當的位置,在本例中為「網路面板」。

更多工具

部分功能 (例如感應器模擬或模擬列印媒體等轉譯設定) 已移至導覽匣中的一致位置。你可以在新版主選單的「更多工具」中找到所有額外功能。

我們知道這項異動非常重大,請務必熟悉新版介面。 如需其中內容的完整涵蓋範圍,請參閱剛更新的裝置模式說明文件。我們很樂意透過 Twitter 分享您的意見,或者如果您需要 140 多個字元,請使用我們的錯誤追蹤程式 (可以,即使提出功能要求也是如此)。