文中部分图片出自下面课程视频截图，有些不清晰请见谅。
https://www.bilibili.com/video/BV1mQ4y1N7dn/?share_source=copy_web&vd_source=d521b664e1113402904fa9336bd1d0ac目录
[1 教程目标与 Charles 简介](#1 教程目标与 Charles 简介)
[2.2 安装 Charles 根证书](#2.2 安装 Charles 根证书)
[4 Windows 与移动端代理](#4 Windows 与移动端代理)
[4.1 Windows 代理](#4.1 Windows 代理)
[6 HTTPS 抓包](#6 HTTPS 抓包)
[8 Breakpoints 断点调试](#8 Breakpoints 断点调试)
1 教程目标与 Charles 简介
Charles 是运行在客户端与目标服务器之间的 HTTP/HTTPS 调试代理。应用发出的请求先经过 Charles，再转发给服务器；服务器响应也沿相反路径返回，因此测试人员可以观察请求地址、参数、响应内容、耗时和数据量。
|-----------------------------------------------------------------------|
| 本教程解决的问题｜ 判断异常来自前端、后端、网络还是数据边界；模拟慢速或不稳定网络；在不改数据库和服务端代码的情况下构造异常响应。 |
- 能够使用 Charles 辅助分析前后端问题。
- 能够使用 Throttling 模拟弱网测试环境。
- 能够使用 Breakpoints 修改请求或响应，构造异常测试场景。
2 安装、证书与基础配置
2.1 安装与启动
|------------------------------------|
| 典型问题现象｜ 无法开始抓包，或安装后不知道从哪里进入配置。 |
处理方法： 从给出的官方渠道获取安装程序并完成安装；激活相关内容仅沿用所列页面，不在本文补充未经验证的授权参数。
|--------------------------------------------------------|
| 验证方式｜ Charles 能正常启动，主界面可显示 Structure/Sequence 等视图。 |
| 注意事项｜ 软件版本不同可能导致菜单名称或位置略有差异，以当前界面为准。 |
- 从记录的官网下载入口获取软件。
- 按安装向导完成安装并启动 Charles。
- 如需处理授权，参考记录的页面和组织规定，不使用来源不明的激活信息。
图 2.1-1 操作截图
图 2.1-2 操作截图
图 2.1-3 操作截图
2.2 安装 Charles 根证书
HTTPS 会对传输内容加密。Charles 要展示明文请求与响应，需要让系统或移动设备信任 Charles 生成的根证书，再由 Charles 为目标站点动态生成调试证书。证书解决的是"能看到连接但看不到明文内容"的问题。
|------------------------------------------------|
| 典型问题现象｜ HTTPS 请求显示为加密隧道、内容不可读，或出现证书不受信任提示。 |
处理方法： 按 Charles 的证书安装入口安装根证书，并在系统证书管理位置确认其已存在。随后还需针对目标域名启用 SSL Proxying，证书安装与 SSL Proxying 缺一不可。
|--------------------------------------------------------------------------------|
| 验证方式｜ 重新访问目标 HTTPS 页面后，可在 Charles 中展开请求并看到可读的 Headers、请求体或响应体；客户端不再报证书不可信。 |
| 注意事项｜ 仅在受控测试环境安装并信任调试证书。测试完成后按组织安全规范停用或移除，不要在生产设备上长期保留。 |
图 2.2-1 操作截图
图 2.2-2 操作截图
查看证书是否安装成功：
图 2.2-3 操作截图
2.3 基础设置与中文乱码
如果 Charles 界面或抓取内容中的中文显示为乱码，首先应区分"软件进程编码"与"响应本身编码"。明确给出的处理方式是修改 Charles.ini 的 JVM 启动参数。
|------------------------------------------------------------|
| 配置项｜ 在 Charles.ini 文件中添加：vmarg.5=-Dfile.encoding=UTF-8 |
- 完全退出 Charles。
- 找到 Charles.ini，并在已有 vmarg 配置区域添加上述一行。
- 保存文件后重新启动 Charles。
- 重新抓取包含中文的同一接口，对比修改前后的显示。
|-----------------------------------------------------------------------------------------|
| 验证方式｜ 界面及响应查看区域中的中文恢复正常；若仍乱码，应继续检查服务端 Content-Type/charset 与实际响应字节是否一致，而不是重复叠加启动参数。 |
设置:
图 2.3-1 操作截图
图 2.3-2 操作截图
图 2.3-3 操作截图
乱码问题:
图 2.3-4 操作截图
在Charles.ini文件中添加vmarg.5=-Dfile.encoding=UTF-8:
图 2.3-5 操作截图
图 2.3-6 操作截图
再次重启：
图 2.3-7 操作截图
3 界面组件与连接授权
3.1 常用组件
Structure 适合按主机和路径定位接口，Sequence 适合按时间顺序观察一次操作触发的全部请求。选中会话后，可从 Overview、Request、Response 等区域检查请求方法、状态、参数、内容及耗时。
图 3.1-1 操作截图
图 3.1-2 操作截图
图 3.1-3 操作截图
图 3.1-4 操作截图
3.2 允许新客户端连接
|----------------------------------------------------------------|
| 典型问题现象｜ 另一台电脑或手机已配置代理，但请求无法进入 Charles；Charles 可能弹出未授权连接提示。 |
处理方法： 在相关设置中勾选 "Prompt to allow unauthorized connections"。新客户端首次连接时核对来源 IP，并在确认是测试设备后授权。
|-----------------------------------------------------|
| 验证方式｜ 客户端发起网页或接口请求后，Charles 会出现该设备产生的会话记录。 |
| 注意事项｜ 不要无条件允许陌生 IP。授权前确认设备和测试网络，避免把调试代理暴露给无关终端。 |
图 3.2-1 操作截图
图 3.2-2 操作截图
4 Windows 与移动端代理
4.1 Windows 代理
当被测程序与 Charles 位于同一台 Windows 电脑时，本机代理通常可由 Charles 直接接管；当被测电脑与 Charles 不在同一台机器时，需要在被测电脑上把代理服务器指向运行 Charles 的电脑。
- 确认两台设备网络互通。
- 在被测 Windows 的代理设置中填写 Charles 主机的局域网地址；端口以 Charles 当前配置为准。
- 保存代理设置并在 Charles 中处理首次连接授权。
- 访问一个可识别的测试页面，确认会话出现。
如果所抓的包的电脑不是和Charles在同一台机器上，那我们需要去做这个Windows代理操作，在本地的话默认是开启的
图 4.1-1 操作截图
图 4.1-2 操作截图
4.2 移动端代理（iOS/Android）
移动端抓包的核心条件是：手机与 Charles 主机处于可互通网络；手机 Wi-Fi 代理指向 Charles 主机；Charles 授权该连接；抓取 HTTPS 时，手机还需安装并信任 Charles 证书。列出了 iOS、Android 的配置入口截图，但未完整记录不同系统版本的逐项参数。
- 让手机与 Charles 主机连接同一测试网络。
- 在手机当前 Wi-Fi 的代理配置中填写 Charles 主机地址和当前监听端口。
- 回到 Charles 接受连接授权。
- 先用 HTTP 或普通网页确认链路，再按 HTTPS 章节配置证书与 SSL Proxying。
|----------------------------|
| 典型问题现象｜ 手机配置代理后完全无法联网。 |
处理方法： 依次检查 IP 是否填错、端口是否与 Charles 一致、网络是否隔离、系统防火墙是否阻断，以及 Charles 是否拒绝了授权。
|--------------------------------------------------------------------------|
| 验证方式｜ 手机发起请求后 Charles 有新会话；关闭代理后手机恢复原网络状态。 |
| 注意事项｜ Android/iOS 对用户证书的信任策略可能随系统和应用变化；部分应用存在证书固定机制，不能仅凭安装证书断言一定可抓取。 |
图 4.2-1 操作截图
图 4.2-2 操作截图
5 用抓包结果分析前后端问题
抓包分析的价值不只是"看到接口"，而是把页面现象拆成可验证的证据链：用户操作是否发出请求、请求是否符合约定、服务器是否响应、响应是否符合业务约定、前端是否正确处理。
- 复现问题前清空或标记会话，记录操作时间和步骤。
- 定位与操作对应的接口，确认请求方法、路径、参数和请求体。
- 检查响应状态、业务字段、数据结构和耗时。
- 对照前端页面表现，判断请求未发出、参数错误、后端异常、返回数据异常或前端处理异常。
- 保存关键会话或截图，形成可复现的缺陷证据。
|--------------|----------------|--------------------|
| 抓包证据 | 更可能的方向 | 后续处理 |
| 没有对应请求 | 前端事件、条件判断或网络链路 | 检查按钮事件、控制台与代理链路 |
| 请求参数与约定不符 | 前端组装或接口约定 | 保留请求证据并核对接口文档 |
| 服务器返回错误或异常结构 | 后端处理或数据状态 | 携带请求标识、响应和时间交给后端定位 |
| 响应正确但页面异常 | 前端解析、状态或异常提示 | 用同一响应复现并检查前端处理 |
图 5-1 操作截图
图 5-2 操作截图
图 5-3 操作截图
图 5-4 操作截图
6 HTTPS 抓包
HTTPS 抓包需要同时满足信任证书与启用 SSL Proxying。前者让客户端信任 Charles 动态签发的调试证书，后者告诉 Charles 对指定目标执行解密代理。
- 确认 Charles 根证书已正确安装并受信任。
- 在 SSL Proxying 配置中添加需要分析的目标主机或从目标会话启用该功能。
- 重新发起目标 HTTPS 请求。
- 检查 Request/Response 是否已经由不可读的加密连接变为可读内容。
|------------------------------------------|
| 典型问题现象｜ 证书已安装，但依然只能看到 CONNECT 或加密内容。 |
处理方法： 检查目标域名是否已启用 SSL Proxying；确认命中的实际域名与配置一致；移动端还要确认系统已信任该证书。
|----------------------------------------------------|
| 验证方式｜ 能查看目标接口的请求头、请求体、响应头与响应体，并且应用端没有证书错误。 |
| 注意事项｜ 仅对授权的测试目标解密；涉及账号、令牌或个人信息时控制截图和会话文件的传播范围。 |
图 6-1 操作截图
图 6-2 操作截图
图 6-3 操作截图
配置完之后再抓包：
图 6-4 操作截图
7 流量与弱网测试
7.1 流量观察
流量视图可帮助发现体积过大的响应、重复请求和加载顺序问题。分析时应把数据量、请求次数和耗时结合起来，不要只用单次总时长下结论。
图 7.1-1 操作截图
图 7.1-2 操作截图
7.2 弱网测试
弱网测试用于验证系统在响应变慢、带宽受限或网络体验恶化时的加载状态、超时、重试和错误提示。以访问百度为基准：正常访问后开启限制，再次访问明显变慢甚至无法及时展示。
- 在未限速状态下完成一次基线访问，记录页面是否正常、主要请求和大致耗时。
- 进入 Throttling/流量限制设置，选择或配置本次需要验证的网络条件。原附件未明确给出具体数值，因此以测试方案和当前界面为准。
- 启用限制后重复完全相同的操作。
- 观察加载提示、按钮可用性、超时提示、重试行为、重复提交以及恢复网络后的状态。
- 关闭限制，再次访问确认环境恢复。
|--------------------------------------------------------------------|
| 验证重点｜ 页面不能长期无反馈；错误信息应可理解；用户重复点击不应造成重复业务数据；网络恢复后页面应能继续、重试或明确引导。 |
| 测试边界｜ 不同网络参数代表不同风险。附件未给出可核实的带宽、延迟、丢包参数，本文只补充测试思路，不虚构统一阈值。 |
图 7.2-1 操作截图
正常启动，去访问百度
图 7.2-2 操作截图
设置
图 7.2-3 操作截图
设置完之后，再次访问，根本就出不来，时间也变慢了许多
图 7.2-4 操作截图
8 Breakpoints 断点调试
Breakpoints 可以在请求发送给服务器前暂停并修改请求，也可以在响应返回前端前暂停并修改响应。它解决的是"构造异常数据成本高"的问题，例如无需真的在数据库中增加一万名员工，也能把接口返回的人数改成 10000，检查页面是否溢出、卡顿或显示异常。
|-----------------------------------------------------|
| 典型问题现象｜ 正常数据下页面无异常，但缺少空数据、超大数字、缺字段或异常组合数据的测试条件。 |
处理方法： 对目标接口启用 Breakpoints，在暂停点识别当前阶段，修改需要验证的请求或响应字段后执行放行。每次只改变少量变量，便于判断结果。
|-------------------------------------------------------------|
| 验证方式｜ 前端收到修改后的数据并出现预期的容错提示、空状态或边界展示；关闭断点后同一接口恢复正常。 |
| 注意事项｜ 修改内容只影响本次代理链路，不代表后端数据已经改变。避免误改认证字段或向真实生产服务提交危险请求。 |
- 先正常访问一次，准确定位目标接口。
- 对目标请求启用 Breakpoints。
- 再次执行同一业务操作，等待 Charles 暂停请求或响应。
- 确认当前是 Request 还是 Response 阶段，再修改目标内容。
- 点击 Execute 放行；如流程再次暂停，检查另一阶段后继续放行。
- 回到前端观察结果，并保存修改前、修改内容和页面结果。
- 测试结束后关闭断点并做一次正常回归。
对于断点调试的作用，可以通过Charles修改前后端数据，或者说是后端返回给前端的数据，或前端递交给后端的数据，我们去修改它，去看我们的系统有没有对其做出一个设置或判断，从而找到开发漏洞。
9 小区物业管理系统案例
9.1 案例目标
在小区物业管理系统中选择车位收费管理查询作为断点测试入口：删除查询结果后观察前端是否提供空数据提示；随后用相同思路删除房间号，检查页面对关键字段缺失的处理。
9.2 案例一：删除车位收费查询结果
- 先完成一次正常查询，确认接口和正常页面结果。
- 对该查询接口启用 Breakpoints，再次发起查询。
- Charles 暂停后按流程执行，进入可修改的响应阶段。
- 删除查询结果数据并继续执行。
- 返回前端观察空列表、提示信息和页面稳定性。
|-------------------------------------------------|
| 结果｜ 返回前端后出现异常错误，说明页面对空结果或被修改后的结果缺少充分的兼容与提示。 |
建议处理方法： 前端应把"请求失败""无数据""字段缺失"区分为不同状态；后端应保持响应结构稳定并清晰表达结果。修复后使用相同断点数据复测，确认页面显示明确空状态且无脚本异常。
先访问一次之后，选择breakpoints，之后再次访问
打上断点之后，第二次访问完会跳转到Charles
点击完execute之后，会再次回到Charles
我们把查询到的数据进行删除，实现测试
返回前端，发现出现异常错误。
9.3 案例二：删除房间号
- 沿用已定位的相关接口与断点流程。
- 在响应中删除房间号字段或其值。
- 放行响应并返回前端页面。
- 观察列表、详情、校验提示和后续操作是否仍可用。
|-------------------------------------|
| 结果｜ 页面没有操作提示，暴露出关键字段缺失时反馈不足的问题。 |
建议处理方法： 明确房间号是否为必填字段；后端在数据层保证必填字段完整，前端对缺失值提供占位、禁用依赖操作或展示可理解的错误提示。修复后再次使用同样的异常响应验证。
同样方法，去删除房间号，返回前端页面，发现也没有操作提示，说明我的系统有待改进。
10 测试完成后的检查与总结
- 关闭 Throttling，确认网络恢复到基线状态。
- 关闭所有 Breakpoints，避免后续请求持续被暂停。
- 恢复 Windows 或移动端代理设置。
- 按安全要求处理 Charles 会话、截图和证书。
- 记录问题现象、请求证据、修改内容、前端结果、修复建议及复测结果。
Charles 的核心价值是把不可见的网络交互变成可验证证据，并通过代理能力低成本构造测试条件。使用时应始终围绕"问题现象---证据---处理方法---验证结果"形成闭环，同时控制证书、敏感数据和测试环境边界。