为什么谷歌浏览器开发者工具抓取不到WebSocket的数据包

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

当你在调试实时聊天、股票行情推送或协同编辑功能时，Chrome开发者工具Network面板里始终看不到ws://或wss://连接条目，不是工具坏了，而是捕获链路上某个环节被跳过——漏掉刷新时机、过滤没生效、Type列未启用，整条WebSocket通信就会彻底隐身。

确认WebSocket连接是否真实建立

打开浏览器控制台（F12），切换到Console标签页，输入sockets = Object.values(window).filter(v => v instanceof WebSocket)并回车。如果返回空数组，说明页面JS根本没执行new WebSocket()；若返回实例但readyState为0（CONNECTING）或3（CLOSED），需检查控制台是否有WebSocket connection to ... failed报错。

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

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

第一步：打开目标网页后，按F12或Ctrl + Shift + I唤出开发者工具。
第二步：点击顶部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编码。