使用charles 调试移动端web应用 2019-08-23

在做移动开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析。Charles 通过将自己设置成系统的网络访问代理服务器,使得所有的网络访问请求都通过它来完成,从而实现了网络封包的截取和分析。

一、Charles

Charles是一个HTTP代理服务器,HTTP监视器,反转代理服务器,当浏览器连接Charles的代理访问互联网时,Charles可以监控浏览器发送和接收的所有数据。它允许一个开发者查看所有连接互联网的HTTP通信,包括request, response和HTTP headers (包含cookies与caching信息)。

二、使用方式

1、抓包浏览器请求

在Mac下,通过Proxy -> macOS Proxy自动设置代理

使用charles 调试移动端web应用 2019-08-23_第1张图片
1566551313982.jpg

第一次使用需要输入Mac密码,之后 macOS Proxy就是勾中状态
1566552364451.jpg

这时,就可以抓取到所有的Http请求了。不需要的时候,记得取消 macOS Proxy的勾选。
使用charles 调试移动端web应用 2019-08-23_第2张图片
1566552625204.jpg

(可以看到,Https的请求还是抓不了的)

2、移动端抓包请求

IOS为例,前提条件需要iphone连接上Mac所在局域网的WIFI
打开手机连接的WIFI配置 -> 选择配置代理 -> 手动 -> 填入Mac的Ip地址

使用charles 调试移动端web应用 2019-08-23_第3张图片
1566553185349.jpg

比如我的Mac ip就是 192.168.7.110,端口默认是 8888,如果需要更改,可以通过 Proxy -> Proxy Settings...配置进行更改,一般来说使用默认的 8888就够了。

保存配置后,Charles会弹框提示是否允许,直接允许就行了,不允许你也用不了的。之后呢,就可以抓到手机端的http请求了。

使用charles 调试移动端web应用 2019-08-23_第4张图片
对部分内容打码处理

对于一般App的协议抓包可能到这就结束了,但是如果有这么一个场景:

你开发了一个web app,它一般运行在微信浏览器,并集成了微信支付。这时,你需要测试其支付相关的流程,并且需要取到微信的openId,但是后端又还没搭建测试环境,你要怎么测试你的开发代码?难道只能上商用环境进行测试?

接下来,就讲讲这问题的解决办法。

3、移动端web app的调试

上面的问题简短总结下就是,如何在开发环境获取到微信的ipenId

微信获取openId会识别请求的域名,如果不是当前绑定的域名,则会直接无视,所以开发环境直接请求是取不到openId的。那么,就需要用到Charles的代理映射功能,将移动端的商用地址映射代理成我们本地的开发地址,这样我们请求发出的域名其实还是商用的域名。

经过第2步,我们的手机已经使用了Charles的代理,然后用微信访问项目的商用地址,在Charles中可以看到其具体地址,右键该地址选择 Map Remote...

使用charles 调试移动端web应用 2019-08-23_第5张图片
1566555723409.jpg

弹出 Edit Mapping弹框
使用charles 调试移动端web应用 2019-08-23_第6张图片
1566556097852.jpg

上部分为项目原域名( Host战略性打码), 如果Query栏有值,则需要清空,没有就不用管了。下部分为需要映射的目标域名,一般是自己电脑的ip,端口就是web项目的本地服务端口,其他都不用写,点击 ok保存。

这时你再刷新手机的web app就会发现,跑的已经是本地代码了。可以愉快的测试开发代码,不用提心吊胆的上商用再测试。

4、改写协议返回的Response Body

调试协议的时候,难免需要各种不一样的数据做测试,而后端不一定能很方便的提供,这时就可以用Charles的另一个功能Map Local
假如有一个接口getLuckPolicyOfDevice,返回如下json数据

使用charles 调试移动端web应用 2019-08-23_第7张图片
1567072760524.jpg

做调试的时候,想要修改 isUsed的值,来达到控制UI的呈现。

首先右键该协议请求,选择Save Response,保存该json数据,这里会让你选择保存路径,自由选一个路径存放(当然,你也可以选择自己敲入txt

使用charles 调试移动端web应用 2019-08-23_第8张图片
1567073030961.jpg

保存后,默认是一个以协议为名的无后缀文件,如 getLuckPolicyOfDevice,可以自己加上 txt、json等后缀,方便打开。

使用WebStorm打开getLuckPolicyOfDevice文件,修改其isUsed项值为true,然后保存退出。

再次右键该协议请求,选择Map Local

使用charles 调试移动端web应用 2019-08-23_第9张图片
1567072314320.jpg

弹出如下弹框:
使用charles 调试移动端web应用 2019-08-23_第10张图片
1567073696381.jpg

点击 Choose,选择刚才修改过的 getLuckPolicyOfDevice文件,点击 OK保存。

再刷新协议请求,可以发现,返回值已经是修改过的值了

使用charles 调试移动端web应用 2019-08-23_第11张图片
1567074114916.jpg

同理,你可以修改任意想改变的值,并且第一次配置后,以后只需要修改对应的 Response文件就行,不用重新配置。

你可能感兴趣的:(使用charles 调试移动端web应用 2019-08-23)