遠端偵錯 Android 裝置

Kayce Basques

Sofia Emelianova

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

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

步驟 1：探索 Android 裝置

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

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

5. 確認 「尋找 USB 裝置」已啟用。

   

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

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

   

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

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

   

9. 接著繼續執行步驟 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 裝置中的內容進行偵錯

1. 在 Android 裝置上開啟 Chrome。

2. 開發機器上的 chrome://inspect/#devices 會顯示 Android 裝置的型號名稱，後面接著 序號。下方是裝置上執行的 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 裝置連線至開發機器：

   • USB 傳輸線 (正向)。
   • 或者，adb Wi-Fi 連線。

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 仍會填入。

如需疑難排解，請參閱：

• adb 說明文件

• 您也可以選擇閱讀舊版指南：

  • remote-debugging-legacy
  • 遠端偵錯
  • girish.in/…how