Charles抓包工具测试实战

作用：
①用Charles来分析前后端的问题；
②用Charles模拟弱网测试环境；
③用Charles的断点构建异常的测试场景
④支持HTTP及HTTPS代理
⑤支持流量控制
⑥支持接口并发请求
⑦支持重发网络请求
⑧支持断点调试

一.Charles简介

它是一款基于http协议的代理服务器，通过成为电脑或者浏览器的代理，然后截取请求和请求结果达到分析抓包的目的。

工作原理：
1.需要运行Charles并配置代理(前提)
2.在客户端上面需要配置代理(前提)
3.由客户端发送请求
4.Charles接收再发送给服务端
5.服务端返回请求结果给Charles
6.由Charles转发给客户端

特点：跨平台，半免费【使用30分钟之后会强制退出】

优点：(对比Fiddler的优点)
Charles能够支持Linux、macOS，Fiddler只支持Windows；
Charles支持按域名和按接口查看报文，简洁明了；
Charles支持反向代理；
Charles网络限速可选择网络类型；
Charles可以解析AMF协议

二.Charles安装与配置

(1)Charles安装

下载地址链接: charles下载


双击安装目录中的exe文件打开Charles

(2)Charles组件介绍

(3)Charles设置

①代理设置(先在“局域网设置”中设置代理服务器的地址和IP)

②访问控制

(4)客户端设置

Windows代理设置

IOS手机代理设置

①在IOS手机中选择“设置”-“无线局域网”
②点击已连接的无线网络名称
③在HTTP代理的配置代理中选择“手动”
④输入服务器IP地址及端点，点击“存储”

Android手机代理设置

①在Android手机中选择“设置”-“WLAN”
②长按已连接的无线网络名称，点击“修改网络”
③勾选“显示高级选项”
④在代理选择项中选择“手动”
⑤输入服务器IP地址及端口，点击“存储”

三.Charles实战

(1)问题分析

是前端的问题还是后台的问题呢？

1.抓包分析问题-1

在人事管理系统中修改员工的信息时，如果员工姓名超长会产生以下两个问题：
问题一：会提示“系统繁忙”
问题二：会显示两次提示信息

2.抓包分析问题-2

实施步骤：Charles代理配置 —— 客户端代理配置 —— 操作客户端软件 —— 分析请求数据

3.抓包分析问题-3

问题一：提示“系统繁忙”的信息是由后台返回的，所以此问题是后台开发代码的问题
问题二：会显示两次提示信息，但后台只返回一个请求结果，所以此问题是前端开发的问题

(2)https抓包

乱码：如何解决？需要安装SSL证书

Windows证书配置

1.打开Charles，选择“help” —— “SSL proxying” —— “install Charles Root Certificate”
2.在打开的证书框中，点击“安装证书”，选择“本地计算机”，点击“下一步”
3.选择“将所有证书都存放下列存储”，再点击浏览
4.选择“受信任的根证书颁发机构”，点击“确定” —— “下一步” —— “完成”

iOS证书配置

1.在电脑上运行Charles，且iOS手机设置好代理，在浏览器中地址栏输入：http://charles.proxy.com/getssl
2.进行下载安装
3.返回到“通用”界面，选择“关于本机”
4.点击“证书信任设置”，启用Charles proxy CA证书并确认

Charles https代理配置

步骤一：在Charles窗口点击菜单“proxy” —— “SSL proxying setting”
步骤二：在打开的设置窗口中勾选“Enable SSL Proxying”
步骤三：添加Location时，将Host与Port同时设置为*

步骤四：点击“OK”

然后清除已抓到的包，重新访问路径再重新抓包就不会乱码了

(3)弱网测试

Charles流量配置

1.在Charles窗口中点击菜单“proxy” —— “Throttle Setting”
2.在打开的设置窗口中勾选“Enable Throtting”
3.在“Throttle preset”下拉框中选择对应的网络类型
4.点击“OK”

弱网测试实例

将Charles的网络流量配置成56K modem的网络，查看人力资源网站的员工菜单打开情况？

先在不设置网络的正常情况下查看网站的打开情况，然后再设置网络查看网站的打开情况，两者进行比较【从时间分析，从页面展示状态分析】

(4)断点调试

作用：用来构建异常的测试场景
1.右击接口链接，选择“Breakpoints”
2.在浏览器刷新对应接口的页面
3.此时会自动跳转到Charles并显示出接口请求信息
4.点击“Edit Request”，修改请求的信息，点击“Execute”
5.点击“Edit Response”
6.在数据格式栏中选择合适的显示格式，比如“Json”
7.修改对应的数据，点击“Execute”
8.回到浏览器查看数据应该为修改之后的Response的信息

断点调试实例

场景一：在人事管理系统中增加角色时，把角色名设置为空，然后请求到服务器

数据为空都能添加成功，说明后台代码有问题

场景二：针对查询员工接口请求时，修改返回数据success=false，code=999，message=操作失败

修改返回结果之后，网页报错，数据无法展示，可以判断为正常