遠端偵錯 Android 裝置

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

在 Windows、Mac 或 Linux 電腦上，遠端偵錯 Android 裝置上的即時內容。本教學課程會說明如何：

  • 設定 Android 裝置以進行遠端偵錯，並從開發機器探索裝置。
  • 從開發機器檢查及偵錯 Android 裝置上的即時內容。
  • 將 Android 裝置的螢幕側錄內容投放到開發機器的 DevTools 執行個體。

遠端偵錯圖表

步驟 1：探索 Android 裝置

以下工作流程適用於大多數使用者。如需更多協助，請參閱「疑難排解：開發人員工具未偵測到 Android 裝置」。

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

  5. 確認已啟用「探索 USB 裝置」核取方塊。。

    「Discover USB Devices」核取方塊已啟用。

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

  7. 如果這是你第一次連線裝置，裝置會顯示為「離線」並等待驗證。

    離線裝置待驗證。

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

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

    已成功連線的裝置，並指定型號名稱。

  9. 接著執行步驟 2。

疑難排解：開發人員工具未偵測到 Android 裝置

確認硬體設定正確無誤：

  • 如果使用 USB 集線器，請嘗試直接將 Android 裝置連接至開發機器。
  • 請嘗試拔除 Android 裝置與開發機器之間的 USB 傳輸線，然後再重新插上。請在 Android 裝置和開發電腦螢幕解鎖時執行這項操作。
  • 確認 USB 傳輸線可正常運作。您應該可以從開發電腦檢查 Android 裝置上的檔案。

確認軟體設定正確無誤：

如果 Android 裝置上沒有顯示「允許 USB 偵錯」提示，請嘗試下列做法：

  • 在開發機器上，當開發人員工具在前景運作，且 Android 主畫面正在顯示時，請拔除 USB 傳輸線，然後重新連接。換句話說，有時 Android 或開發機器螢幕鎖定時，系統不會顯示提示。
  • 更新 Android 裝置和開發機的螢幕設定，確保裝置不會進入休眠狀態。
  • 將 Android 的 USB 模式設為 PTP。請參閱「Galaxy S4 不會顯示『允許 USB 偵錯』對話方塊」。
  • 在 Android 裝置的「開發人員選項」畫面上，選取「撤銷 USB 偵錯授權」，將裝置重設為全新狀態。

如果找到本節或「Chrome 開發人員工具無法偵測到已插入的裝置」未提及的解決方案，請在該 Stack Overflow 問題中新增解答，或在 developer.chrome.com 存放區中開啟問題！

步驟 2：從開發電腦在 Android 裝置上偵錯內容

  1. 在 Android 裝置上開啟 Chrome。

  2. 在開發機器的 chrome://inspect/#devices 中，您會看到 Android 裝置的型號名稱，後面接著序號。下方會顯示裝置執行的 Chrome 版本，版本號碼會以半形括號括住。

    裝置執行的 Chrome 版本。

  3. 在「Open tab with url」文字方塊中輸入網址，然後按一下「Open」。Android 裝置會在新分頁中開啟該頁面。

    某個區段列出的遠端分頁。

    每個遠端 Chrome 分頁都會在 chrome://inspect/#devices 中顯示專屬區塊。您可以在這個專區與該分頁互動。如果應用程式使用 WebView，系統也會顯示這些應用程式的專區。在這個範例中，只開啟了一個分頁。

  4. 按一下剛開啟網址旁的「檢查」。系統會開啟新的開發人員工具執行個體。

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

Android 裝置上執行的 Chrome 版本，會決定開發電腦上開啟的開發人員工具版本。因此，如果 Android 裝置執行的 Chrome 版本非常舊，DevTools 執行個體的外觀可能與您習慣的樣子大相逕庭。

其他動作：暫停、聚焦、重新載入或關閉分頁

網址下方會顯示選單，可供你暫停、聚焦、重新載入或關閉分頁。

用於暫停、重新載入、聚焦或關閉分頁的選單。

檢查元素

前往開發人員工具執行個體的「元素」面板，然後將游標懸停在元素上，即可在 Android 裝置的檢視區塊中醒目顯示該元素。

你也可以輕觸 Android 裝置螢幕上的元素，在「元素」面板中選取該元素。 在開發人員工具執行個體中，按一下「選取元素」選取元素，然後輕觸 Android 裝置螢幕上的元素。請注意，「選取元素」會在第一次觸控後停用，因此每次使用這項功能時，都必須重新啟用。

將 Android 螢幕畫面側錄到開發機器

按一下「Toggle Screencast」切換螢幕側錄功能，即可在開發人員工具執行個體中查看 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 Socket 轉送至電腦的本機通訊埠，例如 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也會填入資料。

如要排解問題，請參閱：