Charles抓取手机WebSocket全指南：从配置到实战避坑
WebSocket 调试为什么总让人抓狂
移动端开发里，WebSocket 就像一条看不见的电话线：App 和服务器聊得热火朝天，你却只能盯着日志干瞪眼。�抓包工具要么看不懂加密帧，要么干脆把二进制当乱码扔给你。更糟的是，iOS 17 和 Android 13 以后，系统对「用户证书」直接降级，HTTPS 流量说断就断。于是调试流程变成：改代码→打日志→重新打包→祈祷复现，一杯咖啡喝完，问题还在原地。
为什么选 Charles 而不是 Wireshark / Fiddler
- Wireshark 强大，但要在手机上跑 tcpdump，再把几百兆的 pcap 拖回电脑，光想想就累；而且 WebSocket 帧被 TLS 裹得严实时，它只能给你「Encrypted Application Data」。
- Fiddler Everywhere 界面现代，可惜免费版限速，Linux 还常年缺席。
- Charles 体积不到 100 MB，跨平台，开箱即支持 HTTP/2 和 WebSocket over TLS；最香的是「Structure」树一眼就能看到 ws/wss 连接，双击即可展开帧详情，对新手最友好。
1. 先把 Charles 的代理跑道铺好
安装后第一次打开，Charles 默认监听*:8888。为了后面少踩坑，建议把端口改成好记的8889，并强制开启透明代理：
- 菜单栏 Proxy → Proxy Settings → Proxies
- Port 填 8889，勾选 Enable transparent HTTP proxying
- 切到 SSL Proxying，点 Add，Host 填
*，Port 填*，让 Charles 对所有域名都尝试解密——本地调试别害羞，后面再收紧规则
<!-- 片段：charles-proxy.xml 手动导入用 --> <sslProxying> <location> <host>*</host> <port>*</port> </location> </sslProxying>2. 把根证书塞进手机，并哄系统信任它
Android 13+
- 手机连接电脑热点（同网段），Wi-Fi 设置里把代理指向电脑 IP:8889
- 浏览器访问
chls.pro/ssl，自动下载charles-proxy-ssl.crt - 设置 → 安全 → 加密与凭据 → 安装证书 → CA 证书，选中刚下载的文件
- 如果系统弹出「此证书可能受限制」的红色警告，别慌，这是 Android 13 的新策略；继续点「仍然安装」
- 安装完成后，「信任的凭据 → 用户」里能看到 Charles 的条目，但默认不被 App 信任。调试自己写的应用时，在
network_security_config.xml里加一段即可：
<network-security-config> <debug-overrides> <trust-anchors> <certificates src="user"/> </trust-anchors> </debug-overrides> </network-security-config>打包 debug 包时把android:debuggable=true打开，Charles 就能解密 HTTPS WebSocket。
iOS 17
- 同样连代理后访问
chls.pro/ssl，系统会提示下载描述文件 - 设置 → 已下载描述文件 → 安装 → 输入锁屏密码
- 关键一步：设置 → 通用 → 关于本机 → 证书信任设置 → 把 Charles Proxy CA 开关打开，否则 WebSocket 依旧走系统保护通道，Charles 只能抓到 TCP 黑洞
- 如果调试的是上架 App Store 的正式包，iOS 17 默认启用「应用隔离证书策略」，需要让后端临时关闭 Certificate Transparency 检查，或改用内部 TestFlight 包调试
3. 过滤 WebSocket 帧，只看想看的
Charles 左侧结构树里，wss 连接会显示成「 WebSocket」。右键 → Focus 可把它钉到顶部。接下来：
- 在 Sequence 面板 Filter 栏输入
ws或域名关键字，实时流量瞬间清爽 - 双击任意帧，右侧出现「WebSocket Message」标签，Binary 帧可切换 Hex/UTF-8 视图；JSON 直接高亮折叠
- 如果服务端发的是 ping/pong，勾选「Ignore pong frames」可隐藏心跳，避免刷屏
4. 常见报错与快速自查表
| 现象 | 可能原因 | 解决 |
|---|---|---|
| 手机无法上网 | 电脑防火墙没放行 8889 | 临时给 Charles 入站规则开 TCP 8889，调试完记得关 |
| SSL Unknown | 证书没信任 | Android 看network_security_config，iOS 看「证书信任设置」 |
| 426 Upgrade Required | 后端强制 TLS1.3，而 Charles 4.6 以下默认关闭 | Proxy → SSL Proxying → Locations → 勾选 Enable TLS 1.3 |
| 乱码 | 二进制掩码未解 | 确认帧类型为 Text/Binary，Charles 会自动解掩码；若服务端加密内容，需让后端给调试密钥 |
5. 安全底线：别把调试习惯带进生产
- 永远只在 debug 包上信任用户证书，正式包哪怕内部测试也建议走自研日志网关
- 调试完把代理 Wi-Fi 删掉，防止 QA 同学第二天抓包发现你的个人隐私
- 公司网管若限制 8889，可改用 8443 等常见端口，但别在公共 Wi-Fi 开透明代理，小心被抓成「中间人」
6. 留一道思考题：用 Charles 模拟弱网，看 WebSocket 如何断线重连
Charles 的 Proxy → Throttle 可以限制带宽、延迟、丢包率。把上行/下行调到 20 kbps，丢包 10%，再让 App 发心跳，观察：
- 客户端多久触发
onClose？ - 重连退避策略是线性还是指数？
- 服务端有没有心跳超时？
把实验结果和日志对照，就能验证重连算法是否真能在地铁里保命。
写完这篇，我最大的感受是：工具其实不挑食，关键得跑通「证书 → 代理 → 过滤」这条链路。为了把整条链路拆给自己看，我顺手在 从0打造个人豆包实时通话AI 实验里把 Charles 抓到的 WebSocket 帧直接喂给豆包语音模型，让它实时读出来，居然连「心跳 ping」都被念成了「砰」一声，场面一度非常魔性。如果你也想把抓包和 AI 玩在一起，不妨去实验里试试，小白也能三分钟跑起麦克风对话，顺便验证自己的重连逻辑，比干看日志有趣多了。