在Chrome Network面板中需手动筛选WS/WSS连接：打开DevTools→切至Network→刷新页面→在过滤框输入ws或勾选WS复选框，即可显示ws://或wss://协议条目。
Chrome Network 面板里怎么找到 WebSocket 连接
WebSocket 连接不会像 HTTP 请求那样自动高亮或置顶，必须手动筛选，否则容易漏看。Network 面板默认开启录制（红色圆点），但需刷新页面触发握手才能捕获到 ws:// 或 wss:// 条目。
操作要点：
- 打开 DevTools 后切到
Network标签页，确保左上角录制按钮是红色 - 刷新页面或调用
new WebSocket(...)触发连接 - 在顶部过滤框输入
ws或点击漏斗图标勾选WS（Chrome 117+ 支持直接输wss） - 列表中出现协议为
ws/wss的条目，就是你要找的连接
注意：如果没看到，说明连接尚未建立，或被脚本延迟初始化（比如等用户登录后才 connect），此时需手动触发业务逻辑。
Firefox 网络监视器里怎么看 WebSocket 帧内容
Firefox 的网络监视器对 WebSocket 的支持比 Chrome 更直观，能原生展开“消息”标签页查看每帧收发详情，包括文本解析、二进制预览和 JSON 格式化。
关键步骤：
- 按
Ctrl + Shift + E（Win/Linux）或Cmd + Option + E（macOS）打开网络监视器 - 点击漏斗图标 → 勾选
WebSocket - 点击对应
wss://...条目 → 切换到右侧面板的消息标签页 - 若消息为空，尝试发送一条业务消息（如聊天输入），帧数据会实时追加
Firefox 会区分 Text 和 Binary 帧，并支持导出为 JSON 文件，适合排查服务端推送格式错误问题。
Chrome 里如何查看 WSS 消息大小和传输耗时
Chrome Network 面板不直接显示单条消息字节数，但可通过“响应”和“消息”子面板估算：握手阶段看 Upgrade 请求头，通信阶段看帧列表中的 Size 列（仅限文本帧，二进制帧显示为 (binary)）。
实际可获取的信息：
-
Headers子面板里，Response Headers下能看到Sec-WebSocket-Accept，确认握手是否成功 -
Messages子面板中，每行代表一帧，右侧Size是该帧有效载荷长度（不含 WebSocket 帧头） - 鼠标悬停某帧，会显示时间戳（相对于页面加载起点），可用于计算端到端延迟
- 双击文本帧可展开原始内容；二进制帧在 Chrome 117+ 可切换 HEX 查看（右键菜单）
⚠️ 注意：Size 不等于 event.data.byteLength —— 浏览器可能压缩或分片，真实流量应以应用层埋点为准。
为什么 Network 面板不能替代应用层流量统计
Network 面板只能看到浏览器与本地代理之间的帧，无法反映服务端真实吞吐、重传、心跳包、或客户端缓冲区未 flush 的数据。尤其在长连接维持期间，面板可能只显示几帧，但实际已累积大量待发消息。
典型偏差场景：
- 服务端批量推送多条消息，被合并成一个 TCP 包，Network 面板只记录一次接收
- 客户端使用
send()发送大 Blob，但浏览器内部做了流式分帧，面板显示多个小帧，Size总和 ≠ 原始byteLength - 连接空闲时的心跳 Ping/Pong 帧默认不显示在 Chrome 的 Messages 列表中（需在设置里启用“Show all frames”）
- 页面后台运行时，部分帧可能被节流或延迟渲染，面板时间线失真
真正要算准流量消耗，必须在代码里用 TextEncoder.encode(data).length（文本）或 data.byteLength（ArrayBuffer/Blob）做埋点，再结合 performance.now() 打时间戳——Network 面板只是辅助验证手段，不是数据源。
