Charles抓包工具

目录

一、Charles的简介

1、Charles是什么？

2、Charles工作原理

3、Charles主要功能

4、Charles的优点（与fiddler比较）

二、Charles安装与配置

1、Charles安装

2、Charles组件介绍

3、Charles设置

Charles代理设置

Charles访问设置

4、Charles客户端设置

客户端 -- Windows代理设置

客户端 -- MacOS代理设置

客户端 -- iOS代理设置

客户端 -- Android代理设置

三、Charles实战

1、问题分析（前端？后台？）

2、HTTPS抓包

Windows客户端证书配置

 Charles https代理配置

macOS 证书配置

iOS证书配置

3、弱网测试

Charles流量配置

Charles弱网测试实例

4、断点调试

Charles断点配置的步骤

Charles断点调试实例

---

Charles抓包工具的作用：

1. 区分前端or后端的代码问题
2. 模拟弱网测试环境
3. 用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断点调试实例

 B站视频链接：软件测试教程Charles抓包工具测试实战_哔哩哔哩_bilibili