Charles的使用

移动开发经常都需要抓包调试,之前用的是Windows的 Fiddler ,某日才发现mac上的 Charles 也有Windows版本,一查原来是mac/linux/Windows都支持,好定西啊,我是比较喜欢跨平台的东东的,以后切换开发环境的时候就比较平滑了,在此记录下使用心得操作;

基于:
Charles v4.x
系统: Windows10/mac10.13

一些需求场景

1. 前后端同时开始某个功能迭代, 约定好接口数据格式后, 前端同学通过代理软件的重定向功能来模拟服务器response,而不同等待后端;
2. 手动复现某些response,比如500错误;
3. 弱网环境模拟;

安装

直接上 官网 下载就好了,最新的是v4.2.1,收费软件,免费试用30天,到期不影响功能;

基本结构

主要是会话的两种视图模式以及对应的 requet/response 面板组成:

• Structure 视图模式下,列表会按照域名来归类所有请求;
• Sequence 视图则是按照请求发生的顺序来展示;
  

如果不习惯 Sequence 默认的上下视图,可以修改为类似 Fiddler 的左右视图模式(更符合眼睛的习惯): 快捷键 cmd+, -> Charles Preferences -> Viewers, 修改 Sequence view layout 为 Tall 即可;

常用的功能在图上已经有注释,不多说, Charles 的右键菜单功能比 Fiddler 多,简单看几个:

• Save response : 保存response数据到文件中,方便后面用于重定向功能 map local...;

选择多条记录后再右键就会有 Save All... 可以方便的把所有response信息一次性导出到某个目录中,然后通过 map local... 结合通配符来批量重定向请求;

• Export : 可以将选中的多个会话信息完整导出成文件(*.chls),通过File - import 来导入chls文件,方便不同开发人员进行调试或者现象复现分析;
• Compose: 可以基于当前 request 请求信息来构造新的请求, 类似于 postman 的功能;
• repeat: 重发当前的请求;
• repeat advanced... : 可以设定重发次数以及并发数,可用于进行简单的服务器压测;

菜单

Proxy 菜单

这个用得比较多,在这里设置跟踪捕捉过滤功能:

设置会话捕捉条件( Recording Settings )

• include 面板用于启用/停止可以捕捉/显示的会话;
• exclude 表示不显示的会话,在会话列表中右键选择 ignore 时,对应的url会出现在这里;

比较好用的是过滤条件支持通配符, * 表示任意多个字符, ? 表示一个字符,如 Protocol 中有 http , https 和 "",选择空白或者输入 * 都可以表示任意协议的请求;

也可以通过主界面底部的 Filter 来简单设置过滤条件,但不支持通配符

设置允许连接的ip地址( Access control Settings )

模拟网络环境( Throttle Settings )

在这里选择要模拟的网络环境,选项比 Fidder 多很多,也可以自定义,最人性的是还可以对指定的url进行网络环境摸, 好评...
这里设置完成后通过 Proxy - Start Throttling(Ctrl+T) 或者常用工具栏按钮来启用或停止;

设置为代理服务器,并捕获手机请求( Proxy Settings )

端口号 Port 默认 8888 ,跟 Fiddler 一样,省得切换代理软件的时候,手机还得重新设置wifi代理了; 记得启用 Enable transtarent HTTP proxying

手机上的设置跟 Fiddler 类似,切换到wifi设置页面,选择Proxy 选择 manual ,代理服务器设置为 Charles 所在设备的ip,端口就是上面设定的 8888 , 注意: 手机和 Charles 所在机器需处于同一个wifi网络中;

以上设定完成后,就可以在 Charles 中捕获手机发起的请求了,第一次连接的时候 Charles 会弹出确认提示框,选择 allow 就好了,后续可在 proxy -> access control settings 中进行管理:

Tools菜单

rewrite 动态修改 request/response 信息

跟 map local 类似,也可以对response进行修改,不过他改变的只是部份信息,比如:主机地址( Host ),返回状态码( response status),返回信息内容( body )等:

捕获https请求

1. 在本机上安装证书

这里可以直接选择 Install charles root certificate,会在本机上安装证书,也可以如图选择保存证书,然后手动导入到需要的位置,操作类似:

mac上的操作请看 这篇

2. 在手机上安装证书

单击 help -- ssl proxying - install charles root certificate on a mobile device or remote browser ,会弹出提示框,然后在手机浏览器上输入网址: chls.pro/ssl ,然后根据提示保存证书即可:

3. 启用https捕捉

启用后就可以在会话视图列表中看到https请求了;

断点功能(临时修改内容)

方法:

1. 在会话列表中右键点击某个会话,然后在菜单中选择 Breakpoints ;
2. 通过 Proxy - Breakpoint settings... 中手动新建/启用某个断点;

   要求勾选 enable breakpoints

之后当下次再有该请求时,会自动进入断点模式;

一个完整请求会进入断点模式2次:

• request的发出之前;
• 收到服务器的response但尚未返回给客户端的时候;

断点request的时候,可以修改request信息,不过我们程序都有对请求header做校验和处理,修改参数后一般就直接报错了,所以这里看看response就好,反正操作类似:

在 edit response 中可以双击直接修改json文件的key/value值,很方便,修改完成后单击 execute 继续执行其他操作,将修改后的response返回给客户端;

response 重定向功能

这个跟 Fiddler 的 autoResponse 功能类似,可以指定本地文件( map local... )也可以指定为其他服务器( map remote... )上的文件,我们介绍前一种;

这里的 map local 只能重定向 response 的数据内容部分,而 headers 还是会保留服务器返回的,比如要修改返回码之类的操作,目前来看,只能通过断点或者 rewrite 来进行,这一点比 Filder 弱,不太方便,也可能是我还没发现怎么处理,有知道的请不吝告知,谢谢;

断点可以用于临时修改数据,也是一种重定向功能,若是要长期重定向,咱还是将response重定向到本机文件比较方便,具体方法:

• 准备一份要返回给客户端的 response 数据文件,可以从前面介绍的 save Response 来保存正常数据,然后修改,也可以自己构造一份(用于服务端api尚未发布,但移动端又需要进行调试的时候);
• 右键单击某个请求,从菜单中选择 map local ... , 也可以单击 Tools - Map Local... 打开 map lcoal settings 来添加一个映射关系,两种操作是一样的,前者只不过直接把url信息给写好了:

• 完成设定后,后续符合条件的请求都会用本地映射文件替代;

最后: 我之前在Windows下是 Fiddler 和 Charles 配合使用,主要是 Fiddler 的https抓包一直出问题,而 Charles 就很正常,后来更换mbp后就一直用 Charles 了,但是 Charles 也有一些不足:

1. 删除多个会话时会感觉得到卡,而 Fiddler 很顺畅;
2. filter 功能没 Fiddler 强大;
3. Fiddler 提供脚本自定义功能,如果是C#开发者的话,还可以很方便的集成fiddler_core到自己的应用中;

扩展阅读: Fiddler的使用技巧

转载于:https://juejin.im/post/5a433b3051882527a13dc574