Remote Debug for Firefox

測試完 Remote Debug for Chrome 後接下來換成 Firefox，除了 Browser 換成 Firefox 外其餘環境皆與 Chrome 類似，因此重複的步驟將會帶過不再詳細說明，Firefox 測試後跟 Chrome 比較之下，Firefox 的 Remote Debug 功能主要是用設置中斷點的方式來追，沒有類似 Firebug 或 HttpFox 的功能，只能期待下一個版本有相關的功能。

準備執行環境

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

PC

• JDK (Java Development Kit) version 1.6+
• Android SDK r16+
• Mozilla Firefox 15+

Mobile

• Android 4.0+
• Firefox for Android 15+

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


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


3. 安裝 Mozilla Firefox ，version 15即具有 Remote Debug 的功能但這邊的測試都是用 version 16 bate，請自行選擇安裝版本。


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

Remote Debug for Firefox Step by Step

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





2. Mobile → Firefox → 網址輸入：about:config → 搜尋debugger → devtools.debugger.remote-enabled 設為 true，重啟 Firefox。





3. PC → Firefox → 網址輸入：about:config → 搜尋debugger → devtools.debugger.remote-enabled 設為 true，重啟 Firefox。




重啟後可以看到工具 → 網頁開發者 → 遠端除錯器





4. 以 USB 線連接 PC 跟 Mobile。


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





6. 開啟 Mobile 的 Firefox browser，輸入要測試的網址，如 http://twitter.github.com/bootstrap/javascript.html#buttons。


7. 開啟 PC 的 Firefox browser，點選工具 → 網頁開發者 → 遠端除錯器，如下圖顯示【遠端連線】，再點選確定。





8. 於 Mobile Firefox 會顯示 Incoming Connection 的訊問，直接點選OK，此畫面如果停留太久沒有點選OK，第9點會無法正常顯示，此時可重覆執行 7~9 點。





9. 於 PC Firefox Remote Debug console 可看到上一點執行的網頁原始碼，這時可設置中斷點再於 Mobile Firefox reload page 即可查看中斷點相關訊息 。

相關設定可參考：
Android版火狐：遠端除錯功能指南
Remote Debugging in Firefox for Android
Remote Debugging on Firefox for Android