在开发移动端页面时,一般都得保证在微信页面中能够正常访问,虽说微信内置浏览器统一了各个不同安卓机的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,再返回即可