对前端工程师、移动端调试、接口联调或性能优化而言，Web 抓包（Web Packet Capture / Web 流量分析） 是最常见的工作流程之一。无论是定位跨域问题、分析资源加载、排查 API 错误，还是检查 HTTPS 握手，都离不开抓包。
但随着 Web 技术体系不断演进------ HTTPS 默认化、HTTP/2/HTTP/3 普及、Service Worker 缓存、前端代理层干扰、浏览器安全策略加强------ 开发者会越来越频繁地遇到：
- 浏览器 DevTools 看不到真实请求
- Charles/Proxyman 抓不到包
- HTTP/3 走 QUIC，被代理忽略
- WebSocket 数据无法被解析
- 部分请求被缓存、被重写或被拦截
- 跨端调试浏览器与移动端 Web 时数据不一致
因此，Web 抓包不能只依赖浏览器工具，而要构建 多层级协同的抓包体系。
一、Web 抓包为什么越来越难？
HTTPS Everywhere 让明文抓包不再可能
所有 Web 请求默认加密，无法直接查看内容。
HTTP/2 / HTTP/3 多路复用导致请求在底层以流形式传输
浏览器 DevTools 虽能显示逻辑请求，但：
- 代理工具抓到的是多路复用后的帧
- HTTP/3（QUIC）甚至不走代理
浏览器本身对网络请求做了优化
例如：
- 预连接（preconnect）
- 资源合并（coalescing）
- Cache / Service Worker 拦截
- 重定向链自动隐藏
使得开发者无法看到"真实的网络行为"。
移动端浏览器流量不一定经过同一代理
例如：
- App 内置 WebView
- 微信 H5
- 本地 VPN
- 零信任方案
结果是：浏览器能抓，WebView 抓不到；WebView 能抓，代理工具抓不到。
二、Web 抓包工具的分层体系
不同工具负责不同抓包层面，组合使用才能覆盖各种网络情况。
① 浏览器 DevTools（应用层抓包）
适用于：
- 查看 HTTP/HTTPS 请求
- 分析资源加载
- Performance 调优
不足：
- 看不到 QUIC
- 看不到 TLS 握手
- 看不到网络层错误
- 看不到移动端真实流量
② 代理抓包：Charles / Proxyman / Fiddler / mitmproxy
适用：
- HTTPS 解密
- 拦截并修改请求、响应
- 模拟弱网、注入错误响应
不足：
- QUIC 不走代理
- 自定义协议无法处理
- pinning WebView/内嵌浏览器会导致抓包失败
③ 协议层抓包：Wireshark / tcpdump
擅长：
- 分析 TCP 连接、TLS 握手
- 分析 HTTP/3／QUIC 数据
- 定位网络层问题（丢包、阻断）
不足：
- 噪音多，不易按 App 或浏览器过滤
④ 底层补抓工具 ------ 抓包大师（Sniffmaster）
当 Web 抓包遭遇：
- 代理抓不到包
- HTTP/3（QUIC）大量出现
- WebView 不走系统代理
- App 内浏览器有 pinning
- 需要分析底层 TCP/TLS 行为
此时 Sniffmaster 能提供：
- 捕获 HTTPS / TCP / UDP / HTTP 全数据流
- 自动识别协议类型（HTTP/HTTPS/mdns 等）
- 按 进程 / 域名过滤流量
- 可查看 HEX / 文本 / 二进制
- pcap 导出（可用 Wireshark 分析）
- 脚本拦截器用于修改请求或响应
- 支持 macOS、Windows、iOS
Sniffmaster 可以补足浏览器和代理层无法处理的底层流量，是 Web 抓包体系中的关键一环。
三、Web 抓包失败的主要原因与解决方案
浏览器 DevTools 能看，Charles 看不到 → QUIC / HTTP/3
如何验证：
- 在 Wireshark 中看到 UDP 443
- 请求中有
Alt-Svc: h3
解决方式：
- 禁用 HTTP/3
- 使用 Sniffmaster 捕获 QUIC/TCP 数据
- 分析 TLS 握手情况
WebView 只能看到部分请求 → 内嵌浏览器未走系统代理
表现：
- 浏览器能抓
- App 内 H5 无法抓
解决方式：
- 使用 Sniffmaster 按应用过滤抓取真实流量
- 分析网络层行为
HTTPS 抓不到包 → 证书 Pinning
典型场景：
- 支付页
- 登录页
- SDK 加载资源
解决方法：
- 代理层无效
- 必须使用底层补抓（Sniffmaster）
TLS 握手失败导致 Web 抓包无法继续
使用 Sniffmaster + Wireshark 查看：
unknown_ca→ 证书链问题handshake_failure→ 协议版本问题bad_certificate→ pinning
WebSocket 抓不到包
WebSocket 如果走 wss + 自定义压缩格式，会导致代理无法还原数据。
解决方案：
- 用 Sniffmaster 抓取底层 TCP 数据
- 用 HEX 或二进制格式查看实际帧
四、Web 抓包完整流程
步骤 1：浏览器 DevTools 查看逻辑请求
关注：
- Headers
- Timing
- Initiator
- Redirect Chain
步骤 2：代理工具分析 HTTPS 明文内容
关注：
- API 请求参数
- Cookie
- 跨域相关头部
- Cache-Control
步骤 3：遇到抓不到包 → 使用 Sniffmaster 抓取底层数据流
流程：
- 选择浏览器或 WebView 对应进程
- 捕获 HTTPS/TCP/UDP 数据流
- 查看协议识别结果
- 如果需要深度分析 → 导出 pcap 到 Wireshark
- 判断是：
- QUIC？
- TLS 握手失败？
- 不走代理？
- 自定义协议？
Sniffmaster 在此起"底层补抓"的作用。
五、真实案例：移动端 Web 页面加载异常但代理无数据
现象：
- H5 页面部分接口超时
- DevTools 显示请求 pending
- Charles 无流量
排查：
- Sniffmaster 按 App 过滤抓取
- 观察到大量 UDP 443 → HTTP/3
- 导出 pcap → Wireshark
- QUIC Handshake 未完成 → 中间网络节点阻断
结论：问题出在网络环境，而不是前端代码。
代理工具无法分析的场景，通过底层抓包得到完整复现。
Web 抓包的最佳工具组合
| 层级 | 工具 | 用途 |
|---|---|---|
| 应用层 | Chrome DevTools | 逻辑请求分析 |
| 代理层 | Charles / Fiddler / Proxyman | HTTPS 解密与调试 |
| 协议层 | Wireshark / tcpdump | TLS、QUIC、TCP 分析 |
| 补抓层 | 抓包大师（Sniffmaster） | 捕获真实数据流、解决 WebView/QUIC/pinning 等无法抓包场景 |
现代 Web 抓包必须遵循"分层分析 + 工具组合"模式。