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

排查实时聊天消息丢失、股票行情推送中断或协同编辑不同步这类问题，核心在于能否完整捕获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标记，服务端返回的帧一定不带——这是判断方向是否异常的第一眼依据。

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

下载APP查看