手机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元素和控制台等。
Charles与weinre结合的移动端调试
相当长一段时间内我都是用Charles+Chrome来调试Web页面的,用到Charles是因为它有比较特别的映射功能:Map Remote和Map Local,有了映射功能,我就可以在不影响线上代码的情况下进行修改调试。
如果在Charles中勾选了Map Local并设定规则,Charles就可以按照规则,把请求的对应目录(或文件)映射成本地的目录(或文件)。类似地,如果勾选了Map Remote并设定规则,就会映射成远程的目录或者文件。如果你还没用过这神奇的功能,可以去看看这里:Charles Map Local功能实现接口本地调试,它详细介绍了实现Map Local的操作步骤,类似的Map Remote也大同小异。
转移到移动端后,电脑上的Chrome就不能好好利用了,好在有weinre这个工具,可以实现远程调试。这里我是以微信web开发者工具为例,毕竟它也是基于weinre修改的。
看一下微信web开发者工具的移动调试步骤,就可以知道weinre是基于网络代理的。
现在问题就来了,weinre是基于代理的,Charles也是基于代理的,如果我既想要weinre的远程调试功能,又想要Charles的映射功能,这两个代理搅和在一起,该怎么办才好?
显然,如果这两个代理如果能嵌套就好办了,即手机Web先走Charles代理,然后Charles再走weinre的代理,鱼和熊掌不就兼得了?
很幸运的是,Charles提供了嵌套代理的功能,在Charles里面它被称为外部代理(External Proxy)。设置入口是在菜单上的Proxy——External Proxy Settings。勾选下图中的Web Proxy,设置Web Proxy Server为127.0.0.1,端口设置为weinre的代理端口,如此操作之后,weinre代理就成了Charles的外部代理,weinre远程调试与Charles映射兼得,经测试,非常成功!
最强方式:
Genymotion
破解版下载、安装、配置:https://blog.csdn.net/Scythe666/article/details/70216144
这是一款安卓模拟器,有了它我们可以在电脑上开启一个安卓机。具体使用我就不细说了,很简单请自行搜索。
这是我在模拟器上安装的手机助手:
而且使用 Chrome inspect
是直接可以调试模拟器中的webview的:
这样,我们就可以不用手忙脚乱地写代码、看手机了,一切都在PC上调试。但是我们在模拟器上看到的是线上代码,我们加一个新功能还要发布代码才能看到效果?
Charles-window
下载、安装、破解:https://blog.csdn.net/qq_28831197/article/details/81196571
Charles
会在本地开启一个代理服务,默认接口8888
。通过这个代理,模拟器上的请求会被转移到电脑上,我们可以任意地去替换请求文件让我们更加方便地调试页面。
设置监听端口
Proxy Settings
- HTTP Proxy
- Proxies
- HTTP Proxy
中设置
监听Chrome
因为 Charles
只会监听全局和Firefox,为了能监听Chrome,使用 switchy sharp,在chrome应用商店安装即可。
配置教程:https://jingyan.baidu.com/article/1709ad805d6a4a4634c4f0b4.html
Charles配置教程:https://www.jianshu.com/p/6777a24c5ec2
监听Genymotion
别忘了,使用Charles的初衷是让我们可以用本地的文件替换线上文件,不用每次修改都要发布。
-
在Genymotion中,
Settins
-Network
(port选9999
是因为我之前在Charles中设置的是9999) : -
在开启的模拟器中,
设置
-WLAN
-长按2秒
-修改网络
,代理设置
改为手动
,主机名为10.0.3.2
,端口为9999
,和上面一致。 -
然后在模拟器中打开webview页面就可以看到所有请求了
-
右键保存源文件到本地,然后添加一行alert代码
-
在请求上右键,选择
Map Local
-
选择刚才修改过的文件
-
重新载入页面 :
这样,我们利用模拟器+Chrome+Charles
就可以完美开始、调试webview页面了,模拟器当做手机,Chrome insepct
调样式、接口、查看数据,利用Charles
映射本地文件直接查看效果。