Charles Proxy Windows 完整教程

Charles 是一款功能强大的 HTTP 代理服务器、HTTP 监视器和 Reverse 代理服务器，它允许你查看所有计算机和互联网之间的 HTTP 和 SSL/TLS 流量，这对于开发者调试 API、分析网络请求、优化性能以及安全测试至关重要。

为什么需要 Charles？（核心用途）

在开始之前,先了解 Charles 能帮你做什么：

1. 移动端 App 网络调试：这是 Charles 最核心的功能之一，你可以将手机上的所有网络请求抓取到电脑上进行分析。
2. Web 前端调试：分析网页加载了哪些资源（JS, CSS, 图片、API 请求等），检查请求头、响应头、请求参数和返回数据。
3. 后端 API 调试：模拟客户端发送各种 HTTP 请求（GET, POST, PUT, DELETE 等），查看服务器返回的详细数据，无需编写代码。
4. 网络性能分析：查看每个请求的耗时、DNS 解析时间、TCP 连接时间等，找出性能瓶颈。
5. 模拟慢速网络：测试你的 App 或网站在弱网环境下的表现。
6. 请求/响应修改：修改服务器返回的数据，或者修改客户端发送的请求，进行各种测试。
7. SSL/TLS 解密：抓取和分析 HTTPS 加密流量（需要配置信任证书）。

环境准备与安装

1. 下载：

   • 访问 Charles 官方网站：https://www.charlesproxy.com/
   • 下载适用于 Windows 的最新版本，它有免费试用版，但付费版功能更全（高级功能如 SSL Proxying 在试用版有限制）。

2. 安装：

   • 双击下载的 .exe 文件，按照安装向导进行安装。
   • 建议：安装时选择 "Install for all users" 并勾选 "Add Charles to the PATH for all users"（方便在命令行启动）。
   • 安装完成后,启动 Charles，它会弹出一个窗口，告诉你你的电脑 IP 地址，这是后续配置手机时需要用到的。

基础配置：抓取电脑自身流量

这是最简单的入门,先让 Charles 抓取你电脑浏览器（如 Chrome, Firefox）的流量。

1. 设置系统代理：

   • 打开 Windows 设置 -> 网络和 Internet -> 代理。
   • 找到 “手动设置代理”，打开开关。
   • 地址：填入你的电脑本地 IP 地址（0.0.1）。
   • 端口：填入 Charles 默认的代理端口 8888。
   • 重要：确保下方的 “不使用代理的服务器” 没有勾选，或者将 localhost, 0.0.1 等本地地址添加到例外列表中，否则会导致本地服务（如 npm start）无法访问。

2. 验证 Charles 是否工作：

   • 在你的浏览器中访问任意网站,http://httpbin.org/get。
   • 切换回 Charles 窗口，你应该能看到一个名为 httpbin.org 的会话，里面包含了你刚才的请求，如果没有，点击菜单栏的 Proxy -> Windows Proxy 确保代理设置是 Charles 在管理的。

核心功能一：抓取手机 App 流量

这是 Charles 的王牌功能，原理是让手机通过电脑的 Charles 代理上网，Charles 作为中间人，将手机的所有网络请求转发给你，并抓取下来。

步骤 1：确保电脑和手机在同一 Wi-Fi 下

这是最基本的前提。

步骤 2：在 Charles 中允许手机连接

1. 在 Charles 的菜单栏，选择 Proxy -> Proxy Settings...。
2. 在弹出的窗口中,切换到 "Connections" 选项卡。
3. 确保 "Enable transparent HTTP proxying" 是勾选状态，这允许任何设备连接你的 Charles 代理。

步骤 3：配置手机 Wi-Fi 代理

1. 在你的手机上,进入 Wi-Fi 设置。
2. 长按当前连接的 Wi-Fi，选择 “网络配置” 或 “修改网络”。
3. 将代理设置为 “手动”。
4. 代理服务器主机名：填入你电脑的 局域网 IP 地址（不是 0.0.1），你可以在 Charles 启动时的提示窗口或 Windows 的命令行 ipconfig 命令中找到它（通常是 168.x.x 格式）。
5. 代理服务器端口：填入 8888。
6. 保存设置。

步骤 4：在手机上安装并信任 Charles 证书

由于手机和电脑之间的 HTTPS 流量是加密的，Charles 需要通过“中间人攻击”的方式解密才能查看，这需要你在手机上安装一个由 Charles 生成的“根证书”，并信任它。

1. 在手机上访问 Charles 提供的地址：

   • 手机连接代理后,打开手机上的任意浏览器（如 Safari 或 Chrome）。
   • 在地址栏输入：chls.pro/ssl (或者 charlesproxy.com/getssl)。
   • 页面会自动下载 Charles 的根证书文件（通常名为 charles-proxy-ssl-proxying-certificate.pem）。

