当前位置：首页 > news >正文

Charles安装到使用全流程教程

news 2025/8/26 7:51:30

1. 为什么要学 Charles

2. 安装与基本配置

3. 抓取 HTTPS 流量（不装证书全是乱码）

4. 电脑端抓包实战

4.1 过滤

4.2 定位前后端 Bug 示范

5. 移动端抓包（Android/iOS 通用流程）

5.1 前置条件

5.2 设置代理

5.3 安装移动端证书

5.4设置手机白名单

6. 进阶玩法

6.1 弱网模拟

6.2 断点改包

7. 常见问题速查

8. 小结与推荐

9.扩展：HTTP相关介绍

1. 为什么要学 Charles

日常测试过程中，我们经常会遇到以下场景：

页面白屏，不知道是前端还是后端的问题；
卡顿/超时，需要模拟弱网环境验证容错；
前端做了长度/格式限制，无法直接测试异常分支；
需要抓取 App 或小程序的 HTTPS 流量做接口回归。

以上痛点，用 Charles 都能搞定。

2. 安装与基本配置

系统	下载地址	备注
macOS	Download a Free Trial of Charles • Charles Web Debugging Proxy	dmg 一键拖拽安装
Windows	Download a Free Trial of Charles • Charles Web Debugging Proxy	exe 下一步安装
Linux	Snapcraft 或官方 tar.gz	命令行启动 `charles`

官方 30 天试用，过期后重启可继续试用（学习阶段够用）。

首次启动后，先做 3 件事：

安装根证书：Help → SSL Proxying → Install Charles Root Certificate。
信任根证书：系统钥匙串/证书管理器里，将 Charles 根证书设置为“始终信任”。
开启系统代理：Proxy → macOS/Windows Proxy，和下面图操作即可。

3. 抓取 HTTPS 流量（不装证书全是乱码）

两步走：

Proxy → SSL Proxying Settings → Add，Host 填 *，Port 填 443 → 一网打尽。
浏览器访问 https://chls.pro/ssl，下载并安装移动端证书（iOS/Android 略有差异，下文详述）。

4. 电脑端抓包实战

4.1 过滤

Proxy → Recording Settings → Include → Add，只留目标域名，如 tpshop.com。

注意：添加过滤时，Host里面存放的只能是IP或域名

4.2 定位前后端 Bug 示范

Bug 现象：个人信息页性别显示为“男”，后台数据库是“女”。

问题分析：

# 发现bug，无法确定是前端还是后端的问题？
bug:个人信息中性别信息前后台页面显示不一致
# 通过抓包去定位，怎么抓包？
1.浏览器输入访问服务器地址，回车发送请求，查看抓包工具中是否有数据包
2.确定需要抓取哪个页面的数据包【上述问题的数据源于登录成功的接口响应--> 个人信息】
3.抓取登录成功的数据包【进入登录页面，Charles中清空其他数据包，直接登录成功操作】
4.进入Charles查看当前服务器地址下面的第一个/第二个数据包基本就是登录的数据包
5.进一步查看数据包中请求体数据是否是页面输入的数据，如果是那就是登录的数据包
6.看响应体的数据，从中获取与性别有关的字段值【需要对比数据库看是否和数据库存储的一致】

抓包步骤：

清空 Charles 会话（左上角垃圾桶图标）。
浏览器登录 → 抓取登录接口 → 查看 Response JSON。
找到字段 gender = 1（男），与数据库 gender = 2（女）不符 → 后端 Bug。

口诀：

请求值 ≠ 页面输入 → 前端 Bug；

响应值 ≠ 数据库 → 后端 Bug；

请求响应都对，页面显示错 → 前端 Bug。

5. 移动端抓包（Android/iOS 通用流程）

5.1 前置条件

手机与电脑同一 Wi-Fi；
关闭 VPN/代理软件，避免端口冲突。

5.2 设置代理

查看 Charles 本机 IP：Help → Local IP Address。
手机 Wi-Fi → 长按当前网络 → 修改代理 → 手动 → 服务器填上一步 IP，端口 8888。

5.3 安装移动端证书

5.4设置手机白名单

手机设置代理后，无法访问外网时可以设置白名单

Android 7.0 以下：浏览器访问 chls.pro/ssl，直接安装即可。
Android 7.0+：需要 root 或把证书放到 /system/etc/security/cacerts，否则 HTTPS 抓包仍显示 <unknown>。
iOS：下载描述文件 → 设置 → 已下载描述文件 → 安装 → 通用 → 关于本机 → 证书信任设置 → 信任 Charles。

6. 进阶玩法

6.1 弱网模拟

Proxy → Throttle Settings：

3G：Bandwidth 1 Mbps，Latency 300 ms；
电梯网：Bandwidth 400 Kbps，Latency 1 s。

刷新页面，对比 Duration 字段，轻松复现超时闪退。

6.2 断点改包

右键请求 → Breakpoints → 再次触发 → Edit Request/Response，随意改字段。
典型场景：

手机号输入 12 位，前端限制 11 位，直接改请求体 mobile=138001380012，验证后端校验。
购物车商品数量 201，前端禁止输入，用断点把请求体 quantity=201 强行发出去，验证库存校验。

7. 常见问题速查

问题描述	解决方案
抓不到包	检查电脑/手机代理是否指向 Charles
HTTPS 显示 `<unknown>`	未安装或未信任证书；Android 7.0+ 需 root
iOS 15+ 无法安装描述文件	设置 → 通用 → VPN与设备管理 → 手动信任
抓包后网络不可用（外网断）	Proxy → Proxy Settings → 勾选 SOCKS Proxy
证书过期	Help → SSL Proxying → Reset Charles Root Cert

8. 小结与推荐

Charles == 测试工程师的瑞士军刀：

抓包定位 Bug，一张截图甩锅精准；
弱网断点，让测试覆盖度直接起飞；
支持 Windows / macOS / Linux，团队协作无门槛。

下一步，建议把常用域名、弱网模板、断点规则导出为 .xml，团队共享，效率翻倍！

9.扩展：HTTP相关介绍

协议：网络通信使用一套规则。【扩展计算机网络：网络七层模型（理论）、TCP/IP四层模型（实际）】

HTTP：超文本（文字、图片、音频、视频）传输协议，访问网络中资源常使用的一种协议。默认端口号：80

HTTPS：安全的超文本传输协议。默认端口号：443

HTTP包含：HTTP请求（请求行、请求头、请求体） + HTTP响应（响应行、响应头、响应体）

URL：表示网络资源的存储位置
- 构成：协议://域名或IP:端口号/资源路径?查询参数
- 必填：协议://域名或IP:端口号 如果是协议默认的端口号，可以不写
网络协议：计算机通信的规则
- 常见应用层协议：HTTP、SSH等
HTTP介绍
- 超文本传输协议：传输html页面文档信息的协议【默认端口80，安全传输用HTTPS协议，默认端口443】
- HTTP构成
  - HTTP请求：请求行、请求头、请求体
  - HTTP响应：响应行、响应头、响应体
- HTTP常见请求方法
  - GET：从服务器获取资源（查）
  - POST：在服务器新建一个资源（增）
  - PUT：在服务器更新资源（改）
  - DELETE：从服务器删除资源（删）
- 请求头：表示请求体数据类型
  - application/json： JSON数据格式
  - application/x-www-form-urlencoded：表单默认的提交数据格式
- 响应状态码
  - 2xx：成功【200】
  - 3xx：重定向【301、302】
  - 4xx：客户端错误【401、403、404】
  - 5xx：服务器端错误【500、503】