目录
Charles抓包工具的作用：
- 区分前端or后端的代码问题
- 模拟弱网测试环境
- 用Charles的断点构建异常的测试场景
一、Charles的简介
1、Charles是什么？
图标（青花瓷）：
Charles是基于HTTP协议的代理服务器，通过成为电脑和浏览器的代理截取请求和请求结果从而达到分析抓包的目的。（跨平台、半免费）
2、Charles工作原理
原理图：
前置 （准备）步骤：
- 需要在电脑上运行Charles并配置代理（该电脑才成为代理服务器）
- 需要在客户端配置代理（IP地址配置成代理服务器的IP地址&代理端口（配置Charles时填入的端口地址））
?步骤：
- 由客户端发送请求
- 由Charles接收请求再发送给服务器
- 服务器返回请求结果给Charles
- Charles将结果转发给客户端
3、Charles主要功能
- 支持HTTP和HTTPS代理
- 支持流量控制
- 支持接口并发请求（同一时间执行多个请求）
- 支持重发网络请求
- 支持断点调试（构建异常的测试场景）
4、Charles的优点（与fiddler比较）
Charles支持Linux、macOS（fiddler只对Windows友好）
Charles支持按域名和接口查看报文，简洁明了
Charles支持反向代理（fiddler不支持）
Charles网络限速可选择网络类型（fiddler麻烦）
Charles可解析AMF协议（fiddler不支持）
二、Charles安装与配置
1、Charles安装
下载：Charles官网（https://www.charlesproxy.com/）
?安装：双击程序包安装，提示信息直接点确认，可更改安装目录
?安装完成！
2、Charles组件介绍
主界面
主导航栏：
?请求导航栏
structure：按域名显示接口请求数据
sequence：按接口请求时间显示数据
filter：通过域名进行请求过滤
3、Charles设置
Charles代理设置
Charles访问设置
4、Charles客户端设置
客户端 -- Windows代理设置
客户端 -- MacOS代理设置
1.
?
怎么看电脑的IP地址？（Charles上就可以看）?
?2、macOS快捷代理设置方式（适用于运行Charles的电脑和客户端是同一台电脑时）
客户端 --?iOS代理设置
设置→无线局域网→点击连接的无线网络→配置代理→手动→输入服务器IP地址及端口→存储
客户端 --?Android代理设置
设置→WLAN→长按连接的无线网络，修改网络→勾选显示高级选项→代理：手动→输入服务器IP地址及端口→存储?
三、Charles实战
1、问题分析（前端？后台？）
实施步骤：
- Charles代理配置
- 客户端代理配置
- 操作客户端软件
- 分析请求数据（抓取报文信息，分析报文信息）
2、HTTPS抓包
HTTPS是HTTP进行了封装，即对HTTP的报文数据加密
?解决方案：安装SSL证书
Windows客户端证书配置
??
?Charles https代理配置
macOS 证书配置
iOS证书配置
3、弱网测试
Charles流量配置
Charles弱网测试实例
实例：将Charles网络流量配置成56K?modem的网络，查看网站打开情况
（正常情况）
?
?结果分析：
- 从时间分析（慢）
- 从页面展示状态
4、断点调试
Charles断点配置作用：用来构建异常的测试场景
Charles断点配置的步骤
- 右击接口链接，选择"breakpoints"
- 在浏览器刷新接口对应的页面
- 此时会自动跳转到Charles并显示出接口请求信息
- 点击“edit?request”，修改请求信息，点击“execute”（execute表示执行、发送请求）
- 发送请求后，服务器把请求结果返回Charles
- 点击“edit?request”
- 在数据格式栏中选择正确的显示格式，eg、json
- 修改对应数据，点击“execute”
- 回到浏览器查看数据应该为修改后的response信息
Charles断点调试实例
