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

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

一、Charles

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

二、使用方式

1、抓包浏览器请求

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

1566551313982.jpg

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

1566552364451.jpg

这时，就可以抓取到所有的Http请求了。不需要的时候，记得取消 macOS Proxy的勾选。

1566552625204.jpg

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

2、移动端抓包请求

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

1566553185349.jpg

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

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

对部分内容打码处理

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

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

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

3、移动端web app的调试

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

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

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

1566555723409.jpg

弹出 Edit Mapping弹框

1566556097852.jpg

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

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

4、改写协议返回的Response Body

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

1567072760524.jpg

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

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

1567073030961.jpg

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

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

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

1567072314320.jpg

弹出如下弹框：

1567073696381.jpg

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

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

1567074114916.jpg

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