調試移動端頁面,優先選擇使用chrome瀏覽器調試,如果是hybrid形式的頁面,可以使用chrome提供的chrome://inspect/#devices 安卓真機調試,不過這個要求比較高:
首先,你的 Chrome 版本必須高於 32
其次你的測試機 Android 系統高於 4.0,
再其次,測試機安裝 Chrome for Android 纔可以使用 Chrome 遠程調試這項功能,
最後, 手機需要開啓USB調試模式
比如需要調試嵌入在APP中webView中的頁面, 恰好安卓的版本比較低,沒辦法真機調試,
這時候weinre就是最好的選擇。
如何使用 weinre
WEINRE 是 WEb INspector REmote 的縮寫, 可以遠程調試web頁面。
安裝
$ sudo npm install -g weinre
$ weinre -v
配置
獲取本機IP:192.168.0.199
$ ipconfig getifaddr en0
開啓本地監聽服務器:
weinre --boundHost 192.168.0.199
瀏覽器打開 192.168.0.199:8080
效果如下
將這段腳本放在需要調試的手機頁面中就可以遠程調試了,
加載好之後就可以在remote tab下找到需要調試的頁面了, 和chrome devTools類似, 也可以查看DOM元素和控制檯等。
點擊elements 查看相應的元素,並修改,即時生效