在做移动开发时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析。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文件就行，不用重新配置。
网友评论