5. Charles 抓包在测试中怎么用？
Charles 是测试工程师定位前后端问题、移动端接口问题、弱网问题、HTTPS 请求问题时非常常用的抓包工具。很多同学会说“Charles 可以抓包”，但面试官真正想听的是：你抓包看什么？怎么判断问题在前端还是后端？怎么抓 HTTPS？怎么改请求和响应？怎么模拟弱网？怎么用抓包证据提 Bug？
抓包工具的价值不在于看到一堆请求，而在于把用户操作和接口链路对应起来。页面点了按钮，发了哪个接口？请求参数对不对？响应数据对不对？接口耗时多少？Header 有没有 Token？Cookie 有没有带上？返回字段和页面展示是否一致？这些才是 Charles 在测试中的实际作用。
一、Charles 适合哪些测试场景
1. 前后端问题定位
页面显示异常时，通过 Charles 看接口请求和响应。如果接口返回正确但页面展示错，多半是前端问题；如果接口返回就错，多半是后端问题或数据问题。
2. 移动端 App 抓包
App 测试中很多问题不能直接看接口，Charles 可以代理手机流量，抓取 App 请求。
3. HTTPS 接口分析
安装证书后，可以抓 HTTPS 请求，查看请求体和响应体。
4. 弱网测试
Charles 支持 Throttling，可以模拟 3G、4G、低速网络、高延迟，测试 App 或 Web 在弱网下的表现。
5. 请求修改和响应修改
通过 Breakpoints 或 Map Local，可以修改请求参数或响应内容，用于构造边界场景。
6. 接口耗时分析
可以查看接口耗时，定位页面慢是接口慢、资源慢还是前端渲染慢。
二、Charles 抓包基本流程
1. 配置代理
电脑端浏览器一般可以自动代理或手动设置代理。手机端需要把手机和电脑连到同一网络，然后手机 Wi-Fi 代理指向电脑 IP 和 Charles 端口。
2. 安装证书
如果要抓 HTTPS，需要在电脑或手机安装 Charles 根证书，并信任证书。否则只能看到 CONNECT，无法解密具体请求内容。
3. 开启 SSL Proxying
在 Charles 中对目标域名启用 SSL Proxying。可以针对指定域名开启，不建议对所有域名乱开。
4. 执行业务操作
比如登录、下单、支付、查询列表，观察对应接口请求。
5. 分析请求和响应
查看 URL、Method、Status、Request Headers、Request Body、Response Body、耗时。
三、抓包时重点看什么
1. URL 和请求方式
确认请求是否发到了正确接口，GET/POST/PUT/DELETE 是否符合接口文档。
2. 请求参数
看前端传的参数是否正确。很多 Bug 是前端传错字段、漏传字段、类型不对。
3. Header
关注 Token、Cookie、Content-Type、设备信息、版本号、渠道号。鉴权失败经常和 Header 有关。
4. 响应状态码
HTTP 200、401、403、404、500 都有不同含义。还要看业务 code。
5. 响应体
页面展示内容通常来自响应体。响应里没有的数据，页面一般也显示不出来。
6. 接口耗时
如果页面慢，要看是接口慢还是静态资源慢。接口耗时过长可能是后端查询慢、数据库慢或网络问题。
四、用 Charles 判断前端还是后端问题
这是面试最常见追问。
场景：页面订单状态显示错误
抓包后有三种情况：
- 接口响应里状态就是错的，页面只是照着显示。问题可能在后端或数据库；
- 接口响应正确，页面显示错误。问题大概率在前端字段映射或展示逻辑；
- 请求参数错误，比如传错订单号。问题可能在前端请求构造。
所以抓包不是为了截图，而是为了明确问题边界。
五、Charles 弱网测试怎么做
弱网测试常用于移动端和 H5。
关注点：
- 页面是否有 Loading；
- 请求超时后是否提示友好；
- 重试是否导致重复提交；
- 下单、支付等关键操作是否幂等；
- 网络恢复后数据是否同步；
- 图片和资源加载失败是否有兜底。
Charles Throttling 可以模拟带宽、延迟、丢包等网络条件。测试时要特别关注“用户重复点击”和“请求超时但服务端实际成功”的场景。
六、Charles 修改请求和响应
1. Breakpoints
可以拦截请求或响应，在发送前修改参数。例如把订单金额、商品数量、用户角色字段改成异常值，观察后端是否校验。
2. Map Local
可以把线上响应映射到本地文件，用于模拟服务端返回特定数据。
3. Rewrite
可以按规则修改请求或响应 Header、Body。
这些能力常用于构造异常场景，但测试时要注意不要污染真实环境。
七、完整案例：优惠券不展示问题定位
现象：用户领取优惠券后，页面优惠券列表不展示。
定位：
- 用 Charles 抓取优惠券列表接口；
- 检查请求是否带 Token；
- 检查 user_id 或用户身份是否正确；
- 查看响应体是否包含优惠券；
- 如果响应包含但页面不展示，前端问题；
- 如果响应不包含，查数据库是否有领取记录；
- 如果数据库有但接口没返回，后端查询条件问题；
- 如果数据库没有，领取接口或数据写入问题。
这个案例能体现抓包、数据库和问题定位结合。
八、Charles 常见问题
1. 抓不到手机请求
检查手机和电脑是否在同一网络，手机代理 IP 和端口是否正确，Charles 是否允许连接。
2. HTTPS 看不到内容
检查证书是否安装并信任，目标域名是否开启 SSL Proxying。
3. 只看到 CONNECT
通常是 HTTPS 未解密成功，需要安装证书和开启 SSL 代理。
4. App 抓不到包
可能 App 使用证书绑定、代理检测、私有协议或未走系统代理。
5. 抓包影响网络
代理工具本身可能影响请求速度，性能测试不要依赖抓包数据作为最终性能指标。
九、面试回答模板
如果面试官问“Charles 抓包在测试中怎么用”，可以这样回答：
我主要用 Charles 做前后端问题定位、移动端接口抓包、HTTPS 请求分析和弱网测试。比如页面展示异常时，我会抓对应接口，看请求参数、Header、响应状态码、业务 code 和响应体。如果接口返回正确但页面展示错误，通常定位到前端；如果接口返回就错误，再结合数据库和日志判断后端或数据问题。移动端测试时，我会配置手机代理和 Charles 证书抓 HTTPS 请求。弱网测试时，会用 Throttling 模拟慢网、高延迟，验证加载提示、超时处理和重复提交场景。
十、常见追问
追问：Charles 如何抓 HTTPS？
安装并信任 Charles 证书，然后对目标域名开启 SSL Proxying，手机端也需要安装并信任证书。
追问：接口返回正确但页面错误，怎么判断？
如果抓包响应字段正确，但页面展示错，优先怀疑前端字段映射、渲染或缓存问题。
追问：弱网测试重点测什么？
重点测加载提示、超时提示、重试机制、重复提交、数据一致性和网络恢复后的同步。
十一、练习清单
- 用 Charles 抓浏览器登录接口；
- 抓取手机 App 请求；
- 安装 HTTPS 证书；
- 开启 SSL Proxying；
- 分析请求 Header；
- 分析响应体字段；
- 模拟弱网访问页面；
- 用 Breakpoints 修改请求参数；
- 用抓包判断前后端问题；
- 整理一份带抓包证据的 Bug。
Charles 的核心价值是定位问题，而不是单纯看请求。能把抓包、接口、页面、数据库和日志串起来，你才算真正会用 Charles。
配套刷题：
