PJCHENder 未整理筆記

[Note] Chrome Remote Debug

2017-12-12

[筆記] Chrome Remote Debug with Mobile

@(Google Chrome)[Google Developers, Tools for Web Developers, Chrome Devtools]

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 開發者工具。
  4. 選擇 Main Menu > More tools > Remote Devices
  1. 如果看不到在瀏覽器上看不到裝置,則試著在手機上重新選擇連接選項。
  2. 如果仍無法真測,可在手機「設定」 > 「開發人員選項」 > 「Revoke USB Debugging Authorizations」。

Imgur

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

參考

Get Started with Remote Debugging Android Devices @ Chrome Devtools

掃描二維條碼,分享此文章