透過 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 裝置的 USB 驅動程式。請參閱「安裝原始設備製造商 (OEM) USB 驅動程式」。
- 某些 Windows 和 Android 裝置組合 (尤其是 Samsung) 需要額外設定。請參閱「Chrome 開發人員工具裝置在插入電源時不會偵測裝置」。
如果 Android 裝置上未顯示「允許 USB 偵錯」提示,請嘗試以下做法:
- 如果 DevTools 是著重於開發機器,且顯示 Android 主畫面,請拔除 USB 傳輸線再重新連接。換句話說,有時 Android 或開發機器的螢幕處於鎖定狀態時,就不會顯示提示。
- 更新 Android 裝置和開發機器的顯示設定,讓裝置不會進入休眠狀態。
- 正在將 Android 的 USB 模式設為 PTP。請參閱「Galaxy S4 is not display「Authorize USB debugging」(授權 USB 偵錯)」對話方塊。
- 在 Android 裝置的「Developer Options」畫面中選取「Revoke USB Debugging Authorizations」,以將裝置重設為最新狀態。
如果您發現本節中沒有提及的解決方案,或是「Chrome 開發人員工具裝置在插入電源時不會偵測裝置」,請回答該 Stack Overflow 問題,或在 developer.chrome.com 存放區開啟問題!
步驟 2:使用開發機器在 Android 裝置上對內容進行偵錯
- 在 Android 裝置上開啟 Chrome。
在開發機器的
chrome://inspect/#devices
中,您會看到 Android 裝置的型號名稱,後面加上序號。下方會顯示裝置上執行的 Chrome 版本,版本號碼會以括號括住。在「開啟內含網址的分頁」文字方塊中輸入網址,然後按一下「開啟」。頁面會在 Android 裝置的新分頁中開啟。
chrome://inspect/#devices
中每個遠端 Chrome 分頁都有專屬的專區。你可以在這個部分與該分頁互動。如果有任何應用程式使用 WebView,也會看到這些應用程式的個別區。在這個範例中,只有一個分頁會開啟。在剛開啟的網址旁按一下「檢查」。新的開發人員工具執行個體會隨即開啟。
在 Android 裝置上執行的 Chrome 版本會決定開發機器上的開發人員工具版本。因此,如果 Android 裝置執行的是舊版 Chrome,開發人員工具執行個體看起來可能會與以往有所不同。
更多動作:暫停、聚焦、重新載入或關閉分頁
網址下方會顯示選單,可用來暫停、聚焦、重新載入或關閉分頁。
檢查元素
前往開發人員工具執行個體的「Elements」面板,將遊標懸停在某個元素上,即可在 Android 裝置可視區域中醒目顯示該元素。
您也可以在 Android 裝置螢幕上輕觸元素,在「Elements」面板中選取該元素。在開發人員工具執行個體上,按一下「選取元素」圖示 ,然後輕觸 Android 裝置畫面上的元素。請注意,「選取元素」會在首次輕觸後停用,因此每次使用這項功能時,都必須重新啟用。
在開發機器上螢幕投放 Android 螢幕
按一下「Toggle Screencast」,在開發人員工具執行個體中查看 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
。如要產生 SSH 設定檔,請執行以下指令: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
說明文件您也可以視需要閱讀舊版指南: