透過 Windows、Mac 或 Linux 電腦,對 Android 裝置上的即時內容進行偵錯。這個 教學課程會說明如何:
- 設定用於遠端偵錯的 Android 裝置,然後透過開發機器找出該裝置。
- 使用開發機器檢查 Android 裝置上的線上內容並進行偵錯。
- 將 Android 裝置的螢幕側錄內容投放到開發機器上的開發人員工具執行個體。
步驟 1:探索 Android 裝置
以下工作流程適用於大多數使用者。請參閱「疑難排解:開發人員工具無法偵測 Android 裝置。
- 在 Android 裝置上開啟「開發人員選項」畫面。請參閱「設定裝置端開發人員」 選項。
- 選取「啟用 USB 偵錯」。
- 在開發機器中開啟 Chrome。
- 前往
chrome://inspect#devices
。 確認
「尋找 USB 裝置」已啟用。
使用 USB 傳輸線將 Android 裝置直接連接至開發機器。
如果是首次連結裝置,裝置會顯示為「離線」並尚待驗證
在這種情況下,請接受裝置螢幕上的偵錯工作階段提示。
如果看到 Android 裝置的型號名稱,表示開發人員工具已成功連線至裝置。
接著繼續執行步驟 2。
疑難排解:開發人員工具無法偵測 Android 裝置
確認硬體設定正確無誤:
- 如果您使用的是 USB 集線器,請嘗試將 Android 裝置直接連接至開發機器 。
- 試著在 Android 裝置和開發機器之間拔除 USB 傳輸線, 再插回。在 Android 和開發機器的螢幕處於解鎖狀態時執行此操作。
- 確認 USB 傳輸線可正常使用。您應可檢查 Android 裝置上的檔案 開發機器
請確認您的軟體設定正確無誤:
- 如果您的開發機器執行 Windows,請嘗試手動安裝 Android 裝置。請參閱「安裝原始設備製造商 (OEM) USB 驅動程式」。
- 使用某些 Windows 和 Android 裝置組合 (尤其是 Samsung) 時,需要進行額外的設定。詳情請見 Chrome 開發人員工具裝置在接上電源時不會偵測裝置。
如果 Android 裝置未顯示「允許 USB 偵錯」提示,請嘗試:
- 中斷 USB 傳輸線再重新連接,開發人員工具則著重於開發 以及您的 Android 主畫面。也就是說,有時 會在 Android 或開發機器的螢幕鎖定時啟用。
- 更新 Android 裝置和開發機器的顯示設定,一律不採用 去睡覺。
- 正在將 Android 的 USB 模式設為 PTP。請參閱 Galaxy S4 未顯示「授權 USB 偵錯」對話方塊 方塊。
- 在「開發人員選項」畫面中,選取「撤銷 USB 偵錯授權」 ,讓 Android 裝置重設為全新狀態。
如果本節或 Chrome 開發人員工具裝置 插上電源時偵測裝置,請在 Stack Overflow 問題中新增解答,或開啟 造訪 developer.chrome.com 存放區!
步驟 2:使用開發機器對 Android 裝置中的內容進行偵錯
- 在 Android 裝置上開啟 Chrome。
開發機器上的
chrome://inspect/#devices
會顯示 Android 裝置的型號名稱,後面接著 序號。下方是裝置上執行的 Chrome 版本 版本編號在「開啟含有網址的分頁」文字方塊中輸入網址,然後按一下「開啟」。頁面會在 開啟新分頁。
每個遠端 Chrome 分頁都有專屬的
chrome://inspect/#devices
區塊。您可以在這個部分與該分頁互動。如果有使用 WebView 的應用程式,您也會看到個別的應用程式專區。這個範例中只有一個分頁。找到剛開啟的網址,按一下旁邊的「檢查」。新的開發人員工具執行個體會隨即開啟。
在 Android 裝置上執行的 Chrome 版本,會決定在開發機器上開啟的開發人員工具版本。因此,如果您的 Android 裝置執行的是版本非常舊的 Chrome,開發人員工具執行個體可能會與您原先的介面大不相同。
更多操作:暫停、聚焦、重新載入或關閉分頁
網址下方會顯示暫停、聚焦、重新載入或關閉分頁的選單。
檢查元素
前往開發人員工具例項的「Elements」Elements面板,然後將滑鼠遊標懸停在所需元素上,即可醒目顯示該元素 Android 裝置的可視區域
你也可以輕觸 Android 裝置畫面上的元素,在「元素」Elements面板中選取該元素。
在開發人員工具例項中,按一下「選取元素」圖示 ,然後在 Android 裝置畫面上輕觸該元素。請注意,第一次輕觸後會停用「選取元素」,因此每次使用這項功能時都必須重新啟用。
將 Android 螢幕側錄到開發機器上
點選「切換螢幕側錄」
按 次瀏覽
開發人員工具執行個體中 Android 裝置的內容
你可以透過多種方式與螢幕側錄互動:
- 系統會將點擊轉譯為輕觸次數,以便在裝置上觸發適當的觸控事件。
- 電腦上的按鍵動作會傳送至裝置。
- 如要模擬雙指撥動的手勢,請在拖曳時按住 Shift 鍵。
- 如要捲動畫面,請使用觸控板或滑鼠滾輪,或是以滑鼠指標快速滑動。
螢幕側錄的注意事項:
- 螢幕側錄只會顯示網頁內容。螢幕側錄的透明部分代表裝置 介面,例如 Chrome 網址列、Android 狀態列或 Android 鍵盤。
- 螢幕側錄功能會對畫面更新率造成負面影響。測量捲動次數時停用螢幕側錄功能,或是 動畫,更準確地掌握網頁成效。
- 如果 Android 裝置的螢幕鎖定,螢幕側錄內容就會消失。解鎖 自動繼續螢幕側錄的 Android 裝置螢幕。
透過 Android Debug Bridge (ADB) 手動偵錯
在極少數情況下,可以採用替代的遠端偵錯方法。舉例來說,建議您在 Android 裝置上直接將 Chrome 的 Chrome 開發人員工具通訊協定 (CDP) 進行連線。
為此,您可以使用 Android Debug Bridge (ADB):
- 請務必在 Android 裝置上啟用開發人員選項和 USB 偵錯功能。
- 在 Android 裝置上開啟 Chrome。
透過以下方式將 Android 裝置連線至開發機器:
- USB 傳輸線 (正向)。
- 或者,adb Wi-Fi 連線。
在開發機器的指令列中執行
adb devices -l
,檢查裝置是否出現在清單中。將裝置上的 CDP 通訊端轉送至機器的本機通訊埠,例如
9222
。若要如此,請執行:adb forward tcp:9222 localabstract:chrome_devtools_remote
成功連線後,您會看到:
http://localhost:9222/json
會列出您的page
目標。http://localhost:9222/json/version
會公開browser
目標端點,如 CDP 說明文件所示。- 即使未勾選「探索 USB 裝置」設定,
chrome://inspect/#devices
仍會填入。
如需疑難排解,請參閱:
adb
說明文件您也可以選擇閱讀舊版指南: