01-Debug调试@网络-Charles网络抓包工具：从原理到实践

没有故事的Zhang同学
6 阅读24分钟

📋 目录

一、概述与历史演进

1.1 工具简介

Charles 是一款面向 Windows、macOS、Linux 的 Web 调试代理（Web Debugging Proxy） 应用，由 Karl von Randow 创建，自 2002 年发布至今，由 XK72 维护 [1][2]。其核心能力包括：拦截、记录、修改与重放 HTTP/HTTPS 流量，支持带宽限速、断点调试、请求/响应重写与本地/远程映射，被广泛用于 Web 与移动端接口调试、前后端联调、弱网与异常场景测试 [1][3][4]。

1.2 历史与版本脉络

时期事件
2002Charles 首次发布，以 Java 实现，跨平台运行
3.x引入 SSL Proxying（HTTPS 中间人解密）、各平台根证书安装流程
3.10+Charles 根证书改为每台安装独立生成，需重新信任
3.11.4+支持 iOS App Transport Security (ATS)
2018Charles for iOS 上架 App Store，支持在设备端抓包 [2]
2024–20254.6.x 稳定版；Charles 5.0 发布，新 UI、Apple Silicon/Windows on ARM、新会话格式 .chlz [2][5]

1.3 典型应用场景

  • 接口调试：查看请求 URL、Method、Header、Body 与响应状态、Body（JSON/XML 等），定位参数与返回错误。
  • HTTPS 明文查看：通过 SSL Proxying 将加密流量解密为明文，便于分析 API 内容。
  • 弱网与限速：Throttling 模拟带宽、延迟、丢包，验证加载、超时与降级逻辑。
  • Mock 与联调：Map Local / Map Remote / Rewrite 用本地或备用环境响应替代线上，或修改请求/响应内容。
  • 断点调试：在请求发出前或响应返回前暂停，修改后再放行或中止，用于测试异常与边界。

二、核心原理

2.1 代理与中间人

Charles 作为 HTTP/HTTPS 代理 运行在本机（默认端口 8888）。客户端（浏览器、App）将代理设置为 127.0.0.1:8888 后，发往目标的 HTTP(S) 请求会先发到 Charles，再由 Charles 转发到真实服务器；响应同样经 Charles 再回到客户端。因此 Charles 处于「客户端 ↔ Charles ↔ 服务端」的中间人位置，可完整查看与修改双向流量 [3][4]。

flowchart LR
    subgraph 客户端
        C[Browser / App]
    end
    subgraph 代理层
        P[Charles :8888]
    end
    subgraph 服务端
        S[Origin Server]
    end
    C -->|1. 请求| P
    P -->|2. 转发请求| S
    S -->|3. 响应| P
    P -->|4. 返回响应| C

2.2 数据流与记录

  • 记录：Charles 在转发前后记录请求与响应的 URL、方法、头、体；对 HTTPS 需开启 SSL Proxying 并安装根证书后才能解密并记录明文。
  • 结构视图：按 Host 或 Path 聚合展示会话，便于按接口查看；支持搜索、过滤与导出会话（.chls/.chlz）。
  • 证书与解密：HTTPS 解密依赖「客户端信任 Charles 根证书 + Charles 对指定 Host 启用 SSL Proxying」，详见第三节。

三、HTTPS 与 SSL 代理

3.1 为何 HTTPS 需要特殊处理

HTTPS 在 TCP 之上建立 TLS/SSL 加密通道，端到端加密后，代理若只做「透传」，无法看到应用层明文。Charles 要查看或修改内容，必须作为 TLS 中间人：与客户端建立一条 TLS 连接，与服务器建立另一条 TLS 连接，在中间以明文处理数据 [4][6]。

3.2 SSL Proxying（中间人）原理

