一、代理配置
1、HTTP代理设置
(1)将Charles作为MAC系统代理:
(2)配置Charles代理,端口号保持默认即可,只要使监听的端口不冲突就行:
在macOS标签页还可设置Charles在每次开启时自动作为系统代理:
2、HTTPS代理
https比http多了一个SSL证书,因此在配置好http的基础上把证书导入安装并信任即可抓捕解包https请求,MAC安装信任证书的步骤如下:
(1)进入Charles证书安装页,证书安装的各选项按实际需要安装,首次使用Charles时选择Install Charles Root Certificate
即可,更多帮助详情点击Charles Root Certificate Help
选项:
(2)输入账号登录密码后,将证书作为系统
证书(在安装页面的右下角有个下拉选项登录/iCloud/系统)安装后,进入以下页面:
在Charles证书详情页点击信任
左侧的>
,在本地电脑上使用时选择始终信任
:
设置Charles HTTPS监听地址及端口:
之后就能成功抓捕https请求了:
二、查看Charles抓包记录
1、页面简介
1.1 快捷工具栏
用于查看或调试请求的各种快捷工具,作用范围是全局的,都是按Charles中相应配置运行的。
以上按钮的功能从左到右分别为:
- 清除抓捕的所有请求;
- 停止/开始捕捉请求;
- 启用/禁用HTTPS代理;
- 弱网测试;
- 请求断点;
- 请求构造;
- 重放请求;
- 验证选择的响应;
- 常用工具(如断电、请求的黑白名单、自定义重定向等)。
1.2 session区
用于显示抓捕到的请求,在选择某个请求后,可查看其详情或调试(右击选择对应的调试工具即可,但调试工具仅针对该请求有效,这是与快捷工具栏中调试工具不同的地方)。
Structure
标签将请求按同一域名/服务器归类显示,Sequence
将请求按请求发生的时间先后进行显示,两者捉捕的请求一样的,只是显示方式不同,按实际情况选择即可。
1.3 单个请求详情区
右侧是选择请求的各项概览,各标签含义如下:
Overview
:请求概览,包括请求的URL、完成状况、HTTP响应状态码、协议、请求方法、部分请求头、连接各项耗时、请求的大小详情等。
Contents
:请求的实际内容,将请求和相应分别显示,且对之都有相应的格式化查看工具。
Summary
:为获取到所选择的请求的资源而同时发出的各种请求的概览。
Chart
:以图表形式列出本次请求的各项耗时详情。
Notes
:一些标注信息,一般为空。
2、为请求设置格式化查看工具
Charles会根据请求和响应中的头部信息自动设置对应的格式化查看工具,但当头部信息不够充分或按头部信息设置的格式化工具没有需要的工具时,可以自己选择定制。
按下图步骤选择对应工具即可,但当再次点击以选择的查看工具时,就会取消此工具的设置:
也可选择某一请求,单击右键选择:
以上两种都是针对某一个请求设置的格式化工具,也可以按下面的步骤为某一特定URL(一般是测试接口)的设置格式化工具:
三、构造请求
构造请求用于简单调试接口请求,其步骤如下:
选择要构造的请求,右击,选择Compose
后,当前会话会出现一个带道奇蓝色的铅笔图标的新请求,如下图中的login接口:
接着编辑要发送的接口请求参数并发送:
会新增一条访问记录:
四、伪响应
Charles中构造伪响应的方式有多种,伪造响应除用于测试已开发好的系统外,也可用于后端接口未开发完成而前端已完成时的Mock测试,本小节介绍除设置断点
以外的方法及步骤:
1、黑/白名单的设置
黑名单(Block List)
即Charles不允许通过的接口列表,此接口列表可自定义设置,当访问此列表中的接口时,Charles会给客户端浏览器返回一个403(即伪响应)或将此请求直接丢弃不发往服务器,其设置步骤如下:
(1)选择某个不允许通过的接口,本例以登录接口为例,选择Block List
即可:
当客户端浏览器请求此接口时,就会无法得到正确响应,因为Charles把该请求丢弃了,并没有发往服务器,使客户端浏览器页面呈现以下提示,这常用于临界/极限测试,测试UI在极端情况下是否得当及前端的容错性与稳定性
也可设置Charles对黑名单中的请求的处理方式,通过以下步骤:
取消黑名单也很方便,在上图中再次点击Block List
即可取消。
白名单(Allow List)
即Charles只允许通过的接口列表,除此列表上的请求不会被发往真正的服务器,在含义上与黑名单相反,其设置方法与步骤同黑名单的设置:
2、重定向
通过对客户端特定请求,Charles用本地或其他非原服务器返回的伪造的响应返回给客户端,以达到伪造响应来测试的目的(Mock)。其操作步骤如下:
(1)选择需重定向的请求,右击,选择Map Local...
(重定向到本地,Map Remote...
是重定向到其他服务器链接):
选择伪造的响应文件,此处以百度首页的HTML文件为例:
另外,用于重定向的本地文件可来源于历史请求,只需按一下步骤将历史请求的响应进行保存即可:
请求此登录接口后,响应为本地的重定向文件:
未设置重定向时的响应如下:
可通过以下步骤取消重定向:
五、请求断点
用于调试请求,定位前后端bug。分为请求前断点和响应后断电,Charles是两个一起进行的,即,在发生请求前Charles会进行一次请求前断点
,截断请求,在编辑请求后获取源服务器响应后,又会进行响应后断点
,Charles编辑完响应后放行,为方便记录以及方便查看断点效果,分两步介绍此功能点,这两种都要先开启断点,选择需断点的请求,右击,点击Breakpoints
,开启断点:
1、请求前断点
开启断点后,访问设置断点的URL,此时会出现一下页面,在此页面修改发往服务器的原始请求,此处将密码的加密值的一部分改为了
“This is a bp debug ”:
对返回的原始请求不作任何修改,直接放行(即跳过响应后断点):
此时客户端弹出密码错误,响应体也是,如下:
2、响应后断点(伪响应的一种)
上述过程使得输入正确的账号密码,却得到密码错误、登陆失败的结果,除此之外,响应后断点也可达到此效果,如下图中的各个步骤:
断点调试完毕后,可通过右键URL再次点击Breakpoint
取消、或通过顶部菜单栏的Proxy
:
六、简单压力测试
即通过重放请求Repeate
来达到给请求:
上图只能一次一个串行的发送请求,和Fiddler的重放是一样的,但Charles与Fiddler不同的地方在于,Charles可以并行多线程地重放请求,如下图:
七、弱网测试
Charles亦支持弱网模拟,与Fiddler只能通过FiddlerScript编辑网络上下行速度不同的是,Charles支持更详细的弱网设置且预设对应的典型参数,用户可按需设置: