遠端偵錯 Android 裝置

Sofia Emelianova
Sofia Emelianova

透過 Windows、Mac 或 Linux 電腦,對 Android 裝置上的即時內容進行偵錯。這個 教學課程會說明如何:

  • 設定用於遠端偵錯的 Android 裝置,然後透過開發機器找出該裝置。
  • 使用開發機器檢查 Android 裝置上的線上內容並進行偵錯。
  • 將 Android 裝置的螢幕側錄內容投放到開發機器上的開發人員工具執行個體。

遠端偵錯圖表

步驟 1:探索 Android 裝置

以下工作流程適用於大多數使用者。請參閱「疑難排解:開發人員工具無法偵測 Android 裝置

  1. 在 Android 裝置上開啟「開發人員選項」畫面。請參閱「設定裝置端開發人員」 選項
  2. 選取「啟用 USB 偵錯」
  3. 在開發機器中開啟 Chrome。
  4. 前往chrome://inspect#devices
  5. 確認 核取方塊。「尋找 USB 裝置」已啟用。

    「探索 USB 裝置」核取方塊已啟用。

  6. 使用 USB 傳輸線將 Android 裝置直接連接至開發機器。

  7. 如果是首次連結裝置,裝置會顯示為「離線」並尚待驗證

    離線裝置待驗證。

    在這種情況下,請接受裝置螢幕上的偵錯工作階段提示。

  8. 如果看到 Android 裝置的型號名稱,表示開發人員工具已成功連線至裝置。

    成功連結的裝置,並指定型號名稱。

  9. 接著繼續執行步驟 2

疑難排解:開發人員工具無法偵測 Android 裝置

確認硬體設定正確無誤:

  • 如果您使用的是 USB 集線器,請嘗試將 Android 裝置直接連接至開發機器 。
  • 試著在 Android 裝置和開發機器之間拔除 USB 傳輸線, 再插回。在 Android 和開發機器的螢幕處於解鎖狀態時執行此操作。
  • 確認 USB 傳輸線可正常使用。您應可檢查 Android 裝置上的檔案 開發機器

請確認您的軟體設定正確無誤:

如果 Android 裝置未顯示「允許 USB 偵錯」提示,請嘗試:

  • 中斷 USB 傳輸線再重新連接,開發人員工具則著重於開發 以及您的 Android 主畫面。也就是說,有時 會在 Android 或開發機器的螢幕鎖定時啟用。
  • 更新 Android 裝置和開發機器的顯示設定,一律不採用 去睡覺。
  • 正在將 Android 的 USB 模式設為 PTP。請參閱 Galaxy S4 未顯示「授權 USB 偵錯」對話方塊 方塊
  • 在「開發人員選項」畫面中,選取「撤銷 USB 偵錯授權」 ,讓 Android 裝置重設為全新狀態。

如果本節或 Chrome 開發人員工具裝置 插上電源時偵測裝置,請在 Stack Overflow 問題中新增解答,或開啟 造訪 developer.chrome.com 存放區

步驟 2:使用開發機器對 Android 裝置中的內容進行偵錯

  1. 在 Android 裝置上開啟 Chrome。
  2. 開發機器上的 chrome://inspect/#devices 會顯示 Android 裝置的型號名稱,後面接著 序號。下方是裝置上執行的 Chrome 版本 版本編號

    裝置上執行的 Chrome 版本。

  3. 在「開啟含有網址的分頁」文字方塊中輸入網址,然後按一下「開啟」。頁面會在 開啟新分頁。

    區段中列出的遠端分頁。

    每個遠端 Chrome 分頁都有專屬的 chrome://inspect/#devices 區塊。您可以在這個部分與該分頁互動。如果有使用 WebView 的應用程式,您也會看到個別的應用程式專區。這個範例中只有一個分頁。

  4. 找到剛開啟的網址,按一下旁邊的「檢查」。新的開發人員工具執行個體會隨即開啟。

遠端分頁的新開發人員工具執行個體。

在 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)

  1. 請務必在 Android 裝置上啟用開發人員選項USB 偵錯功能。
  2. 在 Android 裝置上開啟 Chrome。
  3. 透過以下方式將 Android 裝置連線至開發機器:

  4. 在開發機器的指令列中執行 adb devices -l,檢查裝置是否出現在清單中。

  5. 將裝置上的 CDP 通訊端轉送至機器的本機通訊埠,例如 9222。若要如此,請執行:

    adb forward tcp:9222 localabstract:chrome_devtools_remote
    
  6. 成功連線後,您會看到:

    • http://localhost:9222/json 會列出您的page目標。
    • http://localhost:9222/json/version 會公開 browser 目標端點,如 CDP 說明文件所示。
    • 即使未勾選「探索 USB 裝置」設定,chrome://inspect/#devices 仍會填入。

如需疑難排解,請參閱: