必须在chrome network面板中启用ws过滤、连接建立前刷新页面并切换到frames标签页，才能捕获websocket握手及双向帧数据；否则连接不可见。
当你需要排查实时聊天消息丢失、股票行情推送中断或协同编辑不同步等问题时，必须在 Chrome Network 面板中完整捕获 WebSocket 握手请求与后续双向帧数据——漏掉刷新时机、过滤设置错误或未切换 Frames 标签页，整条连接就会彻底不可见。
启用 WS 过滤并确保连接被捕获
第一步：打开目标网页后，按 F12 或 Ctrl + Shift + I（Windows/Linux）/Cmd + Option + I（macOS）唤出开发者工具。
第二步：点击顶部标签栏的 Network 选项卡，进入网络监控界面。
第三步：在左上角筛选框中直接输入 ws 并回车；部分新版 Chrome（如 128+）需先点击 Filter 按钮再输入，否则过滤不生效。
第四步：【关键前提：必须在 WebSocket 连接建立前刷新页面】——如果连接靠按钮点击触发（如“加入会议”），就不能只按 F5 刷新，要先执行该操作，再立即刷新，否则 new WebSocket() 根本不会被拦截。
从列表中准确定位 WebSocket 条目
方法一：右键 Network 表头 → 勾选 Type 列 → 找到 Type 值为 websocket 的条目（不是 xhr、fetch 或 document）→ 单击它。
方法二：观察 Initiator 列内容（例如 chat.js:42），直接跳转到发起 new WebSocket() 的代码行，确认是否被 if 条件跳过或 try-catch 吞掉报错——这是连接“凭空消失”的最常见原因。
方法三：在筛选框中改输 wss:// 或 ws://，可单独分离加密或非加密连接；注意 wss 条目无法查看明文载荷，需配合 SSLKEYLOGFILE + Wireshark 才能解密。
查看 client/server 双向帧数据
① 点击已捕获的 WebSocket 条目 → 右侧切换至 Frames 标签页（不是 Messages，2026 年主流版本已统一命名）。
② 若帧列表为空，先切到 Headers 标签页，再切回 Frames——这一步强制刷新帧视图，否则新消息永远不会出现。
③ 每条记录左侧标注 client 或 server，右侧显示类型（Text/Binary/Close）、时间戳和 Payload 长度；文本帧点击后自动格式化 JSON，二进制帧默认显示 [object ArrayBuffer]，必须点开才能看到十六进制或 base64 编码。
④ 右键表头 → 勾选 Opcode 和 Mask → 浏览器发出的帧一定带 Mask 标记，服务端返回的帧一定不带，这是判断方向是否异常的第一眼依据。
