手機H5 web調試利器——WEINRE (WEb INspector REmote)
調試移動端頁面,優先選擇使用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:172.19.17.62
$ ipconfig getifaddr en0
開啟本地監聽服務器:
weinre --boundHost 172.19.17.62
打開http://172.19.17.62:8080
,
將這段腳本放在需要調試的手機頁面中就可以遠程調試了,
加載好之后就可以在remote tab下找到需要調試的頁面了, 和chrome devTools類似, 也可以查看DOM元素和控制台等。