charles代理工具使用

🫡基础知识

1. Charles 安装与简介

Charles（青花瓷）是一款基于 HTTP 协议的代理服务器，通过把电脑/浏览器的流量代理到自身，截取请求与响应，达到抓包分析的目的。跨平台，半免费（启动需等待 10 秒，每 30 分钟需重启一次）。

• 官网下载：charlesproxy.com/download

• 按默认选项安装即可

• 注册：Help → Register Charles，填入 License 信息

• 注册码生成网址：Charles Keygen

1. Proxy → Proxy Settings，确认端口默认是 8888，按需勾选 Enable transparent HTTP proxying

2. Proxy → Windows Proxy / macOS Proxy，启用系统代理，让电脑流量经过 Charles

3. HTTPS 抓包：Help → SSL Proxying → Install Charles Root Certificate，将根证书安装到「受信任的根证书颁发机构」

4. Proxy → SSL Proxying Settings，勾选 Enable SSL Proxying，只添加需要抓包的域名；临时排查时可用 *:443，用完建议收窄范围

• 手机与电脑连接同一个 WiFi

• 手机 WiFi 配置 → 手动代理 → 服务器填电脑 IP（Help → Local IP Address），端口填 8888

• 手机浏览器访问 chls.pro/ssl 安装证书

• iOS 还需要在系统设置中信任该证书；Android 7+ 的部分 App 默认不信任用户证书，可能只能抓浏览器或已配置网络安全策略的 App

2. Map Remote 远程映射

功能：把命中条件的请求 URL 改写为另一个远程地址，相当于"偷梁换柱"地修改请求目标。常用于"访问线上域名 → 实际打到本地后端"或"测试环境 → 预发环境"切换。

1. Tools → Map Remote，勾选 Enable Map Remote

2. 点击 Add，弹出 Edit Map Remote Rule

3. From（源）：填写要被映射的请求（Protocol / Host / Port / Path 都可用 * 通配，不限制就留空）

4. To（目标）：填写映射到的目标地址（如本地服务 127.0.0.1:8080）

5. 点击 OK 保存，规则生效

• 只想测后端，不想本地起前端：直接访问线上前端地址，把后端接口域名 Map 到本地后端端口

• 测试环境接口临时切到预发、联调或本地服务，不需要改前端代码和配置

• 不用再找菜单 ID，也不用同时启动一堆本地服务，电脑压力会小很多

3. Breakpoints 断点

功能：在请求发出 / 响应返回的瞬间"暂停"流量，让你手动修改 Request 或 Response 的任意字段（Header、参数、Body、状态码），再放行。

1. 在左侧请求列表上右键目标接口 → Breakpoints（工具栏断点按钮会亮起）

2. 也可通过 Proxy → Breakpoint Settings 手动添加规则，并选择拦截 Request / Response / 两者都拦

3. 重新发起请求，Charles 会弹出编辑窗口

4. 在 Edit Request 或 Edit Response 中修改内容

5. 点 Execute 放行；点 Abort 终止

• 复现"少了某个 Header 字段"这类难复现的 bug

• 模拟超大数值、边界值、权限不足等异常返回

• 在不改后端的情况下，验证前端对各种异常响应的处理

4. Rewrite 重写

功能：和断点类似可改请求/响应，但 Rewrite 是规则化、自动化的——一次配置，所有匹配的请求都会被自动修改，不需要手动暂停。

1. Tools → Rewrite，勾选 Enable Rewrite

2. 在 Sets 区域 Add 一个规则集，命名（如"加 deptCode"）

3. Location：Add 后填要匹配的请求（Protocol/Host/Port/Path/Query，留空或填 * 表示不限制）

4. Rules：Add 添加一条重写规则
• Type：选择操作类型（Add Header / Modify Header / Modify Body / Modify Response Status 等）
• Where：作用于 Request 还是 Response
• Match / Replace：旧值与新值（支持正则）

5. 保存即生效

5. 浏览器插件 FoxyProxy

功能：在 Chrome / Firefox 中给指定网站使用不同的代理，让"开发抓包(Charles)"和"外部网络代理(v2rayN)"互不打架。

1. 浏览器商店安装 FoxyProxy Standard 扩展

2. 在 FoxyProxy 中添加代理配置：
• Charles 代理：127.0.0.1:8888，匹配开发相关域名（公司业务系统等）
• v2rayN 代理：127.0.0.1:10808（常见 SOCKS 端口，以本机实际配置为准），匹配需要走外部网络代理的网站

3. v2rayN 关闭"启动系统代理"（即"清除系统代理"），由 FoxyProxy 接管浏览器内的代理路由

4. 如果只抓浏览器流量，Charles 中可以不启用 Windows Proxy / macOS Proxy，直接靠 FoxyProxy 把指定网站转到 127.0.0.1:8888

🫡常用（内部使用可忽略）

1.远程映射

功能：将线上环境的请求代理到本地服务，避免同时启动多个前端项目，解决电脑卡顿问题。

• 测试前端页面时，经常需要先找页面菜单 ID，链路比较绕

• 只想测试后端接口，但又必须启动本地前端服务来触发调用

• 多个本地服务同时启动时，电脑容易卡顿，甚至导致 IDE 被迫退出

2.重写和打断点

功能：动态修改 HTTP 请求/响应的内容，用于快速复现难以重现的 Bug 场景。

• 某些 Bug 难以重现，例如缺少特定的 Header 字段（如 deptCode），正常情况下请求都会携带该字段

• 需要模拟异常数据、边界值、权限不足、接口超时等场景

• 不方便改后端代码时，先用 Charles 验证前端兜底逻辑

• 请求头（Headers）

• 请求参数（Query / Body）

• 响应状态码（Status Code）

• 响应内容（Response Body）