行動版 Chrome 開發人員工具

Paul Irish

開發行動裝置適用的應用程式應該和電腦版網站一樣簡單。我們不斷努力提升 Chrome 開發人員工具的品質,希望有更簡便的使用體驗,現在正是推出幾項可大幅提升您行動網站開發的新功能。首先,遠端偵錯,接著我們會揭露適當的行動裝置模擬結果

將裝置畫面投放到電腦上

目前,使用遠端偵錯功能,您必須自行切換裝置與開發人員工具。現在,螢幕側錄會和開發人員工具一起顯示裝置的畫面。看到這部影片固然很好,但與它互動還是更勝一籌:

  • 螢幕側錄上的點擊會轉譯為輕觸,並在裝置上觸發適當的觸控事件。
  • 使用桌面指標檢查裝置上的元素
  • 在桌上型電腦鍵盤上輸入內容,所有按鍵行為都會傳送到裝置。用拇指打字,體驗大幅縮短輸入時間。
  • 透過遊標快速翻閱頁面,或直接在筆電觸控板上滑動來捲動頁面。

完整有關螢幕側錄功能的完整說明文件可擷取上述內容及其他內容,例如傳送雙指撥動縮放手勢。必須使用 Chrome Android 版 Chrome Beta 版 (m32)。

簡單的遠端偵錯功能

18 個月前,Chrome 針對 WebKit 瀏覽器推出了適當的遠端偵錯功能,但如果您曾經試用過,就必須處理 400MB 的 Android SDK 下載作業,並將 adb 二進位檔新增至您的 $PATH 和一些神奇的指令列指令中。

很高興在此宣布,別忘了你不用再猶豫了!Chrome 現在可自行探索及與 USB 連接的裝置交談。我們直接在 Chrome 中透過 USB 實作 adb 通訊協定,因此您可以輕鬆前往 Menu > Tools > Inspect Devices,並立即啟動遠端偵錯工作階段。

尋找已連接 USB 的裝置。

這項機制在 Chrome 作業系統等所有平台中皆可正常運作,但請注意,在 Windows 電腦上,您必須先安裝適當的 USB 驅動程式,才能與裝置通訊。如果你未曾用過,則必須在裝置上啟用 USB 偵錯功能,並確認您使用的是 Chrome for Android 測試版。閱讀完整文件。

適用於本機專案的通訊埠轉送

您正在 localhost:8000 進行開發,但手機無法連線。因此,我們直接在遠端偵錯工作流程中新增通訊埠轉送。您可以輕鬆處理所有專案,不必發生各種隧道攻擊。在 about:inspect 上按一下 [通訊埠轉送],設定您要使用的通訊埠;如果通訊埠正確,這些通訊埠就會以綠色燈號亮起。

通訊埠轉送

行動裝置模擬

你不是每次都要測試相容性的裝置,你知道嗎?雖然使用遠端偵錯功能,您可以

透過全觸控事件模擬模擬螢幕大小、devicePixelRatio 和 <meta viewport>

如果您介紹過先前的「裝置指標」功能,目前提供的功能已大幅升級。該團隊致力打造全新行動模擬功能,以近乎真實的方式呈現實際裝置上的顯示內容。舉例來說,WebKit 瀏覽器會維護複雜的文字自動調整演算法,事實上,每部裝置都有特定的「自動調整因素」,讓文字自動調整大小,讓文字清晰易讀。在模擬模式中,您可以確認系統已套用這個行為,並查看結果。

裝置像素比率

在目前,這種低 DPI 裝置上幾乎無法看出高 DPI 裝置顯示的畫面。現在,開發人員工具中的 dPR 模擬功能會自動調整您的檢視畫面,讓您深入探究 DPI 情境。此外,您可以預期 window.devicePixelRatio@media (-webkit-min-device-pixel-ratio: 2)image-set( url(pic2x.jpg) 2x, …) 等設定反映您的設定,以便您檢視應用程式進行調整,包括載入不同的 dpi 專屬素材資源。

裝置像素比例偏低。

裝置模擬功能無法擴充瀏覽器功能或錯誤。因此,在模擬 iOS 時,WebGL 仍可正常運作,因此您不會遇到 iOS 5 方向縮放錯誤。如要體驗這種變化,請打開裝置。

正確模擬「<meta viewport>」(和「@viewport」)

測試 width=device-widthminimum-scale:1.0 的行為,這是過去一種純裝置遊戲。你現在可以快速試用不同的可視區域,並觀察這些檢視點的顯示方式。

觸控事件模擬

「模擬觸控螢幕」設定可確保點擊次數會解讀為 touchstart,以此類推。此外,縮放、捲動和平移等合成事件也能使用。如要雙指撥動縮放,只要 shift + 拖曳或 shift + 捲動即可放大內容。即可完全掌握檢視點之外的內容縮放情形。

捲動模擬。

最後,將使用者代理程式假冒行為 (無論是要求標頭和 window.navigator 層級)、地理位置模擬和方向模擬都有助於您探索裝置的完整功能。

裝置預設選項

模擬預設選項可讓您選取手機或平板電腦,並取得正確的螢幕大小 (dPR)、要套用至該裝置的通用 Analytics (分析) 4、完整觸控事件和可視區域模擬。你可以試用特定的預設設定,或是輕鬆逐一調整這些特徵。

裝置預設設定

前往 devtools.chrome.com,取得利用開發人員工具進行行動模擬器的完整文件

操作示範

如需所有這些功能的實際運作情況完整示範,歡迎透過行動裝置專用的開發人員工具,觀看 Chrome 開發人員高峰會的 23 分鐘講座影片: