分享一个调试 WebSocket 的要点：

必须在 Chrome Network 面板启用 WS 过滤、连接建立前刷新页面并切换到 Frames 标签页，才能捕获 WebSocket 握手及双向帧数据。否则连接不可见。

调试实时聊天、股票行情推送或者协同编辑功能时，经常发现 Network 面板里死活看不到 ws:// 或 wss:// 的连接条目。

别急着怀疑工具坏了——大概率是捕获链路上的某个环节被跳过了：刷新时机不对、过滤没开、Type 列没勾选，整条 WebSocket 通信就这么悄无声息地隐身了。

确认 WebSocket 连接是否真实建立

打开浏览器控制台（F12），切换到 Console 标签页，输入 sockets = Object.values(window).filter(v => v instanceof WebSocket) 并回车。

如果返回空数组，说明页面根本没执行 new WebSocket()。如果返回了实例但 readyState 是 0（CONNECTING） 或 3（CLOSED），那就得看看控制台有没有 WebSocket connection to ... failed 的报错。

这里有个常见陷阱：WebSocket 初始化被包裹在 if (featureFlag) { new WebSocket(...) } 里，而 flag 为 false；或者被 try/catch 静默吞掉了异常。连接就这么“凭空消失”了。

启用 WS 过滤并确保连接被捕获

1. 打开目标网页后，按 F12 或 Ctrl+Shift+I 唤出开发者工具。
2. 点击顶部 Network 选项卡。
3. 在左上角筛选框中直接输入 ws 并回车；Chrome 128+ 版本需要先点击 Filter 按钮再输入，否则过滤不生效。
4. 最关键的前提：必须在 WebSocket 连接建立前刷新页面。如果连接是靠按钮点击触发的（比如“加入会议”），那就不能只按 F5 刷新。要先点击那个按钮，再立即刷新。否则，new WebSocket() 根本不会被拦截。

从列表中准确定位 WebSocket 条目

1. 右键 Network 表头 → 勾选 Type 列 → 找到 Type 值为 websocket 的条目（不是 xhr、fetch 或 document）→ 单击它。
2. 观察 Initiator 列内容（例如 chat.js:42），直接跳转到发起 new WebSocket() 的代码行，确认是否被 if 条件跳过或 try-catch 吞掉报错——这是连接“凭空消失”的最常见原因。
3. 在筛选框中改输 wss:// 或 ws://，可以单独分离加密或非加密连接。注意：wss 条目无法查看明文载荷，需要配合 SSLKEYLOGFILE + Wireshark 才能解密。

查看 client/server 双向帧数据

1. 点击已捕获的 WebSocket 条目 → 右侧切换至 Frames 标签页（不是 Messages，2026 年主流版本已经统一命名了）。
2. 如果帧列表为空，先切到 Headers 标签页，再切回 Frames——这一步强制刷新帧视图，否则新消息永远不会出现。
3. 每条记录左侧标注 client 或 server，右侧显示类型（Text/Binary/Close）、时间戳和 Payload 长度。文本帧点击后自动格式化 JSON，二进制帧默认显示 [object ArrayBuffer]，必须点开才能看到十六进制或 base64 编码。

《夸克》非常好用的免费AI浏览器

下载APP查看