DevTools SSE 与 WebSocket 调试
用 Network 面板调试 SSE 与 WebSocket 连接状态、Header、消息流、缓存和代理问题。
#type / concept
#status / growing
#tech / dev / frontend
#platform / browser
#resource / chrome-devtools
[!info] related notes
- 所属 MOC: DevTools Network MOC
- 前置概念: SSE, WebSocket
- 并列概念: 请求与响应检查
- 关系笔记: 流式连接排查路线, SSE 连接缓存问题
DevTools SSE 与 WebSocket 调试
一句话定义
SSE 与 WebSocket 调试是在 Network 面板中确认长连接有没有真正建立、消息有没有持续流动、以及中间层有没有破坏协议行为。
核心内容
SSE 常看什么
Content-Type是否是text/event-stream- 是否错误带了压缩头
- 初始响应是否成功打开
- 数据流是否持续追加
WebSocket 常看什么
- 握手是否成功
- 状态码是否切换到协议层成功状态
- Frames / Messages 是否正常收发
- 关闭码、断开时机和重连行为是否符合预期
常见场景
- SSE 一直 CONNECTING
- WebSocket 握手失败
- 代理层压缩、缓冲或 Header 处理破坏流式连接
边界与易混淆点
- SSE 问题常常不是前端业务代码，而是代理、压缩、缓冲或 CORS
- WebSocket 连上了不代表业务协议正常，还要继续看消息内容
- 复杂长连接问题通常要联动服务端日志一起看