安卓微信页面的调试

在开发移动端页面时,一般都得保证在微信页面中能够正常访问,虽说微信内置浏览器统一了各个不同安卓机的WebView,但在不同的机子上,还是会出现不一样的兼容问题。

调试页面,有几个维度要考虑:能够访问页面、审查元素查看页面输出、抓包查看请求模拟登陆、断点调试、性能测试、在模拟器上调试、在真机上调试

本文仅涉及基础页面的调试,不涉及Hybrid app、公众号JDK 、小程序的相关调试

一、能够访问页面

在开发安卓微信页面时,刚开始一般是会在PC上进行,等到开发后期的自测阶段再转到安卓模拟器上、转到各种真机上自测,上线了如果出问题还需要在真机上调试测试。

能够访问页面,当然简单,但难在能够访问页面,并能为接下去的调试页面打好基础。

很多公司会有内外网之分,开发环境是在内网,外网访问不到,就需要使用代理工具作一个中转。

某个活动页的开发环境地址是, local.abc.com/wx/page-spring  ,测试机上估计也会有对应的一个地址  test.abc.com/wx/page-spring

为了访问这个页面,在PC的开发机上会设置HOST: 127.0.0.1  local.abc.com     12.70.0.1  test.abc.com

同样的移动端手机为了能够访问,也需要设置HOST,但大部分机型都需要进行ROOT,不可取

使用Fiddler工具,手机设置代理

1. 首先,使手机和PC处在同一个局域网中,查看PC的IP(目前为 11.22.33.44)

2. 开启Fiddler,在 options 中设置 Allow remote computers to connect , 如果是HTTPS的页面,还需要设置允许HTTPS的解析

安卓微信页面的调试

 

安卓微信页面的调试

3. 如果是HTTPS,就先在手机上安装Fiddler的证书,在手机浏览器中访问IP:port 然后按照提示进行安装

安卓微信页面的调试

4. 在手机的Wi-Fi连接上设置代理,设置成 IP:port

不同手机修改方式不一样,但也类似,一般在更多或者高级修改网络里头

安卓微信页面的调试

这样一来,就可以在手机上直接用域名进行访问页面了。

但在手机上设置代理还是稍微麻烦了一点,还可以使用Fiddler的开放端口功能

使用Fiddler工具,开放端口直连

省略上面的第四步,改为使用Fiddler开放一个端口(比如8877),在命令行中执行

安卓微信页面的调试

  

安卓微信页面的调试

在FiddlerScript脚本面板中添加替换规则,请求前匹配IP:port来进行host转换,然后保存应用

安卓微信页面的调试

然后在PC上访问 11.22.33.44:8877/wx/page-spring  试看是否正常转换,再在手机上访问这个链接即可

另外,有些页面需要绑定微信oAuth授权,这些页面上线之后(比如为  ),如果想在PC上直接访问调试,就会出问题了

安卓微信页面的调试

使用Fiddler,请求前设置Cookie

微信授权其实是绑定了OpenID,并和我们自己的系统中做了对应,那我们只要拿到这个登陆cookie就能实现模拟登陆了

在Fiddler中,有很多种为请求设置cookie的方法

1. 获取Cookie

使用上面的方法,让手机访问的请求能被Fiddler捕获,取某条请求,获取其中的Cookie(比如这个PHPSESSID)

安卓微信页面的调试

2. Fiddler为请求设置Cookie

可以打断点,在PC上访问链接,然后在Raw或相应的Tab修改Cookie,再返回即可

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzdydg.html