Charles抓包工具快速入门
目标：
- 能够用charles分析前后端问题
- 能够用charles模拟弱网测试环境
- 能够用charles的断点构建异常的测试场景
工具简介
是什么
基于HTTP协议的代理服务器，通过成为电脑或者浏览器的代理，截取请求和请求结果达到分析抓包的目的。
特点：跨平台、半免费（免费版和收费版）
工作原理
前置步骤：
- 运行charles并配置代理
- 在客户端上面需要配置代理
步骤：
- 客户端发送请求
- charles接收后发给服务端
- 服务端返回请求结果给charles
- charles转发给客户端
主要功能
- 支持HTTP以及HTTPS代理
- 支持流量控制（可以做弱网环境测试）
- 支持接口并发请求（可以做一些简单的性能/压力测试）
- 支持重发网络请求（可以做简单接口测试）
- 支持断点调试
优点
和Fiddler对比的优点：
- 支持linux、macos
- 支持按照域名和按照接口查看报文，简洁明了
- 支持反向代理
- 网络限速可以选择网络类型
- 可以解析AMF协议
安装与配置
安装
组件介绍
页面布局
主导航栏
请求导航栏
请求数据栏
代理设置
Charles配置代理
客户端配置代理
Windows（谷歌浏览器为例）
注：在charles中，可以使用菜单栏中help>>>local ip address查看本机ip地址
MacOS
常规方法
快捷设置
IOS代理设置
- 在IOS手机中选择“设置”>>>“无线局域网”
- 点击已连接的无线网络名称
- 在HTTP代理的配置代理中选择“手动'
- 输入服务器P地址及端点，点击“存储”
Android手机代理设置
- 在Android.手机中选择“设置”>>>“WLAN”
- 长按已连接的无线网络名称，点击“修改网络
- 勾选“显示高级选项”
- 在代理选择项中选择“手功”
- 输入服务器P地址及端口，点击“存储”
访问控制
场景1：某IP地址在IP Range中，该IP地址可以访问网络
场景2：某IP不在IP Range中，勾选了Prompt to allow unauthorized connections，则当该IP地址访问网络的时候，会提示确认弹窗
场景3：某IP不在IP Range中，没有勾选Prompt to allow unauthorized connections，则默认该IP不可访问网络
案例
抓包分析问题
测试过程中经常会遇到定位问题是前端还是后端的场景，这个时候可以通过抓包工具Charles，通过对抓取到的报文进行分析，从而定位问题
抓包分析的步骤如下：
- Charles代理配置
- 客户端代理配置
- 操作客户端软件
- 分析请求数据
举个例子：在人事管理系统中修改员工的信息时，如果员工姓名超长
会产生以下两个问题
问题一：会提示“系统繁忙”
问题二：会显示两次提示信息
经过抓包分析，后台响应报文只有一次返回，返回信息为“系统繁忙”，所以问题一可以定位为后台问题，后台返回提示信息不够友好，问题二可以定位为前端问题，因为后台只返回了一次，前端弹窗提示了两次。
未配置证书抓取HTTPS数据
如果没有配置证书，直接使用charles抓取https数据，会发现都是乱码
Windows
证书配置
Charles Https代理配置
- 在Charlesi窗口中点击菜单“proxy”->“SSL proxying setting
- 在打开的设置窗口中勾选“Enable SSL Proxying'
- 点击“OK”
MacOS证书配置
IOS证书配置
第五步：返回“通用”页面，选择“关于本机”
第六步：点击“证书信任设置”，启用Charles Proxy CA证书并确认
提示：IOS手机证书，需要先把手机代理设置为电脑地址后才能下载证书（别人说的，不知道真假）
Charles流量配置（模拟弱网）
参考数据：
流量配置可以让Charles模拟不同网络环境下的操作，可以用来做弱网测试
步骤如下：
- 在Charles窗口中点击菜单“Proxy”->“Throttle Setting”
- 在打开的设置窗口中勾选“Enable Throttling”
- 在“Throttle preset'”下拉框中选择对应的网络类型
- 点击“OK”
可靠性影响是否丢失数据，稳定性影响是否断网
Charles断点配置
断点配置一般用来构建异常的测试场景，步骤如下：
- 右击接口链接，选择“Breakpoints”
- 在浏览器刷新对应接口的页面
- 此时会自动跳转到Charles并显示出接口请求信息
- 点击“Edit Request”,修改请求的信息，点击“Execute”
- 点击“Edit Response”
- 在数据格式栏中选择合适的显示格式，比如“Json”
- 修改对应的数据，点击“Execute”
- 回到浏览器查看数据应该为修改之后的Responsel的信息