Charles 的 SSL Proxying 本质是受控的「中间人」行为 [6][7]：

  1. 客户端 → Charles：客户端发起 HTTPS 请求到 host:443，因系统代理指向 Charles，TCP 连接实际建到 Charles；TLS 握手时，Charles 不转发服务器真实证书，而是用 Charles 根证书签发一张「伪造」的站点证书（Subject 等与目标 host 匹配），下发给客户端。
  2. 客户端验证：客户端校验证书链。若未安装/信任 Charles 根证书，会报「不受信任的 CA」；安装并信任 Charles 根证书后，客户端认为该站点证书合法，与 Charles 完成 TLS 握手，后续应用层数据以 Charles 与客户端协商的密钥加密。
  3. Charles → 服务端：Charles 再以真实客户端身份向目标服务器发起 HTTPS，使用服务器真实证书完成 TLS，获得与服务器的明文通信。
  4. 结果：Charles 同时拥有「客户端 ↔ Charles」与「Charles ↔ 服务端」的解密能力，可记录、修改请求与响应后再转发。
    简要对应关系 [16]：客户端向服务器发起 HTTPS 请求 → Charles 拦截并伪装成客户端向服务器请求 → 服务器返回 CA 证书给「客户端」（实为 Charles）→ Charles 用本地根证书签发一张与目标站点匹配的证书，替换后发给客户端 → 客户端用 Charles 公钥加密对称密钥发给 Charles → Charles 用私钥解密得到对称密钥，再用服务器公钥加密发给服务器 → 此后 Charles 同时持有两端密钥，可解密、修改后再转发。关键前提：客户端必须信任 Charles 根证书，否则会报证书不受信任。
sequenceDiagram
    participant C as 客户端
    participant P as Charles
    participant S as 服务器

    C->>P: 建立连接 (代理)
    P->>C: 返回 Charles 签发的站点证书
    Note over C: 校验证书（需信任 Charles 根证书）
    C->>P: 加密请求 (客户端↔Charles 密钥)
    P->>S: 建立 TLS，获取服务器证书
    P->>S: 加密请求 (Charles↔服务器 密钥)
    S->>P: 加密响应
    P->>P: 解密并可选修改
    P->>C: 用客户端密钥加密后返回

3.3 配置要点（官方建议 [6][7][8]）

  • 启用 SSL Proxying：Proxy → SSL Proxying Settings，勾选 Enable SSL Proxying，并在列表中加入要解密的主机（Host + Port，如 *:443 或 api.example.com:443）。不在此列表中的 Host，Charles 对 HTTPS 只做透传，不解密。
  • 按地址启用 SSL Proxying（重要）：若只做了全局「Enable SSL Proxying」却未把具体要抓的域名加入列表，该域名的 HTTPS 仍会以密文显示。操作方式二选一即可 [15][16]：
    • 方式一：在 Charles 会话列表（Structure/Sequence）中，右键目标 Host 或该域名下的某条请求 → SSL Proxying → Enable SSL Proxying，Charles 会自动将该 Host:443 加入 SSL Proxying 列表。
    • 方式二：Proxy → SSL Proxying Settings → Add，手动填写 Host（如 api.example.com）与 Port（如 443）。
      因此：具体的 HTTPS 抓包，必须在「被抓包的那个地址」上启用 SSL Proxying，否则无法看到明文。
  • 安装并信任根证书：Help → SSL Proxying → Install Charles Root Certificate（或 Save 后手动导入）。安装后需在系统/浏览器中将该证书设为受信任的根 CA（如 macOS 钥匙串中设为「始终信任」），否则客户端仍会报错。
  • 关闭解密：若不需要查看 HTTPS 明文，可在 Proxy Preferences 中关闭 SSL Proxying，Charles 将直接转发 TLS 流量，不进行解密与记录明文。

3.4 HTTPS 解密流程（算法级描述）

算法概念：Charles 作为 TLS 中间人

1. 客户端向 host:443 发起 TLS ClientHello（因系统代理，连接至 Charles）。
2. Charles 向真实服务器发起 TLS 连接，完成与服务器的握手，获得服务器证书与会话密钥 K2。
3. Charles 用本地 Charles 根证书的私钥，为「host」签发一张新证书 cert_fake，Subject 等与服务器证书一致或兼容。
4. Charles 向客户端返回 cert_fake，客户端用已信任的 Charles 根证书验证 cert_fake，通过则与 Charles 完成握手，得到客户端与 Charles 的会话密钥 K1。
5. 客户端发送的 HTTPS 请求用 K1 加密，Charles 用 K1 解密得到明文请求；Charles 用 K2 加密后转发给服务器。
6. 服务器响应用 K2 加密，Charles 用 K2 解密得到明文响应；Charles 可修改后再用 K1 加密返回客户端。
7. 因此 Charles 在「请求」与「响应」两段均具备明文读写能力，用于记录、Breakpoint 修改、Rewrite、Map Local 等。

3.5 证书与安全注意

  • Charles 根证书拥有对任意域签发证书的能力，一旦被信任，可被用于窃听或篡改 HTTPS。因此仅应在本机调试环境安装，不要在生产或个人敏感环境中长期信任。
  • 从 Charles 3.10 起，根证书为每台机器/每次安装独立生成，旧设备导出的根证书不能直接用于新环境，需在新环境重新安装并信任 [8]。

3.6 HTTPS 抓包配置处理（操作清单）

要成功对 HTTPS 流量进行抓包并看到明文，必须同时满足 Charles 端 与 客户端/本机 两处配置；缺一不可。下面给出统一的操作清单与排查要点。

3.6.1 Charles 端必须完成的配置

顺序操作说明
①打开 Proxy → SSL Proxying Settings若未打开过，先进入该窗口
②勾选 Enable SSL Proxying不勾选则所有 HTTPS 仅透传，不解密
③在 SSL Proxying Locations 列表中为要抓的域名添加条目Host：填域名或 *（如 * 表示任意；api.example.com 表示仅该域名）；Port：一般为 443。未在列表中的 Host 不会被解密，界面中仍显示为密文

按地址启用的两种方式（任选其一即可）：

  • 方式 A（推荐）：抓包时在会话列表（Structure / Sequence）中，右键目标 Host 或该域名下任意一条请求 → SSL Proxying → Enable SSL Proxying，Charles 会自动把该 Host:443 加入上述列表。
  • 方式 B：在 SSL Proxying Settings 窗口点击 Add，手动填写 Host 与 Port（443）；可用 * 表示任意主机。

3.6.2 客户端/本机必须完成的配置

抓包对象是谁，就要在谁的系统或环境中安装并信任 Charles 根证书：

抓包对象证书安装与信任位置
本机浏览器本机：Help → SSL Proxying → Install Charles Root Certificate；安装后在系统钥匙串/证书存储中将该证书设为受信任的根 CA（如 macOS 钥匙串访问 → 找到 Charles Proxy CA → 展开「信任」→ 使用此证书时：始终信任）
iOS 真机 App/浏览器手机：Safari 打开 chls.pro/ssl 安装描述文件；设置 → 通用 → 关于本机 → 证书信任设置 中对该 Charles 证书启用「完全信任」
Android / HarmonyOS 设备设备浏览器打开 chls.pro/ssl 安装证书；Android 7+ 自研 App 还需在工程中配置 Network Security Configuration 信任用户证书（见 §6.3）
iOS 模拟器Charles：Help → SSL Proxying → Install Charles Root Certificate in iOS Simulators（需先关闭模拟器再执行）

未安装或未信任根证书时，客户端会报「证书不受信任」「连接不是私密连接」等错误，HTTPS 握手失败，无法抓包。

3.6.3 配置自检与常见问题

  • Charles 里能看到请求，但 Response 是乱码或显示为加密数据
    → 说明代理已生效，但未对该 Host 启用 SSL Proxying。按 3.6.1 在 SSL Proxying Locations 中添加该 Host:443，或右键该请求/Host → Enable SSL Proxying。

  • 客户端报证书错误、无法打开页面或 App 请求失败
    → 说明未在该客户端环境安装或信任 Charles 根证书。按 3.6.2 在对应设备/本机完成安装并在「证书信任设置」或系统凭据中设为信任。

  • *已添加 :443 仍有个别域名看不到明文
    → 少数情况下需确认该请求确实走了 Charles 代理（系统/App 代理指向 Charles）；若为自研 App，检查是否开启了证书锁定（Certificate Pinning），若开启则需在调试版本中关闭或信任 Charles。

  • 换电脑或重装 Charles 后，手机/本机之前装的证书报错
    → Charles 3.10+ 根证书每台机器独立生成，需在当前运行 Charles 的电脑上重新执行「Install Charles Root Certificate on a Mobile Device」，并在设备上重新访问 chls.pro/ssl 安装新证书并信任。

