10分钟上手Charles：抓包改包实战

myting

于 2025-06-24 11:33:40 发布

阅读量419

点赞数 13

CC 4.0 BY-SA版权

文章标签：职场和发展功能测试学习方法经验分享前端

本文链接：https://blog.csdn.net/myting/article/details/148865574

1 为什么需要 Charles？

开发/测试中遇到的一些网络问题，例如接口调试慢、数据不对、请求失败、性能瓶颈等。

那么这个时候就需要有一个工具辅助我们定位问题是什么？这个时候我们就可以考虑使用Charles（也有其他工具例如fiddler，本人主要是单纯觉得Charles界面友好）。

那我们来简单了解一下Charles 是什么？

它是一款强大的 HTTP/HTTPS 代理服务器、监控器和调试工具（跨平台：Win/Mac/Linux）。
* 核心价值：
* 实时查看和分析移动端/桌面端/服务端的网络请求与响应。
* 拦截和修改请求与响应（调试、Mock 数据）。
* 性能分析（请求耗时、大小、瀑布图）。
* 模拟弱网环境。
* 支持 HTTP/1.x, HTTP/2, WebSocket, SSL/TLS。

2 安装与基础配置

* 下载与安装： 提供官方下载链接，简述安装步骤（大家去百度搜索即可，破解版的也能找到）。
* 核心概念：代理
* 原理简述： Charles 作为“中间人”代理你的设备流量。
* 配置设备代理：
* 桌面端： 系统/浏览器设置代理（或使用 Charles 的 Chrome 扩展）。
* 移动端： 手机连接与电脑相同的 Wi-Fi，手动配置 Wi-Fi 代理（IP: Charles 所在电脑的局域网 IP，端口: 8888 可修改）。
* 基本界面介绍： 主窗口、工具栏、结构视图（Structure）、序列视图（Sequence）、过滤器（Filter）。

* 首次启动与信任证书 (至关重要！后面我们会单独讲解)：
* 为什么需要安装 Charles 根证书？（为了解密 HTTPS 流量）。
* 桌面端安装证书： Charles Help -> SSL Proxying -> Install Charles Root Certificate 并信任。
* 移动端安装证书： 手机浏览器访问 chls.pro/ssl 下载安装并信任（iOS 描述文件/Android 设置中信任）。

3. 核心功能详解

* 3.1 抓包与查看 (核心)

* 启动/停止记录流量。
* Structure 视图： 按域名/主机分组查看请求，清晰明了。
* Sequence 视图： 按时间顺序查看所有请求，适合分析瀑布流。

* 请求/响应详情查看：
* Overview： 基本信息（URL、方法、状态码、时间、大小）。
* Headers： 请求头和响应头（Cookie、User-Agent、Content-Type等）。
* Query String： URL 参数解析。
* Cookies： 请求携带和响应设置的 Cookie。
* Request/Response Body：
* 文本格式（JSON, XML, HTML, CSS, JS）：自动格式化、语法高亮。
* 图片格式：预览图片。
* 其他格式（如 Protobuf）：可能需要 Viewers 插件或手动解析。

* 3.2 HTTPS 抓包配置 (重点难点)

* Charles 设置： Proxy -> SSL Proxying Settings...
* 勾选 Enable SSL Proxying。
* Add Location：配置需要解密的主机和端口（如 *:* 解密所有，或更安全的 *.yourdomain.com:443）。
* 设备信任证书： 再次强调，必须在设备和电脑上都安装并信任 Charles 根证书，否则看到的是乱码或连接失败。
* 常见问题排查（证书不受信任、连接失败）。

* 3.3 修改请求与响应 (断点功能 - 强大调试/Mock)

* Breakpoints 设置： Proxy -> Breakpoint Settings...
* 启用断点。
* 添加需要拦截的请求 URL（支持通配符 *）。
* 拦截流程：
* 触发匹配的请求 -> Charles 暂停 -> 允许修改请求 (URL, Headers, Body) -> 发送修改后的请求到服务器。
* 服务器返回响应 -> Charles 暂停 -> 允许修改响应 (状态码, Headers, Body) -> 发送修改后的响应回客户端。
* 应用场景：
* 测试不同请求参数的结果。
* 修改请求头（如 User-Agent, Cookie）。
* Mock 数据： 直接修改响应体，返回自定义的 JSON/XML/HTML 等，用于前端开发或测试后端未完成的接口。
* 测试错误处理（修改状态码为 404, 500 等）。

如果想精确到PATH进行断点需要通配符，具体是针对域名、

* 3.4 重写请求与响应 (Rewrite - 自动化修改)

* Tools -> Rewrite...
* 定义规则集（Ruleset）。
* 添加规则：匹配请求/响应的条件（URL, Body, Header 等）和对应的修改动作（添加/修改/删除 Header，查找替换 Body 文本等）。
* 与断点的区别：自动化、无需手动暂停。适合批量、规则化的修改（如全局替换某个字符串、添加特定 Header）。

* 3.5 映射功能 (Map Local / Map Remote)

* Map Local： Tools -> Map Local...
* 将匹配的线上请求映射到本地文件。
* 核心应用： 前端开发时，用本地修改的 JS/CSS/HTML/API 数据文件快速替换线上文件进行测试，无需等待部署。
* Map Remote： Tools -> Map Remote...
* 将匹配的请求重定向到另一个远程 URL。
* 应用：将请求指向测试环境、灰度环境或特定的服务版本。

4. 高级技巧与效率提升

* 4.1 强大的过滤器 (Focus)

* 使用顶部 Filter 栏快速筛选特定主机、URL 关键词的请求。
* 在 Structure 视图中右键域名/路径选择 Focus，只显示相关流量。

* 4.2 性能分析

* 查看 Overview 中的时间信息（DNS, Connect, SSL, Request, Response, Total）。
* 在 Sequence 视图分析瀑布图（Waterfall），找出耗时长的请求或阻塞点。
* 使用 Summary (View -> Summary) 统计请求数量、总数据量、平均耗时等。