跳至主要内容

[Chrome] Chrome Remote Debug with Mobile

keywords: remote, chrome, devtool, debug, mobile device

Get Started with Remote Debugging Android Devices @ Chrome Devtools

Step 1: Discover your Android device​

  1. 在安卓裝置上進入「設定」 > 「開發人員選項」> 「啟動 USB 偵錯」。
  2. 開啟電腦的 chrome 瀏覽器且必須要登入 chrome （remote debugging）無法在無痕式或未登入的情況下使用。
  3. 在網址列輸入 chrome://inspect#devices
  • 如果看不到在瀏覽器上看不到裝置，則試著在手機上重新選擇連接選項。
  • 如果仍無法偵測，可在手機「設定」 > 「開發人員選項」 > 「Revoke USB Debugging Authorizations」。

Step 2: Debug content on your Android device from your development machine​

  1. 開啟安卓裝置上的 Chrome 。
  2. 回到電腦上的 Chrome 開發者工具，點選你的裝置。
  3. 在 「New tab」旁邊，輸入有效的 URL 後點選「Open」，如此將會在安卓裝置上開啟新的頁籤。
  4. 點選 URL 右邊的 「Inspect」，一個新的開發者工具的實例會產生。

使用 LocalHost​

在特定的情況下，許多手機的 API 都要求要安全來源（例如，https 或 localhost），這時候可以額外設定 Port forwarding，就可以直接在手機上使用 localhost 的網址：

Imgur

參考​