3.6.4 配置处理流程简图

flowchart LR
    subgraph Charles端
        A1[Enable SSL Proxying]
        A2[Add Host:443 或 右键启用]
    end
    subgraph 客户端
        B1[安装 Charles 根证书]
        B2[信任该证书]
    end
    A1 --> A2
    B1 --> B2
    A2 --> C[HTTPS 可解密]
    B2 --> C

总结：HTTPS 抓包 = Charles 端对目标 Host 启用 SSL Proxying + 在抓包对象所在环境安装并信任 Charles 根证书；两者都做对后，即可在 Charles 中看到该域名的请求/响应明文并进行修改、断点等操作。

四、功能体系与工具链

4.1 功能总览

功能说明典型用途
Proxy 记录自动记录经 Charles 的 HTTP(S) 请求与响应日常抓包、接口排查
SSL Proxying对指定 Host 解密 HTTPS，以明文展示与修改查看/改写 API 内容
Breakpoints按 URL 匹配在请求/响应前后暂停，可编辑后放行或中止改参数、改响应、模拟失败
Map Local将匹配的请求的响应替换为本地文件内容用本地 JSON/HTML 做 Mock
Map Remote将匹配的请求重定向到另一 Host/Path将线上接口指到测试/预发
Rewrite按规则修改请求/响应头或体（如替换字符串）改 Host、Token、部分 JSON
Throttling限制带宽、延迟、丢包、MTU 等弱网、高延迟、不稳定网络
Compose / Repeat手动编辑请求并发送、重放已有请求接口重放、压力与回归

4.2 Breakpoints（断点）[9]

  • 作用：在请求发出前或响应返回前拦截，在 Charles 中查看并编辑内容，再选择 Execute（应用修改并继续）、Abort（中止并返回错误）或 Cancel（放弃修改并原样通过）。
  • 配置：Proxy → Breakpoint Settings，添加 Location，用协议、Host、端口、路径模式匹配 URL，支持通配符；每个断点可单独勾选「Request」「Response」或两者。
  • 流程概念：
请求发出 → 若匹配 Request 断点 → 暂停 → 编辑 → Execute/Abort/Cancel
         → 若未匹配或已放行 → 转发到服务器
响应返回 → 若匹配 Response 断点 → 暂停 → 编辑 → Execute/Abort/Cancel
         → 若未匹配或已放行 → 返回客户端

4.3 Map Local 与 Map Remote [10][11][15]

  • Map Local：当请求的 URL 与设定规则匹配时，Charles 不向服务器发请求，而是用本地文件内容作为响应体返回。适用于静态资源或 JSON 等；服务端动态逻辑不会执行。
    典型用法 [15]：① 用本地 JSON 文件充当某接口的返回值（如难以复现的首充、活动接口）；② 用本地 JS 调试线上页面：将线上站点的 https://www.example.com/js/main.js 映射到本机 /Users/xxx/project/js/main.js，在浏览器直接访问线上 URL 即可看到本地修改在「线上环境」下的效果，适合本地环境不完整、必须依赖线上环境联调时。
  • Map Remote：将匹配的请求重定向到另一地址（可不同 Host/Path），例如把 https://api.prod.com/v1/* 映射到 https://api.test.com/v1/*，便于用测试环境替代生产。
    典型用法 [15]：本地开发时接口写为带域名的 https://www.example.com/api/getData（避免跨域），在 Charles 中配置「将 https://localhost/api/* 或本机某路径映射到 https://www.example.com/」，这样本地请求会实际转发到线上或测试环境；配合 Rewrite 注入登录 Cookie 后，可带登录态访问测试/线上接口。

