之前做前后端联调时经常遇到一种尴尬场景前端说“我这边参数都传了后端怎么老是报参数缺失”后端说“我这边日志里没看到这个字段”。两边对着代码看半天谁也说服不了谁。后来我学会了一个高效又直接的排查手段——抓包。不看代码不看日志直接看客户端到底发出去的请求是长什么样的所有争议立刻清晰。本文会从抓包的基础概念入手带你在 Windows / Mac 上完成 Fiddler、Charles 的安装与配置并完整演示如何抓取 HTTP / HTTPS 请求、如何抓取手机 App 请求、如何过滤请求、断点修改请求、重发请求、模拟弱网等实战操作。全文不涉及黑产、攻击、破解类内容所有操作仅在你自己可控的设备、测试环境或已获得合法授权的环境中进行。1. 抓包是什么为什么越来越常用1.1 抓包的概念抓包全称是“网络数据包捕获”指通过网络代理或网络接口监听的方式截获客户端与服务端之间交互的原始网络请求数据。对于日常开发来说最常看到的就是 HTTP / HTTPS 请求的完整报文包括请求行、请求头、请求体、响应状态码、响应头和响应体。举个例子你在浏览器里点击“登录”按钮浏览器会向服务器发送一条 POST /login 请求里面带着 username 和 password。抓包工具可以看到POST /login HTTP/1.1 Host: api.example.com Content-Type: application/json User-Agent: Mozilla/5.0 ... {username:admin,password:123456}这种“看见原始报文”的能力在接口联调、问题定位、接口文档补充、第三方 SDK 调试中非常实用。1.2 抓包解决了什么问题实际工作中抓包主要解决以下几类问题前后端接口争议前端说传了参数后端说没收到。那就抓包看真实请求一目了然。第三方接口调试对接支付、地图、短信等第三方服务时对方返回的报文往往需要原样分析。移动端接口分析App 页面一直加载失败或白屏抓包可以快速判断请求是否发出、是否被拦截、返回是否异常。接口自动化测试与逆向辅助通过抓包确认接口字段不仅能写更准确的自动化用例也能辅助定位线上问题。弱网与异常场景模拟测试弱网环境下的超时、重试机制。1.3 常见抓包工具工具平台特点适用场景Chrome / Edge DevTools浏览器内置无需安装操作简单Web 页面调试Fiddler ClassicWindows功能强大免费可脚本扩展Windows 桌面端与手机抓包CharlesWindows / Mac / Linux界面友好断点与重发功能顺手前后端联调、App 抓包WiresharkWindows / Mac / Linux底层网络报文分析网络协议分析、TCP/IP 问题ProxymanMac原生体验好支持 iOS 模拟器抓包Mac 开发环境如果你刚接触抓包建议先从 Fiddler 或 Charles 二选一入手。两者都能完成 PC 端和移动端抓包核心功能类似选一个用熟即可。2. 环境准备与版本说明本文演示以 Windows 上的 Fiddler Classic 和 macOS 上的 Charles 为主。不同版本的界面和配置项可能略有差异但整体操作思路是通用的。2.1 安装 Fiddler ClassicFiddler Classic 是 Windows 平台的免费抓包工具支持 .NET Framework。前往 Telerik 官网下载即可安装过程保持默认选项。安装完成后打开 Fiddler顶部菜单栏会出现 Tools Options。默认情况下Fiddler 会使用 8888 端口作为本地代理端口。菜单路径Tools - Options - Connections 关键配置Fiddler listens on port 8888勾选 Allow remote computers to connectAllow remote computers to connect是用来让手机或其它设备通过局域网代理访问 Fiddler 的只有需要抓手机包时才需要开启。2.2 安装 CharlesmacOS 用户可以直接下载 Charles 的 dmg 安装包Windows 也可以使用 Charles。安装完成后的界面相对现代左侧是请求列表右侧是请求详情和响应详情。Charles 默认代理端口是 8888和 Fiddler 保持一致是巧合不是刻意设计。菜单路径Proxy - Proxy Settings 关键配置HTTP Proxy 端口 8888勾选 Enable transparent HTTP proxying2.3 浏览器开发者工具如果只是在浏览器里临时看请求不需要单独安装抓包工具。按 F12 打开开发者工具切换到 Network 面板刷新页面后即可看到所有请求。浏览器开发者工具的优势是零门槛、不改变代理设置缺点是只能抓浏览器自己的请求抓不了 App 请求也无法像 Fiddler / Charles 那样做细致的断点修改和重发。实际工作中我的个人习惯是快速排查浏览器接口直接用 DevTools。完整接口调试与 App 抓包用 Charles 或 Fiddler。分析 TCP / UDP 底层问题用 Wireshark。2.4 示例项目与目标本文的实战演示会以本地启动的一个简单后端服务为例。这个服务返回一个 JSON 数据接口{ code: 200, message: success, data: { name: CSDN, type: tech } }你可以用任意语言写一个最简单的 HTTP 服务。为了演示方便下面用 Python 内置的http.server快速启动一个服务。如果本地没有 Python也可以使用任意在线 API 测试地址或者直接访问一些公开 API例如https://api.github.com https://httpbin.org/get我不建议在真实生产环境中随意抓包必须遵守授权范围。测试环境随便用。3. 抓包核心原理拆解3.1 HTTP 代理原理Fiddler 和 Charles 的本质都是一个本地 HTTP 代理服务器。当浏览器或手机配置了代理后所有 HTTP 请求都会先发给这个本地代理再由代理转发给真实服务器。客户端 - 本地代理(Fiddler/Charles) - 真实服务器 | v 记录并展示报文所以抓包工具能“看见”明文内容并不是因为它能破解加密而是因为客户端主动把流量交给了它。理解了这一点后面排查“为什么抓不到包”会容易很多。3.2 HTTPS 中间人解密原理HTTPS 的请求内容本身是加密的代理工具无法直接看到明文。为了调试方便Fiddler / Charles 采用了“中间人”机制代理工具生成一个自己的根证书。客户端信任这个根证书后代理工具即可以对客户端冒充服务端对服务端冒充客户端。HTTPS 连接被代理拆成两段客户端与代理之间、代理与服务器之间。客户端 --TLS解密-- 代理 --TLS加密-- 真实服务器因此要让 Fiddler / Charles 抓到 HTTPS 请求必须先在设备上安装并信任代理工具的根证书。这是许多新手第一次抓 HTTPS 包失败的最常见原因。3.3 为什么不建议全局代理很多同学在电脑上安装抓包工具后发现浏览器上网突然变慢或者部分网页打不开。这通常是因为代理工具启动了系统全局代理并且证书没有被正确信任。为了避免影响正常上网我建议在使用抓包工具时明确设置需要代理的域名或地址而不是全局代理。抓完立即关闭代理开关。操作FiddlerCharles开启代理Tools - Options - Connections - 确认端口Proxy - Proxy Settings - 确认端口关闭代理Fiddler 右上角状态栏点击Charles 工具栏左上角连续点击代理开关过滤域名左侧顶部 Filters 设置Proxy - Recording Settings - Include4. 完整实战案例从 HTTP 请求到前端接口调试4.1 启动一个本地测试服务先用 Python 启动一个最简单 HTTP 服务确保本机可以访问python -m http.server 8000启动后浏览器访问http://localhost:8000或者我们使用一个返回 JSON 的简单 Flask 应用。先把 Flask 安装好pip install flask创建文件app.pyfrom flask import Flask, jsonify, request app Flask(__name__) app.route(/api/demo, methods[GET, POST]) def demo(): if request.method POST: data request.get_json() print(收到请求体, data) return jsonify({ code: 200, message: success, data: { name: CSDN, type: tech } }) if __name__ __main__: app.run(host0.0.0.0, port8080)运行python app.py访问http://localhost:8080/api/demo可以看到 JSON 返回。4.2 Fiddler 抓取 HTTP 请求打开 Fiddler确认代理端口为 8888。浏览器访问http://localhost:8080/api/demoFiddler 左侧会话列表会出现一条请求点击后可以在右侧看到Request Headers GET /api/demo HTTP/1.1 Host: localhost:8080 Connection: keep-alive Response Body { code: 200, message: success, data: { name: CSDN, type: tech } }也就是说Fiddler 默认已经可以抓取 HTTP 明文请求。这里有一个细节本地 localhost 请求有时候不会自动走系统代理。如果抓不到可以在 Fiddler 底部状态栏中找到All Processes或Web Browsers切换或者把浏览器请求地址从localhost改成127.0.0.1。4.3 Fiddler 抓取 HTTPS 请求HTTPS 请求默认抓不到明文需要开启 HTTPS 解密并安装根证书。Tools - Options - HTTPS 勾选 Capture HTTPS CONNECTs 勾选 Decrypt HTTPS traffic然后在弹出的证书安装窗口中一路选择“是”。安装完成后重启浏览器访问https://www.baidu.comFiddler 中会出现很多 HTTPS 请求点开任意一条可以看到明文请求头和响应头。如果不勾选这些选项Fiddler 只能展示一条Tunnel to ...连接无法查看内部内容。这是很多新手第一次抓不到 HTTPS 包的根源。4.4 Charles 抓取 HTTPS 请求Charles 中配置 HTTPS 解密也很类似Proxy - SSL Proxying Settings 勾选 Enable SSL Proxying 点击 AddHost 填 *Port 填 443然后Help - SSL Proxying - Install Charles Root Certificate系统会弹出钥匙串访问或证书安装向导。在 macOS 上还需要在“钥匙串访问”里把 Charles 证书设置为“始终信任”否则 Safari、Chrome 等浏览器可能仍然提示证书不可信。证书位置登录 - 证书 - Charles Proxy CA 右键 - 显示简介 - 信任 - 使用此证书时 - 始终信任4.5 抓取手机 App 请求抓手机 App 请求是抓包工具的核心使用场景之一。整体流程如下电脑和手机连接同一个局域网。在抓包工具中开启远程连接。FiddlerTools - Options - Connections - Allow remote computers to connectCharlesProxy - Proxy Settings - 勾选 Allow remote computers to connect手机 Wi-Fi 设置中配置 HTTP 代理为电脑局域网 IP端口为 8888。手机浏览器访问http://charlesproxy.com/getssl或 Fiddler 提示的证书下载地址下载根证书。在手机设置中安装并信任该证书。打开 App 查看请求。不同 Android / iOS 版本对用户证书的信任策略存在差异。比如 Android 7.0 以上很多应用默认不信任用户安装的 CA 证书此时普通代理无法直接解密应用内 HTTPS 流量。遇到这类场景一般需要在开发版 App 中通过networkSecurityConfig显式信任用户证书或者使用已 root 的设备将证书移入系统证书目录或者与开发团队确认是否允许调试代理。这些操作必须在你自己的调试设备、测试环境或已获得授权的前提下进行。不要对未经授权的第三方 App 进行抓包。4.6 过滤请求会话太多怎么办抓包最头疼的问题不是抓不到而是请求太多。打开任意一个现代网站几十个请求瞬间涌进来根本分不清哪条是接口。Fiddler 支持左侧过滤左侧右上角 - Filters 选项卡 勾选 Use Filters 在 Host 区域选择 Show only the following Hosts 输入 localhost:8080Charles 支持Proxy - Recording Settings - Include 添加需要记录的主机地址和端口过滤能力非常关键。实际联调中我们会事先约定只抓某个域名或某几个接口避免大量噪音请求干扰判断。4.7 断点修改请求模拟异常场景断点功能可以拦截请求在发送给服务器之前或服务器返回后暂停从而修改请求参数或响应内容。Charles 中断点修改示例Proxy - Breakpoints 点击 Add 填写要断点的域名、请求类型和路径 刷新页面后Charles 会弹出 Breakpoint 窗口可以修改请求头、请求体然后点击 Execute 继续Fiddler 中可以用QuickExec 命令行输入 bpu /api/demo 访问该接口时请求会被中断 修改右侧 Inspectors 中的 Request Body 点击 Run to Completion断点最常见的业务场景是模拟前端传了异常参数验证后端校验逻辑是否生效。修改响应内容测试前端对异常响应的兼容处理。模拟超时或无响应验证 loading 和超时提示。4.8 重发请求快速回归验证重发请求指的是对已经抓到的请求做“重新发送”。这在接口文档不完整、参数复杂的情况下非常有用不需要重新构造请求只需要选中历史请求微调参数后再次发送。Charles 中选中一条请求 - 右键 - Repeat 或 Repeat Advanced Repeat原样重发 Repeat Advanced可修改并发次数和间隔Fiddler 中选中一条请求 - 右侧 Inspectors - 点击 Raw 查看原始报文 或者直接点击工具栏里的 Replay 按钮重发请求是接口联调中的高频操作。比如后端改了一个字段想快速验证是否影响旧参数我们经常会直接抓上一次的记录改一下参数再发一次比打开 Postman 重新填写 Header、Body 高效很多。4.9 模拟弱网与延迟移动端开发经常要模拟弱网场景Charles 自带网络限速功能Proxy - Throttle Settings 勾选 Enable Throttling 选择带宽、延迟、丢包率Fiddler 可以通过脚本或自定义插件模拟也可以使用右侧菜单中的 Simulate Modem Speeds。弱网模拟主要用于验证请求超时时间设置是否合理。网络中断时页面是否有友好提示。数据加载中的 loading 状态是否正常。4.10 抓包结果如何保存和分享联调中经常需要把抓包结果发给相关同事。Fiddler 和 Charles 都支持导出会话文件。Charles选中多条请求 - File - Export Session 保存为 .chls 文件FiddlerFile - Export Sessions 保存为 .saz 文件对方收到后用对应的抓包工具打开即可看到完整的请求和响应详情。比截图要清晰得多。如果是临时的、简单的查看也可以直接右键复制请求的 CURL 命令发给同事后同事在自己的终端一条命令就能复现curl http://localhost:8080/api/demo \ -H Content-Type: application/json \ --data-raw {name:CSDN}Charles 和 Fiddler 都支持Copy as cURL功能这是我认为最实用的细节功能之一。5. 常见问题与排查思路我在实际使用过程中以及很多同事和朋友刚开始学抓包时最常见的坑主要集中在下面几类。问题现象常见原因解决思路浏览器能看到请求Fiddler / Charles 看不到浏览器未走代理或代理扩展禁用检查代理设置重启浏览器使用 127.0.0.1 访问只能看到 CONNECT 隧道看不到内容未开启 HTTPS 解密开启 SSL Proxying / Decrypt HTTPS traffic并安装根证书手机能上网但 App 请求抓不到手机未配置代理或证书未安装/未信任检查 Wi-Fi 代理重新下载安装证书并确认信任Android App 抓不到 HTTPS 明文应用不信任用户证书开发版应用显式信任证书或在已授权测试设备中处理抓包后网页无法打开证书未信任或全局代理异常先关闭代理确认网站正常再逐步排查证书本地 localhost 抓不到部分系统或浏览器默认不代理本地地址访问 127.0.0.1或在代理设置中增加 localhost抓包后电脑无法上网代理端口被占用或代理未退出检查抓包工具是否正常退出重启代理进程Charles 证书安装后仍提示不安全macOS 未设置为“始终信任”钥匙串访问中修改信任策略如果遇到“抓不到包”这类问题建议按这个顺序排查浏览器上能否打开互联网打不开说明代理异常先停用抓包工具。抓包工具是否处于监听状态代理端口是多少目标请求是否走了代理浏览器扩展、系统代理策略都会影响。HTTP 请求能否抓到抓不到说明代理链路不通。HTTPS 请求是否能解密不能解密先装证书、信任证书。6. 最佳实践与工程建议6.1 只在授权范围内抓包抓包能力很强但它本质上是在读取、分析网络流量。任何时候都要遵守法律法规和平台规则只对自有设备、自有服务、测试环境或已经获得明确授权的目标进行抓包。不要尝试对不熟悉的第三方应用或生产环境做抓包分析也不要将抓包能力用于绕过安全机制。6.2 善用过滤保持列表干净我的个人习惯是每次抓包前先明确本次要调试的接口域名然后在抓包工具中配置 Host 过滤只显示目标域名。这样不仅减少视觉干扰也能减少误操作。6.3 把抓包流程沉淀成团队文档团队协作时抓包不是个人技巧而是联调能力。建议把以下内容沉淀到团队内部 wiki抓包工具下载与安装方式。HTTPS 证书配置步骤。手机端代理配置方式。常见抓不到包的问题清单。6.4 结合 Postman / Apifox 使用抓包工具负责“看真实请求”接口调试工具负责“回放和断言”。两者结合起来效率最高先用 Charles / Fiddler 抓到完整请求复制为 cURL 或导入到 Postman / Apifox 中然后做参数修改、批量测试和环境切换。流程 Charles 抓包 - Copy as cURL - 导入 Postman/Apifox - 修改参数 - 跑测试6.5 关注敏感数据与日志脱敏抓包工具会展示完整的请求头和请求体其中很可能包含 Token、登录密码、手机号、身份证号等敏感信息。在录制演示视频、截图、导出抓包文件时务必先做脱敏处理或者直接使用测试账号与测试数据。生产环境的抓包行为更要注意不要在公共电脑上保存生产环境的抓包文件。用完及时清理导出文件。6.6 不要依赖抓包工具替代日志抓包能看到客户端发出的原始数据但看不到服务端内部处理逻辑。排查问题时应该把抓包和服务端日志、链路追踪工具结合起来。否则你只是知道“请求发送了”但无法确定服务端如何执行。7. 总结本文从抓包的概念出发讲解了 Fiddler 与 Charles 的代理原理、HTTPS 中间人解密机制并完整演示了本地服务启动、HTTP 请求抓取、HTTPS 抓取、手机 App 抓包、请求过滤、断点修改、重复请求、弱网模拟等实用功能。对于刚接触抓包的同学建议先跟着第 4 章的流程把本地 HTTP / HTTPS 请求完整抓一遍然后再尝试手机端抓包。下一步你可以继续学习HTTP 报文结构与常见状态码语义。Charles 高级脚本或 FiddlerScript 自动修改响应。弱网测试在自动化测试中的落地方式。使用 Wireshark 分析 TCP 连接建立与断开过程。抓包不是说看一遍就会的技能需要你在真实项目里反复用。特别是前后端发生“参数争议”的时候养成先抓包、再讨论的习惯解决问题的速度会快很多。如果本文对你有帮助可以收藏备用也欢迎在实际操作中按自己的系统版本适当调整界面路径。