行動裝置開發作業應與電腦開發作業一樣簡單。我們一直致力於改善 Chrome 開發人員工具，讓您更輕鬆地使用這項工具。現在，我們要推出一些新功能，大幅改善行動網頁開發作業。首先，我們會介紹遠端偵錯功能，然後再揭曉正確的行動模擬功能。
將裝置畫面投放到電腦
在此之前，進行遠端偵錯時，您必須在裝置和 devtools 之間來回切換視線。Screencast 會在開發人員工具旁邊顯示裝置的畫面。看到內容很棒，但與內容互動更棒：
- 螢幕錄影中的點擊會轉換為輕觸，裝置上會觸發適當的觸控事件。
- 使用電腦滑鼠指標在裝置上檢查元素
- 使用電腦鍵盤輸入內容，所有按鍵都會傳送到裝置。比起用大拇指打字，可以節省許多時間。
- 使用滑鼠游標快速滑動，或在筆記型電腦的觸控板上滑動，即可捲動頁面。
螢幕投放的完整說明文件會記錄所有這些內容，以及其他動作，例如雙指撥動手勢。必須使用 Android 版 Chrome Beta 版 (m32)。
輕鬆進行遠端偵錯
18 個月前，Chrome 為 WebKit 瀏覽器推出了適當的遠端偵錯功能，但如果您當時嘗試過這項功能，就必須下載 400 MB 的 Android SDK，並將 adb 二進位檔新增至 $PATH 和一些神奇的指令列咒語。
我們很高興在此宣布，您可以忘記所有這些事了。Chrome 現在可以原生偵測並與 USB 連線裝置通訊。我們已在 Chrome 中直接透過 USB 實作 adb 通訊協定，因此您可以輕鬆前往 Menu > Tools > Inspect Devices，並立即開始遠端偵錯工作階段。
這項功能適用於所有平台，包括 ChromeOS，但請注意，在 Windows 上，您必須先安裝適當的 USB 驅動程式，才能與裝置通訊。如果您從未嘗試過，還需要在裝置上啟用 USB 偵錯功能，並確認您使用的是 Chrome 適用於 Android 的 Beta 版。閱讀完整說明文件。
本機專案的連接埠轉送
您在 localhost:8000 上進行開發，但手機無法存取該位置。因此，我們直接在遠端偵錯工作流程中新增了通訊埠轉送功能。您現在可以輕鬆處理完整專案，無需任何隧道駭客手法。在 about:inspect 中按一下「Port Forwarding」，即可設定要開放的通訊埠，如果設定正確，這些通訊埠會亮起綠燈。
行動模擬
您不一定隨時都有需要的裝置來測試相容性，對吧？雖然遠端偵錯真實裝置可讓您體驗最佳效能和觸控體驗，但現在您也可以在電腦上模擬許多裝置特徵，節省時間並加快迭代循環。
模擬螢幕尺寸、devicePixelRatio 和 <meta viewport>，並進行完整的觸控事件模擬
如果您曾使用過舊版的「裝置指標」功能，現在的功能將帶來大幅升級。我們的團隊致力於讓新的行動模擬功能能真實呈現您在實際裝置上看到的內容。舉例來說，WebKit 瀏覽器會維持複雜的文字自動調整大小演算法，而且每部裝置都有特定的「調整因子」，可調整文字自動調整大小，以便讓文字保持可讀。在模擬模式中，您可以確認系統是否已套用這項行為，並查看結果。
裝置像素比例
在此之前，我們幾乎無法在低 DPI 裝置上查看高 DPI 裝置的顯示效果。接著，DevTools 中的 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-width 和 minimum-scale:1.0 行為的行為只能在裝置上進行。您現在可以快速試用不同的檢視區，並觀察這些檢視區的算繪方式。
觸控事件模擬
模擬觸控螢幕設定可確保點擊會解讀為 touchstart 等。此外，縮放、捲動和平移等合成事件也能正常運作。如要使用雙指撥動功能，只要按住 shift 並拖曳，或是按住 shift 並捲動畫面，即可放大內容。您將可清楚查看超出可視區域的內容縮放效果。
最後，您可以透過使用者代理程式偽造 (請求標頭和 window.navigator 層級)、地理位置和方向模擬，探索裝置的完整功能。
裝置預設
模擬預設值可讓您選取手機或平板電腦，並取得正確的螢幕大小、dPR、適用於該裝置的 UA，以及模擬的完整觸控事件和檢視區。你可以試用特定預設值，或輕鬆逐一調整這些特性。
請前往 devtools.chrome.com，查看使用開發人員工具進行行動模擬的完整說明
示範
如要查看所有功能的完整示範，請觀看我在 Chrome 開發人員大會上針對行動版開發人員工具發表的 23 分鐘演講：