Remote Debug for Chrome

需求為希望可以在手機上進行類似 FireFox Plugin HttpFox 的功能，求神問卜(Google大神)後找到Chrome有這部份的功能，接下來針對 Remote Debug for Chrome 進行說明。

準備執行環境

二種裝置的環境分別如下：

PC

• JDK (Java Development Kit) version 1.6+
• Android SDK r16+
• Google Chrome 22+

Mobile

• Android 4.0+
• Chrome for Android M18.1+

1. 安裝 JDK ，設定系統變數 %JAVA_HOME% 及Path：%JAVA_HOME%\bin。


2. 下載 Android SDK，取得的檔案如android-sdk_rxx.x.x-windows.zip，將zip file解壓縮。


3. 安裝 Google Chrome建議安裝最新版。


4. 手機 OS 需為 Android 4.0 以上這裡不做說明，用手機的 Google Play 搜尋 Chrome for Android 並直接安裝。

Remote Debug for Chrome Step by Step

1. Mobile → 設定 → 開發人員選項，勾選 USB 偵錯。





2. Mobile → Chrome → 設定 → 開發人員工具，勾選 啟用USB 網頁偵錯功能。





3. 以 USB 線連接 PC 跟 Mobile，連接前先確認 PC 是否安裝 Mobile USB Driver，以 HTC 為例需安裝「HTC Driver」，目前 Driver 已包在「HTC Sync」，如沒有安裝 Driver 下一個項目無法執行成功。


4. 檢查 PC 跟 Mobile 連線是否正常，可以透過 ADB (Android Debug Bridge) 工具來確認，而 ADB 就在剛剛下載的 Android SDK；執行「命令提示字元」(cmd.exe)，切換路徑至%Android_SDK_HOME%\platform-tools(%Android_SDK_HOME% 為 Android SDK 解壓縮路徑)，接著執行adb devices，如有顯示裝置的序號(如下圖紅框所示)則為連線正常。





5. 接著執行 adb forward tcp:9222 localabstract:chrome_devtools_remote (如上圖) ，啟動二個裝置 Socket 的轉發。


6. 開啟 Mobile 的 Chrome browser，輸入要測試的網址，如 http://www.google.com。


7. 開啟 PC 的 Chrome browser，網址輸入 http://localhost:9222，如下圖顯示 Inspectable pages 則 Remote Debug 連線成功，下圖所顯示的表示 Mobile Chrome browser 有開啟二個分頁， Mobile Chrome有開啟的分頁都會在這裡顯示，只是圖示的內容不一定準確，Yahoo這頁無法顯示，Google Search這頁是前一個搜尋結果不是目前 Mobile Chrome的顯示，但這不影响接下來的工作只是附帶一提。





8. 點選上一點 Inspectable pages 的 Google 分頁，則會在 PC 上開啟 Chrome Developer Tools - Network Panel，此時顯示的是  Mobile Chrome 頁面上的元件，FireFox Plugin HttpFox 也有同樣的功能，如 Chrome Developer Tools 無法顯示 Mobile Chrome 頁面上的元件，會有需要 Reload 的提示這時請將  Mobile Chrome  頁面重新Reload。





9. 點選 Chrome Developer Tools - Elements Panel，點選某些元素時 Mobile Chrome 頁面上的元件也會相對應反白，如下面二張圖的對照，於 Chrome Developer Tools 點選搜尋文字框時， Mobile Chrome  頁面上的文字框也會反白。








10. 點選 Chrome Developer Tools - Console Panel，輸入alert("Hello World!!") -> Enter，則 Mobile Chrome  頁面上會顯示 alert 訊息，其他詳情可參考 Chrome Developer Tools: Overview 的說明。








11. 補充測試期間遇到的問題，如第7點的 Inspectable pages 無法成功顯示，則建議將 PC 及 Mobile 的 Chrome 關閉後重新執行第3~7點。如第6跟第7點執行順序相反，PC 的 Chrome browser 會【無法顯示網頁】，只要Mobile Chrome重新開啟再將 PC Chrome Reload 則可以正常顯示 Inspectable pages。

相關設定可參考：
Remote Debugging - Google Chrome Mobile
[Android] 好用的 Chrome 瀏覽器之開發人員工具 – USB 網頁偵錯功能
[Android] debug不用線，用adb連接3g-wifi手機
Chrome Developer Tools: Overview
HTC Magic 與電腦正確連線