[分享] 透過 WebIDE 在 Android Firefox 除錯

最近寫了個簡單的網頁，在桌機上可以正常運作，但在手機上的瀏覽器卻不能正常執行某些 JavaScript，所以試了一下如何在手機上找問題。

找了以下幾種方式，都可以連上手機瀏覽器 debug 除錯：

• 透過 WebIDE 在 Android Firefox 除錯（本篇）
• 透過 DevTools 在 Android Chrome 除錯
• 透過 Web Inspector 在 iOS 上的 Safari 除錯

本篇先介紹以 WebIDE 連上 Android Firefox 瀏覽器除錯，另外兩種方式再另行撰文。

首先，要確定電腦的 Firefox 版本是 36 版之後，Android 上的 Firefox 也要比 35 版新。

在電腦開啟 Firefox，打開『關於 Firefox』就可以看到版號。
Android 上，則在開啟 Firefox 後打開『設定 > Mozilla Firefox > 關於 Firefox』檢查版號。

接著我們需要打開 WebIDE，可以從『工具 > 網頁開發者 > WebIDE』打開。

開啟 WebIDE 之後，打開『專案 > 管理其他元件』，確認是否有安裝『ADB Helper 附加元件』，沒有的話請安裝。

電腦上已經準備完畢了。
現在，你可以拿起 Android 手機，開始替除錯做設定。
首先開啟『設定 > 開發人員選項 > USB 偵錯』。

在上一步，如果沒看到開發人員選項，那你必須先開啟它，才能去開啟 USB 偵錯。
如果上一步已經成功開啟就跳過這步。
進入『設定 > 關於手機』，點選『版本號碼』七次，就可以開啟開發人員選單。

接著，打開手機上的 Firefox 瀏覽器，開啟『設定 > 進階 > 透過 USB 進行遠端除錯』。

兩邊都設定好之後，把手機接上電腦，電腦上 WebIDE 的『USB 裝置』中應該就會出現你的 Android 手機了，同時手機上也會跳出是否允許除錯連線的視窗，請按下『允許』。

在手機上允許除錯之後，WebIDE 的左邊『分頁』就會出現手機上正在瀏覽的網頁分頁。
點選要除錯的分頁，就會看到開發者工具，你就可以開始從電腦連到手機上的 Firefox 瀏覽器 Debug 了！

參考資料：

• Debugging Firefox for Android over USB
• Setting up a Device for Development