4.4 Rewrite [11][15]

  • 按规则对请求或响应的 Header / Body 做字符串级替换（如键名、域名、Token）。与 Map Local/Remote 相比，不替换整份内容，只做局部修改；规则可基于 URL 匹配与通配符。
    典型用法 [15]：
    • 模拟登录态：在 Tools → Rewrite 中添加规则，对指定 URL 集合做 Add Header，将已登录环境下的 Cookie 填入请求头，即可在本地或无登录环境访问需登录的接口（Cookie 有过期时间，需定期更新）。
    • 解决响应乱码：部分响应使用 Brotli（br） 编码时，Charles 可能无法正确解码导致 Body 乱码；可在 Rewrite 中修改请求头 Accept-Encoding，去掉 br，让服务端返回 gzip/deflate，Charles 即可正常显示 JSON 等内容。
    • 其他：添加/修改请求参数、修改响应状态码或部分 JSON 字段等。

4.5 Throttling（带宽与弱网模拟）[4][12]

  • 作用：模拟慢速、高延迟、丢包等，使客户端「以为」处于弱网环境，用于验证加载、超时、错误提示与降级策略。
  • 启用：Proxy → Start Throttling（或快捷键）；Proxy → Throttle Settings 配置。
  • 常见参数：
    • Bandwidth：上行/下行带宽上限（如 256 kbps）。
    • Latency：往返延迟（如 500 ms）。
    • Reliability：丢包率。
    • MTU：最大传输单元。
  • 仅限部分 Host：在 Throttle Settings 中勾选「Only for selected hosts」并添加 Host，可只对指定接口限速，避免影响其他操作。

五、配置与使用场景

5.1 本机浏览器抓包（macOS / Windows）

  1. 启动 Charles，默认监听 8888。
  2. 系统代理：Charles 可自动设置系统 HTTP/HTTPS 代理为 127.0.0.1:8888（Proxy → macOS Proxy / Windows Proxy）；关闭 Charles 时通常可恢复原设置。请求路径如下：
flowchart LR
    A[浏览器] -->|系统代理 127.0.0.1:8888| B[Charles]
    B --> C[目标服务器]
    C --> B
    B --> A
  1. HTTPS：按第三节安装并信任根证书，在 SSL Proxying Settings 中添加需解密的主机（如 *:443）。
  2. 浏览器访问任意 HTTP(S) 站点，在 Charles 的 Structure 或 Sequence 视图中查看会话。

5.2 仅抓部分域名或接口

  • SSL Proxying Settings：只添加需要解密的 Host，其他 HTTPS 不解密。
  • Proxy → Recording Settings：Include 中只填需要记录的 Host/Path，或 Exclude 排除无关域名，减少噪音。

5.3 Mock 与联调流程（概念）

1. 在 Map Local 中添加规则：例如 Host=api.example.com, Path=/v1/config → 本地文件 config.json
2. 客户端请求 https://api.example.com/v1/config → Charles 匹配规则 → 直接返回 config.json 内容
3. 或使用 Map Remote：将 api.example.com 映射到 api.test.com，请求被转发到测试环境
4. 或使用 Rewrite：将响应体中的 "env":"prod" 替换为 "env":"test"

5.4 弱网测试流程（概念）

1. Proxy → Throttle Settings，设置 Bandwidth / Latency / Reliability 等
2. 可选：Only for selected hosts，添加待测接口的 Host
3. Proxy → Start Throttling
4. 在 App 或页面中触发请求，观察加载时间、超时与错误处理
5. 测试结束后 Stop Throttling

六、各平台网络抓包配置 SOP

以下按 iOS、AOS（Android）、HOS（HarmonyOS）、WebAPP（浏览器/Web 端） 四类平台，给出 Charles 抓包的标准操作步骤（SOP），便于按平台查阅与排错。

6.1 通用前提与平台对照

