2017年10月25日 星期三

Debug Android中的網頁

Debug Android中的網頁

在桌機上開發網頁時透過Chrome的開發人員工具可以很方便的進行除錯
當該網頁在特定手持裝置上跑時又該怎麼在該裝置下除錯呢?
我們可以使用 Chrome 的 inspect工具來達到這個需求。
該工具也可用在 Cordova 所開發的app中對 webview 進行Debug
前置條件:
  • Android 4.4 以上
  • Chrome 30 以上
1) 手機開啟 USB Debug功能:
    a) 啟用開發人員模式
        設定 --> 關於 --> 版本號碼  連點 7 次 該選項




        完成後在設定中會開發人員選項



    b) 啟用 USB 偵錯

2) 將手機接上USB後開啟桌機上的Chrome瀏灠器,
   在網址列上輸入: chrome://inspect
   可以在 Remote Target 上看到目前有連上的裝置


3) 開啟手機中的 Chrome 瀏灠器,開啟任網頁來測試
   ( 這邊以 www.pchome.com.tw 為例 )
    可以看到在桌機上的 chrome inspect 工具上出現我們在手機檢視的網頁項目


4) 點選 inspect 會開啟開發者工具來進行Debug
值得注意的是,左邊的畫面會和手機上的網頁同步,我們也可以直接在上面進行操作


如果使用Cordova開發App的話,也可以用相同方式來進行Debug