4、Charles入门：安装配置与核心功能实战
Charles 这工具，说白了就是 HTTP 抓包界的瑞士军刀。我入行头三年全靠 Fiddler，后来转到 macOS 平台才发现 Charles 才是真香。今天咱们就把安装、SSL 代理、Map Remote、Rewrite 和限速这几个核心功能一次性讲透。
本章核心能力：学完你就能在 10 分钟内搭好抓包环境，用 Map Remote 把线上接口切到本地调试，用 Rewrite 修改请求响应，还能模拟弱网环境复现 Bug。
4.1 安装与基础配置
Charles 支持 Windows、macOS、Linux。我个人习惯用 macOS 版，但三平台操作逻辑几乎一样。
4.1.1 下载与安装
- 官网下载对应版本，安装包不到 50MB
- Windows 一路 Next，macOS 拖到 Applications 文件夹
- 首次启动会提示网络权限，点允许
小技巧：Charles 是付费软件，但 30 天试用期完全够你学完本课程。试用期每次启动会等 10 秒，别急。
4.1.2 代理设置
Charles 本质是个中间人代理。启动后默认监听 8888 端口。你需要让手机或浏览器把流量指向它。
# 浏览器代理设置（以 Chrome 为例）
设置 → 系统 → 打开代理设置
手动代理 → HTTP 代理：127.0.0.1:8888
勾选「对本地地址绕过代理」手机端更简单：连上同一 Wi-Fi，设置 HTTP 代理为电脑 IP + 8888 端口。我在项目中经常帮同事排查手机 App 接口问题，这一步是基础。
4.2 SSL 代理配置（抓 HTTPS 的关键）
现在大部分接口都是 HTTPS。Charles 默认只能看到加密乱码。想解密？得装它的根证书。
4.2.1 安装 Charles 根证书
- 菜单栏：Proxy → SSL Proxying Settings
- 勾选 Enable SSL Proxying
- 点击 Add，Host 填
*，Port 填443（抓所有 HTTPS） - Help → SSL Proxying → Install Charles Root Certificate
注意：macOS 上装完证书后，记得在钥匙串里把 Charles 证书设为「始终信任」。否则 Safari 会报证书错误。我当初就因为这个卡了半小时。
4.2.2 手机端证书安装
抓手机 App 的 HTTPS 包，需要把证书装到手机上。
# iOS 步骤
1. 手机 Safari 访问 http://chls.pro/ssl
2. 下载描述文件 → 设置 → 通用 → VPN与设备管理 → 安装
3. 设置 → 通用 → 关于本机 → 证书信任设置 → 开启 Charles 开关
# Android 步骤
1. 手机浏览器访问 http://chls.pro/ssl
2. 下载 .crt 文件
3. 设置 → 安全 → 从存储设备安装证书
4. 选择下载的证书文件避坑指南：Android 7.0 以上默认不信任用户证书。我曾经调试一个银行 App，死活抓不到包，后来发现是 App 用了 SSL Pinning。这种情况要么 root 手机把证书装到系统分区，要么用 VirtualXposed 等工具绕过。
4.3 Map Remote 功能（线上接口切本地）
Map Remote 是我最常用的功能之一。说白了就是把某个请求的响应，替换成另一个地址的响应。比如线上接口返回数据有 Bug，我想用本地修复后的数据测试前端。
4.3.1 配置步骤
- Tools → Map Remote → 勾选 Enable Map Remote
- 点击 Add，配置映射规则
# 映射规则示例
Map From: https://api.example.com/v1/user/info
Map To: http://localhost:3000/mock/user.json
# 匹配条件
Protocol: https → http
Host: api.example.com → localhost:3000
Path: /v1/user/info → /mock/user.json配置好后，Charles 会自动把线上请求转发到本地。前端代码一行都不用改。我在一次大促前夜发现商品接口返回字段缺失，就是用这招快速验证了修复方案。
注意：Map Remote 只改请求目标地址，不改请求内容。如果本地接口需要特定的请求头或参数，记得在本地 Mock 服务里处理好。
4.4 Rewrite 功能（修改请求与响应）
Rewrite 比 Map Remote 更灵活。它能直接修改请求或响应的任意部分：URL、Header、Body、状态码。我经常用它来模拟各种异常场景。
4.4.1 常见场景
| 场景 | Rewrite 规则 | 用途 |
|---|---|---|
| 修改响应状态码 | Response → Status → 200 → 500 | 测试前端错误处理 |
| 添加请求头 | Request → Header → Add → X-Debug: true | 触发服务端调试模式 |
| 替换响应 Body | Response → Body → Find: "price":100 → Replace: "price":0 | 测试 0 元订单场景 |
| 修改 URL 参数 | Request → URL → Find: page=1 → Replace: page=2 | 测试分页逻辑 |
4.4.2 配置示例
# 模拟接口返回 500 错误
Tools → Rewrite → Enable Rewrite
点击 Add → 选择 Response
Type: Status
Match: 200
Replace: 500
# 添加调试请求头
点击 Add → 选择 Request
Type: Header
Match: (空)
Replace: X-Debug: true
Action: Add注意：Rewrite 规则是全局生效的。如果你只想对特定域名生效，记得在 Location 里设置匹配条件。我曾经不小心把整个百度首页的响应改成了 500，结果同事以为公司网络炸了。
4.5 限速模拟（弱网环境测试）
用户网络环境千差万别。2G、3G、高延迟、丢包……这些场景不测一遍，上线后大概率出问题。Charles 的限速功能可以帮你模拟这些情况。
4.5.1 开启限速
Proxy → Throttle Settings → Enable Throttling
预设方案：
- GPRS（2G）：下载 50 kbps，上传 20 kbps，延迟 500ms
- EDGE（2.5G）：下载 100 kbps，上传 50 kbps，延迟 300ms
- 3G：下载 780 kbps，上传 330 kbps，延迟 200ms
- 4G：下载 5000 kbps，上传 3000 kbps，延迟 100ms4.5.2 自定义限速参数
| 参数 | 说明 | 推荐值（弱网） |
|---|---|---|
| Bandwidth | 带宽（kbps） | 下载 100 / 上传 50 |
| Utilisation | 带宽利用率（%） | 80% |
| Round Trip Time | 往返延迟（ms） | 500ms |
| MTU | 最大传输单元（字节） | 1500 |
| Reliability | 可靠性（%） | 90%（模拟 10% 丢包） |
个人经验：我一般会同时开启限速和丢包。很多前端开发者只测带宽，忽略了丢包。实际上丢包会导致 TCP 重传，用户体验比单纯慢更差。设置 Reliability 为 80%，你就能看到页面加载时各种超时和重试。
4.6 本章知识体系
下面这张图帮你理清 Charles 四个核心功能的关系和适用场景。
4.7 实战小练习
光看不练假把式。我建议你立刻动手做这三件事：
- 打开 Charles，抓取百度首页的 HTTPS 请求，确认证书安装成功
- 用 Map Remote 把某个图片请求映射到本地一张小图片，看页面变化
- 开启限速到 GPRS 模式，刷新一个你常用的网站，感受下慢网体验
记住：Charles 只是个工具，真正值钱的是你用它解决问题的能力。多动手，多踩坑，慢慢你就知道什么时候该用 Map Remote，什么时候该用 Rewrite。