项目说明
网络终端设备与运行 Charles 的电脑处于同一局域网（同一 Wi‑Fi 或同网段）。
端口电脑防火墙放行 8888 入站，或临时关闭防火墙测试。
Charles已启动并监听 8888；需抓 HTTPS 时在 Charles 内对目标 Host 启用 SSL Proxying（见 §3.3）。
平台代理配置位置证书安装方式HTTPS 特别说明
iOS设置 → Wi‑Fi → 当前网络 → 配置代理浏览器打开 chls.pro/ssl → 安装描述文件 → 证书信任设置需在「证书信任设置」中勾选 Charles
AOS (Android)设置 → WLAN → 当前网络 → 代理浏览器打开 chls.pro/ssl 安装；Android 7+ 自研 App 需 NSC 信任用户证书见 §6.3
HOS (HarmonyOS)设置 → WLAN → 当前网络 → 代理同 AOS，浏览器 chls.pro/ssl；自研应用可能需网络安全配置与 Android 类似，新系统可能需应用内代理/证书配置
WebAPP系统代理或浏览器代理指向本机 127.0.0.1:8888本机安装 Charles 根证书并信任（Help → Install Charles Root Certificate）依赖系统/浏览器信任 Charles 根证书

6.2 iOS 抓包配置 SOP [8][13]

适用于 iPhone / iPad 真机 与 iOS 模拟器。

6.2.1 iOS 真机

步骤操作说明
1电脑：Charles 已启动 → Help → SSL Proxying → Install Charles Root Certificate on a Mobile Device弹出框内会显示代理地址（如 192.168.x.x:8888）与证书下载页 chls.pro/ssl，记下电脑 IP 与 8888 端口
2手机：设置 → Wi‑Fi → 点击当前已连接网络右侧 (i) → 配置代理 → 选择 手动服务器：填电脑 IP；端口：8888；保存
3手机：用 Safari 打开 chls.pro/ssl按提示下载并安装「Charles Proxy CA」描述文件，若提示需在设置中确认则前往「设置 → 已下载描述文件」安装
4手机：设置 → 通用 → 关于本机 → 证书信任设置找到 Charles Proxy CA，打开「完全信任」开关；未信任则 HTTPS 会报证书错误
5Charles：Proxy → SSL Proxying Settings → 勾选 Enable，在列表中 Add 需解密的 Host（如 *:443 或 api.xxx.com:443）；或抓包时在会话列表右键目标 Host/请求 → SSL Proxying → Enable SSL Proxying不在此列表的域名 HTTPS 仍为密文 [15][16]
6在手机中打开要抓的 App 或 Safari，正常发起请求Charles 的 Structure / Sequence 中应出现对应会话；HTTPS 需完成步骤 4、5 才能看到明文

注意：若 App 启用 ATS 且不信任用户安装的 CA，需在自研 App 的 Info.plist 中配置 ATS 例外或使用已信任 Charles 的调试包。

6.2.2 iOS 模拟器

步骤操作说明
1关闭所有 iOS 模拟器实例确保证书安装到当前模拟器运行时
2Charles：Help → SSL Proxying → Install Charles Root Certificate in iOS Simulators证书会安装到当前已安装的模拟器系统中
3启动模拟器；在 macOS 上勾选 Proxy → macOS Proxy（或 Windows Proxy）模拟器继承系统代理，流量走本机 Charles
4在 Charles 的 SSL Proxying Settings 中为需抓取的 Host 启用 SSL Proxying同真机步骤 5
5在模拟器内打开 Safari 或目标 App 发起请求抓包与真机一致

6.3 AOS（Android）抓包配置 SOP [8]

适用于 Android 手机 / 平板（含 Android 7+ 自研 App 的证书信任配置）。

步骤操作说明
1电脑：Charles 已启动；Help → SSL Proxying → Install Charles Root Certificate on a Mobile Device，记下 电脑 IP 与 8888同 iOS
2手机：设置 → WLAN（或 网络和互联网 → Wi‑Fi）→ 长按当前连接网络 → 修改网络 / 高级选项 → 代理 选 手动主机名：电脑 IP；端口：8888；保存
3手机：用系统浏览器打开 **chls.pro/ssl**，下载并安装 Charles 根证书按系统提示完成「安装到凭据存储」等步骤
4Android 7.0+ (N)：系统默认不信任用户安装的 CA。若抓的是自研 App，需在工程中增加 Network Security Configuration，在 debug 下信任用户证书：仅影响调试包，正式包可不引用或仅 debug 引用

res/xml/network_security_config.xml：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <debug-overrides>
    <trust-anchors>
      <certificates src="user" />
      <certificates src="system" />
    </trust-anchors>
  </debug-overrides>
