Charles可运行在Mac、Windows、Linux上。
官方免费30天,过期后,每次使用不能超过30分钟且启动有10秒延时。
大致原理:手机发出请求,先经过电脑上的Charles,再到服务端;服务端的响应先经过电脑上的Charles,再到手机上。
功能特点:
1、查看http请求的数据;
2、查看https请求的数据;
3、设置断点,修改数据,再发给手机;
4、模拟慢速网络;
5、过滤网络请求;
6、重新向服务器发请求;
7、给服务器做压力测试;
8、修改服务器返回内容 - 3种方案
9、反向代理(即:经过charles的时候,帮我们变更为指定的端口)
设置charles:
1、http数据抓取:电脑和手机的wifi要一致,手机WIFI上设置HTTP代理,如下图,
服务器:打开电脑的网络设置,查看IP地址即可,端口:8888。
设置完后,电脑上弹框,点击allow,就可以抓取手机上所有的http请求数据了。

2、https数据抓取:
在http抓包的基础上再进行设置。
2.1 手机安装SSL证书到手机,点击Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device;根据弹框信息,在手机浏览器上输入地址 chls.pro/ssl
,下载安装证书。对于10.3的系统,需要多做一步:前往设置→通用→关于本机→证书信任设置
打开信任开关。




此时,https的数据还是不能抓取到的,还需针对具体https的接口做单独设置:
Host设置要抓取的https接口,比如想抓这个:

开始操作:Proxy -> SSL Proxying Settings...



这个时候,手机重新发送https请求,可看到抓包:

引用 —— 十分钟学会Charles抓包(iOS的http/https请求)
模拟慢速网络
1.菜单中选择【Proxy】--->【Throttle Settings..】- 激活【Enable Throttling】。
2.在Throttle Configuration设置弱网的参数。
3.以下是各种2G3G4G网制式的速率参考文档:
移动网络制式与网速的参考文档

设置断点,修改数据(Breakpoints 功能,适合临时一次修改网络请求结果)
设置断点的两种方式之一:鼠标右击

设置断点的两种方式之二:Proxy --> Breakpoint Setting,手动填写,如果不知道怎么写,可参照鼠标右击设置好的怎么写

设置完后,手机发送请求,跑到断点界面,修改数据:

注意:使用 Breakpoints 功能将网络请求截获并修改过程中,整个网络请求的计时并不会暂停,所以长时间的暂停可能导致客户端的请求超时。
过滤网络请求(过滤的内容是URL字符)
网络请求的内容太多了,但我们只需要看某个host的内容,这时候,就需要过滤下了。
三种方式之一(临时性过滤):在Filter 栏中填入要过滤的url所包含的字符:

三种方式之二(临时性过滤):sequence界面、右击、focus、选中focused,过滤的内容为host的字符。


三种方式之三(经常性过滤):“Proxy”->”Recording Settings”->“Include”,这方式可以设置多个过滤host。

---- 参考来自唐巧de文章:《 Charles 从入门到精通》
重新向服务器发请求
调试接口,需要反复尝试不同参数。Charles提供了网络请求修改和重发请求的功能。避免频繁运行Xcode来调试接口。
点击add添加该条请求的所有参数,URL和Form处都要填写,再Execute。


给服务器做压力测试
也就是重复给服务器发送请求,来简单的测试服务器的并发处理能力。


修改服务器返回内容 - 3种方案
使用场景:有些字段服务器暂时没有数据或者超时,这时候我们可以通过charles的功能来得到数据。
根据具体的需求,Charles 提供了 Map 功能、 Rewrite 功能以及 Breakpoints 功能,都可以达到修改服务器返回内容的目的。这三者在功能上的差异是:
1、Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件。(重定向到本地文件有潜在问题)
2、Rewrite 功能适合对网络请求进行一些正则替换。
3、Breakpoints 功能适合做一些临时性的修改。
Map 功能
charles 的 map 又分为 Map Remote 和 Map Local 两种,顾名思义,Map Remote 是将指定的网络请求重定向到另一个网址请求地址,Map Local 是将指定的网络请求重定向到本地文件。
进入 Map 设置的两种方式:
方式一:对某个请求鼠标右击。该种方式的好处是,对于刚开始使用,不知道怎么填写的人来说,Map From 已经自动帮你填写好了, Map To 可以照着格式写。该种方式只针对鼠标选中的那条请求。



方式二:“Tools”->”Map Remote” 或 “Map Local” ,该方式可以添加多条请求的重定向。

对于 Map Local 的本地目标文件,可以先 Save Response 功能,将请求结果保存到本地(如下图所示),然后稍加修改,成为我们的目标映射文件。

比如把一个请求映射到本地的一个修改过的文件:

注意问题:Map Local 在使用的时候,有一个潜在的问题,就是其返回的 Http Response Header 与正常的请求并不一样。这个时候如果客户端校验了 Http Response Header 中的部分内容,就会使得该功能失效。
解决办法:同时使用 Map Local 以下面提到的 Rewrite 功能,将相关的 Http 头 Rewrite 成我们希望的内容。
Rewrite 功能

目前还不知道怎么用 Map Local 和 Rewrite 联合起来用。没试成功。
Breakpoints 功能
上面提到过了: 《设置断点,修改数据》
反向代理
即:经过charles的时候,帮我们变更为指定的端口
Charles 的反向代理功能允许我们将本地的端口映射到远程的另一个端口上。例如,在下图中,我将本机的 61234 端口映射到了远程(www.yuantiku.com)的80端口上了。这样,当我访问本地的 61234 端口时,实际返回的内容会由 www.yuantiku.com 的 80 端口提供。

---- 参考来自唐巧de文章:《 Charles 从入门到精通》
网友评论