2016年4月3日 星期日

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

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

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

本篇先介紹以 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 了!



參考資料:


沒有留言: