Charles 主要的功能包括:
- 截取 Http 和 Https 网络封包。
- 支持重发网络请求,方便后端调试。
- 支持修改网络请求参数。
- 支持网络请求的截获并动态修改。
- 支持模拟慢速网络。
Charles 4 新增的主要功能包括:
- 支持 Http 2。
- 支持 IPv6。
现以android设备为例,简单描述charles的基本连接安装步骤:
我们公司的测试测域名:
正式网络域名:
http://api.xin.com
下载charles
使用adroid测试机连接charles;
获取pc ip地址;


手机端需要配置(进入手机wifi选择在同网段选择wifi):

(注:如果pc端开启了防火墙,charles收不到同意代理的请求)
如果想导入别人charles的设置,在tools中选择:

Charles中设置上行或下行速度(模拟2g、3g、4g网络):
一款APP针对不同网络情况下都需要保证不会Crash,同时尽可能做到在弱网情况下也能达到功能正常使用,或者使用体验达到最佳。
我们借助Charles工具做弱网的测试,或者模拟2G、3G的网络情况。
Charles的使用方法如下:
首先,打开Charles,在Throttle Settings中设置网络状况,比如:

进行这项设置后,我们会看到小红旗处于工作状态。

然后,打开Sequence查看每个请求的执行情况,比如:

上图中可以看到每个请求的大小(size),以及请求的状况(status)。
PS:弱网、2G、3G建议的上下行速率如下,同时还可以控制丢包率的数据
网络 上行 下行
弱网 10 30
2G 15 50
3G 384 2800
4G 3000 8000
Charles中设置配置host跳转:修改服务器返回内容
Map 功能:适合长期地将某一些请求重定向到另一个网络地址或本地文件。
1)Map Remote 是将指定的网络请求重定向到另一个网址请求地址。
2)Map Local 是将指定的网络请求重定向到本地文件。
在 Charles 的菜单中,选择 “Tools”->”Map Remote” 或 “Map Local” 即可进入到相应功能的设置页面。

对于 Map Remote 功能,我们需要分别填写网络重定向的源地址和目的地址,对于不需要限制的条件,可以留空。下图是一个示例,我将所有 ytk1.yuanku.ws(测试服务器)的请求重定向到了 www.yuantiku.com(线上服务器)。

对于 Map Local 功能,我们需要填写的重定向的源地址和本地的目标文件。对于有一些复杂的网络请求结果,我们可以先使用 Charles 提供的 “Save Response…” 功能,将请求结果保存到本地(如下图所示),然后稍加修改,成为我们的目标映射文件。

下图是一个示例,我将一个指定的网络请求通过 Map Local 功能映射到了本地的一个经过修改的文件中。

Map Local 在使用的时候,有一个潜在的问题,就是其返回的 Http Response Header 与正常的请求并不一样。这个时候如果客户端校验了 Http Response Header 中的部分内容,就会使得该功能失效。解决办法是同时使用 Map Local 以下面提到的 Rewrite 功能,将相关的 Http 头 Rewrite 成我们希望的内容。
Rewrite 功能:适合长期地将某一些请求重定向到另一个网络地址或本地文件。
Rewrite 功能功能适合对某一类网络请求进行一些正则替换,以达到修改结果的目的。
例如,我们的客户端有一个 API 请求是获得用户昵称,而我当前的昵称是 “tangqiaoboy”,如下所示:

我们想试着直接修改网络返回值,将 tangqiaoboy 换成成 iosboy。于是我们启用 Rewrite 功能,然后设置如下的规则:

完成设置之后,我们就可以从 Charles 中看到,之后的 API 获得的昵称被自动 Rewrite 成了 iosboy,如下图所示:

Breakpoints 功能:适合做一些临时性的修改。
上面提供的 Rewrite 功能最适合做批量和长期的替换,但是很多时候,我们只是想临时修改一次网络请求结果,这个时候,使用 Rewrite 功能虽然也可以达到目的,但是过于麻烦,对于临时性的修改,我们最好使用 Breakpoints 功能。
Breakpoints 功能类似我们在 Xcode 中设置的断点一样,当指定的网络请求发生时,Charles 会截获该请求,这个时候,我们可以在 Charles 中临时修改网络请求的返回内容。
下图是我们临时修改获取用户信息的 API,将用户的昵称进行了更改,修改完成后点击 “Execute” 则可以让网络请求继续进行。

需要注意的是,使用 Breakpoints 功能将网络请求截获并修改过程中,整个网络请求的计时并不会暂停,所以长时间的暂停可能导致客户端的请求超时。
使用Charles对Https请求进行抓包:截取 Https 通讯信息
对某个APP做分析的时候发现其请求是Https的,抓包工具不能正常的显示请求的内容及返回的情况。通过搜索发现Charles是支持针对Https抓包的。具体的操作如下:
1、WIN 电脑端安装SSL证书

Mac 电脑上安装证书。点击 Charles 的顶部菜单,选择 “Help” -> “SSL Proxying” -> “Install Charles Root Certificate”,然后输入系统的帐号密码(如下载成功后未弹出输入账号密码,需手动修改证书为信任状态),即可在 KeyChain 看到添加好的证书。如下图所示:

需要注意的是,即使是安装完证书之后,Charles 默认也并不截取 Https 网络通讯的信息,如果你想对截取某个网站上的所有 Https 网络请求,可以在该请求上右击,选择 SSL proxy,如下图所示:

这样,对于该 Host 的所有 SSL 请求可以被截取到了。
2、手机端安装SSL证书
iOS 或 Android 机器上截取 Https 协议的通讯内容,还需要在手机上安装相应的证书。点击 Charles 的顶部菜单,选择 “Help” -> “SSL Proxying” -> “Install Charles Root Certificate on a Mobile Device or Remote Browser”,然后就可以看到 Charles 弹出的简单的安装教程。如下图所示:

证书下载地址:https://www.charlesproxy.com/documentation/additional/legacy-ssl-proxying/
具体链接:https://www.charlesproxy.com/assets/legacy-ssl/charles.crt
IOS的系统,直接Safari打开后按照提升安装描述文件即可。
3、进行相关的配置

选择Proxy | Proxy Settings,弹出proxy设置选项卡,勾选Enabling transparent HTTP proxying

勾选Enable SSL Proxying,在Location部份选择add,按如下图添加,抓取任意站点、443端口的数据

最后在手机上设置代理地址即可。
修改网络请求内容
有些时候为了调试服务器的接口,我们需要反复尝试不同参数的网络请求。Charles 可以方便地提供网络请求的修改和重发功能。只需要在以往的网络请求上点击右键,选择 “Edit”,即可创建一个可编辑的网络请求。如下所示:

我们可以修改该请求的任何信息,包括 URL 地址、端口、参数等,之后点击 “Execute” 即可发送该修改后的网络请求(如下图所示)。Charles 支持我们多次修改和发送该请求,这对于我们和服务器端调试接口非常方便,如下图所示:

给服务器做压力测试
我们可以使用 Charles 的 Repeat 功能来简单地测试服务器的并发处理能力,方法如下。
我们在想打压的网络请求上(POST 或 GET 请求均可)右击,然后选择 「Repeat Advanced」菜单项,如下所示:

接着我们就可以在弹出的对话框中,选择打压的并发线程数以及打压次数,确定之后,即可开始打压。

反向代理
Charles 的反向代理功能允许我们将本地的端口映射到远程的另一个端口上。例如,在下图中,我将本机的 61234 端口映射到了远程(www.yuantiku.com)的80端口上了。这样,当我访问本地的 61234 端口时,实际返回的内容会由 www.yuantiku.com 的 80 端口提供。