</network-security-config>

AndroidManifest.xml 的 <application> 中增加：

android:networkSecurityConfig="@xml/network_security_config"

| 5 | Charles：Proxy → SSL Proxying Settings → 为需抓取的 Host 添加 *:443 或具体域名:443；或右键会话中的 Host → Enable SSL Proxying | 同 iOS | | 6 | 在手机中打开目标 App 或浏览器发起请求 | 若仍报证书错误，检查步骤 3、4 是否完成；第三方 App 无法改 NSC 时可能无法抓其 HTTPS |

6.4 HOS（HarmonyOS）抓包配置 SOP

适用于 华为 / 荣耀等搭载 HarmonyOS 的设备；代理与证书流程与 Android 类似，部分机型路径可能为「设置 → WLAN → 当前网络 → 代理」 [17]。

步骤操作说明
1电脑：Charles 已启动；记下电脑 IP 与 8888 端口（Help → Install Charles Root Certificate on a Mobile Device 可查看）同 iOS / AOS
2手机：设置 → WLAN → 当前连接网络 → 代理（或 高级 / 更多）→ 选 手动主机/服务器：电脑 IP；端口：8888
3手机：浏览器打开 **chls.pro/ssl**，下载并安装 Charles 根证书按系统提示安装到「凭据存储」等；部分 HarmonyOS 版本需在「设置 → 安全 → 加密与凭据」中确认用户证书已安装
4自研 HarmonyOS 应用：若抓包时 HTTPS 仍报证书错误，需在应用内配置信任用户证书（视 SDK/API 版本而定；API 10+ 支持 usingProxy、caPath 等）或使用系统提供的网络安全配置能力与 AOS 的 NSC 思路类似，具体以华为开发者文档为准
5Charles：SSL Proxying Settings 中为需解密的 Host 添加条目，或右键会话 → Enable SSL Proxying同其他平台
6在设备上打开目标 App 或浏览器发起请求确认代理与证书均生效

6.5 WebAPP（浏览器 / Web 端）抓包配置 SOP

适用于 桌面浏览器（Chrome / Edge / Safari / Firefox） 以及 移动端浏览器 访问的 Web 页面；核心是「本机或当前设备使用 Charles 作为代理 + 信任 Charles 根证书」。

6.5.1 桌面端（本机浏览器）

步骤操作说明
1电脑：启动 Charles，确认监听 8888默认 Proxy → macOS Proxy / Windows Proxy 会设置系统代理为 127.0.0.1:8888
2本机证书：Help → SSL Proxying → Install Charles Root Certificate；安装后在系统钥匙串（macOS）或证书管理（Windows）中将 Charles 根证书设为受信任的根 CA否则浏览器访问 HTTPS 会报不安全
3Charles：Proxy → SSL Proxying Settings → Enable SSL Proxying，Add 需解密的 Host（如 *:443）或抓包时右键目标 Host → Enable SSL Proxying同移动端
4在浏览器中访问目标 Web 或 WebAPP流量经 Charles，Structure / Sequence 中可查看与修改请求/响应

仅对当前浏览器走代理（不改系统代理）时：安装浏览器代理扩展（如 SwitchyOmega），将 HTTP/HTTPS 代理指向 127.0.0.1:8888，并确保该浏览器信任本机已安装的 Charles 根证书。

6.5.2 移动端浏览器（手机/平板访问 Web）

  • iOS：按 §6.2.1 配置代理与证书后，在 Safari 或其他浏览器中访问的 H5/Web 请求会经 Charles。
  • AOS / HOS：按 §6.3 / §6.4 配置代理与证书后，在系统浏览器或 Chrome 等中访问的页面请求会经 Charles；若仅浏览器抓包、不涉及 App，通常只需系统代理 + 安装并信任 Charles 证书即可。

6.6 流程小结

flowchart TD
    A[设备与电脑同网 + Charles 已启动] --> B[设备端配置代理: 电脑IP:8888]
    B --> C[设备/本机安装并信任 Charles 根证书]
    C --> D[Charles 内对目标 Host 启用 SSL Proxying]
    D --> E[发起请求]
    E --> F[Charles 记录并可选解密/修改]