2. 安装证书：

   • iPhone/iPad (iOS)：
     • 下载完成后,系统会提示你“在‘设置’中打开”。
     • 前往 “设置” -> “通用” -> “VPN与设备管理”** (或 “关于本机” -> “证书信任设置”)。
     • 你会看到一个名为 "Charles Proxy" 的描述文件，点击它，安装并输入你的手机锁屏密码。
     • 安装后,回到 “证书信任设置”，确保 “启用” 了 Charles Proxy 证书。
   • Android (安卓)：
     • 下载的证书通常在通知栏或下载文件夹里。
     • 进入 “设置” -> “安全” -> “从存储设备安装”** (或类似名称)。
     • 找到并选择下载的 .pem 文件。
     • 为证书命名（如 "Charles"）并设置密码（可选，但建议设置）。
     • 关键一步：安装后，需要手动信任该证书，进入 “设置” -> “安全” -> “加密与凭据” -> “安装的证书” -> “用户”，找到 "Charles" 证书，并 开启“用于 Wi-Fi 网络” 的开关。

步骤 5：验证抓取

1. 在手机上打开你想要调试的 App。
2. Charles 窗口会弹出一个提示，询问你是否要允许来自手机 IP 地址的连接，点击 "Allow" (允许)。
3. 你在手机 App 上进行的任何网络操作，都会实时显示在 Charles 的主界面上！

Charles 界面详解

熟悉界面是高效使用 Charles 的第一步。

• 菜单栏：包含所有操作，如文件、编辑、视图、代理、帮助等。
• 工具栏：常用功能的快捷按钮，如抓取控制、过滤、搜索、断点设置等。
• 结构树：左侧区域，按域名（Host）对请求进行分组，点击一个域名，右侧会显示该域名下的所有请求。
• 请求列表：中间区域，显示当前选中域名下的所有网络请求，每个请求一行，包含序号、状态码、请求方法、路径、耗时、大小等信息。
• 请求/响应详情：右侧区域，当选中一个请求后，这里会显示其详细信息。
  • Headers：请求和响应的头部信息。
  • Payload / Response：响应的正文内容（如 JSON, HTML, XML 等）。
  • Preview：对 HTML, JSON, 图片等内容进行格式化或预览。
  • HTML / JSON / XML / CSS / Images / WebSocket：根据响应类型提供专门的查看器。
  • Chart：用图表展示请求时间线，非常直观。
  • Cookies：查看请求相关的 Cookie。
  • Timing：显示请求的各个阶段耗时（DNS, TCP, SSL, Server Processing, TTFB 等）。

常用高级功能

过滤器

当请求非常多时,过滤是必须的。

• 开启过滤：点击工具栏的 "Filter" 按钮（漏斗图标）。
• 使用通配符：在输入框中输入要匹配的 URL。
  • *.myapi.com：只显示 myapi.com 域名下的请求。
  • /api/v1/users：只包含 /api/v1/users 路径的请求。
  • Content-Type: application/json：只显示响应类型为 JSON 的请求。

断点

这是调试 API 的神器，你可以中断某个请求，修改它，然后再发送给服务器。

• 设置断点：
  1. 在请求列表中,右键点击一个请求。
  2. 选择 "Breakpoints" -> "Break at Start" (在请求开始时断点) 或 "Break at End" (在服务器响应后断点)。
• 使用断点：
  1. 当 App 发送被设置了断点的请求时，Charles 会自动中断，并显示一个编辑窗口。
  2. "Edit Request"：你可以修改请求的 URL、Method、Headers、Body 等任何内容，然后点击 "Execute" 发送修改后的请求。
  3. "Edit Response"：如果设置的是 "Break at End"，你可以修改服务器返回的 Response，然后点击 "Execute" 将修改后的数据返回给 App。

带宽限制

模拟 2G、3G、Wi-Fi 等不同网络环境。

• 设置：菜单栏 Proxy -> Throttle Settings...。
• 勾选 "Enable Throttling"，然后可以选择预设的带宽（如 GPRS/EDGE/3G/DSL），或者自定义上传/下载速度。

SSL 代理

抓取和分析 HTTPS 流量（即解密）。

• 开启：菜单栏 Proxy -> SSL Proxying Settings...。
• 点击 "Add"，在弹出的窗口中：
  • Host：输入要抓取的域名（如 api.example.com）。
  • Port：输入端口号（如 443）。
  • 你也可以使用通配符 来匹配所有域名和端口。
• 原理：Charles 会扮演“假”的服务器，用 Charles 自己的证书和手机通信；同时扮演“假”的客户端，用 Charles 自己的证书和真实服务器通信，必须在手机和电脑上都信任 Charles 的根证书。

脚本修改

使用 JavaScript 或 Python 脚本自动修改请求或响应。

• 入口：菜单栏 Tools -> JavaScript / Python。
• 场景：你想将所有响应中的 old-domain.com 替换为 new-domain.com，可以写一个简单的 JS 脚本来实现。

常见问题与解决方案

1. 问题：手机连接代理后，Charles 没有弹出提示，或者 App 无法联网。

   • 原因：通常是防火墙阻止了 Charles 的端口（8888）。
   • 解决：检查 Windows Defender 防火墙或其他第三方杀毒软件，允许 Charles 通过防火墙。

2. 问题：HTTPS 请求显示为 <Unknown>乱码。

   • 原因：没有开启 SSL 代理，或者手机没有信任 Charles 证书。
   • 解决：确保手机上正确安装并信任了 Charles 证书，并且在 Charles 中开启了 SSL Proxying。

3. 问题：Charles 运行缓慢或卡顿。

   • 原因：抓取的流量太大，或者开启了太多高级功能。
   • 解决：务必使用过滤器，只关注你需要的请求，关闭不用的功能，如带宽限制。