七、最佳实践与注意事项

  • 仅调试环境使用：Charles 根证书权限极大，只在开发/测试机器上安装并信任，用毕可关闭系统代理或停用 Charles。
  • 最小化 SSL Proxying 范围：只对需要查看的 Host 开启 SSL Proxying，避免不必要的解密与隐私风险。
  • 弱网：优先使用「Only for selected hosts」限速，减少对整机其他请求的影响。
  • 敏感数据：会话中可能包含 Token、Cookie、账号信息，保存 .chls/.chlz 或截图时注意脱敏与保管。
  • 合规：仅对自有或已授权的应用与接口抓包，勿用于未授权的第三方服务或用户数据。

延伸阅读（掘金系列）

以下文章从 iOS/Android 抓包、前端联调、HTTPS 原理与 Charles 功能教程等角度做了补充说明，可按需查阅。

序号标题链接内容概要
01iOS Charles 抓包掘金iOS 端 Charles 抓包配置与证书安装
02Android 端 Charles 抓包掘金Android 代理与证书配置、高版本信任用户 CA
03Charles 前端应用掘金Rewrite 模拟登录 Cookie、Map Remote/Local、去掉 br 解决乱码
04史上最强 Charles 抓包掘金Charles 功能与抓包场景综合介绍
05Charles 从入门到精通掘金入门到进阶功能与操作教程
06Charles 功能介绍和使用教程掘金功能说明与使用步骤
07HTTPS 与 Charles掘金HTTP/HTTPS 安全、TLS 握手与 Charles 中间人原理
08为了学会 Charles，我拼命了掘金简介、iPhone/Chrome 配置、Repeat/Compose/Rewrite/Map 简介
09最明白的 Charles 教程（一）掘金Charles 基础与界面说明
10最明白的 Charles 教程（二）掘金抓包与过滤操作
11最明白的 Charles 教程（三）掘金进阶功能与场景
12最明白的 Charles 教程（四）掘金综合实战与排错

参考文献

[1] Charles Proxy. Overview / Features. www.charlesproxy.com/overview/fe…
[2] Wikipedia. Charles (software). en.wikipedia.org/wiki/Charle…
[3] Charles Proxy. Documentation – Welcome. www.charlesproxy.com/documentati…
[4] XK72. Charles Proxy. www.charlesproxy.com/
[5] Charles Proxy. Version History. www.charlesproxy.com/documentati…
[6] Charles Proxy. SSL Proxying. www.charlesproxy.com/documentati…
[7] Charles Proxy. SSL Certificates. www.charlesproxy.com/documentati…
[8] Charles Proxy. SSL Certificates – iOS / Android / Java / Chrome. 官方文档 Install Charles Root Certificate 各平台说明.
[9] Charles Proxy. Breakpoints Tool. www.charlesproxy.com/documentati…
[10] Charles Proxy. Map Remote. www.charlesproxy.com/documentati…
[11] Charles Proxy. Map Local；Stack Overflow. Charles Proxy Rewrite vs Map Local.
[12] Charles Proxy. Throttling；Donny Wals. Throttle network speeds for a specific host in Charles；Mobot. Charles Proxy for Network Throttling.
[13] Detroit Labs. A Guide To Charles Proxy for Mobile Development；Medium. Setting Up Charles Proxy with iOS Devices and Emulators；Charles. iOS Getting Started.
[14] CSDN / 技术博客. 使用 Charles 抓取 HTTPS 数据及原理分析（中间人、证书链）.
[15] 掘金. charles 前端应用. juejin.cn/post/684490… Remote、Map Local 实战）.
[16] 掘金. HTTPS 与 Charles；为了学会 Charles，我拼命了. juejin.cn/post/684490… 握手与 Charles 证书替换、按地址启用 SSL Proxying）.
[17] HarmonyOS 网络抓包与 Charles 代理证书配置（代理 + chls.pro/ssl + 证书信任）；华为开发者文档 @ohos.net.http（API 10+ 代理与证书参数）.

其它参考

avatar
文章
阅读
粉丝