5中利Chrome开发者工具Network面板调试Ws消息案例|Duuu笔记

HTML在复杂场景下的解决方案

Chrome开发者工具Network面板原生支持WebSocket调试，通过筛选ws类型、查看Messages标签页的帧方向/Opcode/Payload等信息，结合时间戳与Performance面板可高效分析通信行为及异常。

Chrome开发者工具的Network面板是调试WebSocket（Ws）消息最直接有效的入口，不需要装插件、不依赖第三方抓包工具，所有关键帧级信息都原生可见。

在Network面板中快速找到Ws连接

打开DevTools（F12），切换到Network标签页，刷新页面触发连接建立。接着做两件事：

在左上角筛选框输入

ws

，只保留WebSocket类型请求；

右键点击表头，勾选

Type

列——确认该请求的Type显示为

websocket

，避免和普通HTTP请求混淆。

如果页面有多个Ws连接，可通过Initiator列定位到具体是哪个JS文件发起的，比如

chat.js:42

，方便回溯代码上下文。

查看Ws消息内容与结构

点击目标Ws连接，在右侧切换到

Messages

标签页，这里会按时间顺序列出所有收发帧：

Action Figure AI

借助Action Figure AI的先进技术，瞬间将照片转化为定制动作人偶。

下载

“

（深入）

”；

每条记录包含方向（

→ 发送

/

← 接收

）、时间戳、Opcode（如Text/Binary/Ping/Pong）、Payload长度；

右键表头可勾选

Opcode

和

Mask

，能快速区分是否为客户端掩码帧（浏览器发出的帧一定带Mask）；

点击某条消息，下方会显示原始内容：文本帧直接显示UTF-8字符串，二进制帧以十六进制或base64形式呈现，支持复制和导出为HAR文件（含完整帧数据）。

结合时间线分析通信行为

Messages里的毫秒级时间戳可用于判断实际RTT、重连间隔、消息堆积等现象：

连续几条

← Ping

后长时间没收到

→ Pong

，说明服务端响应异常或网络中断；

大量

← Text

帧在极短时间内密集到达，而UI更新明显滞后，提示前端解析或渲染压力大；

配合Performance面板录制：勾选“Network”，火焰图中会出现

Receive WebSocket

区块，可与JS调用栈对齐，精准定位是

JSON.parse()

慢，还是

innerHTML赋值

卡顿。

识别异常帧与调试线索

不是所有Ws帧都规整。以下信号值得警惕：

Opcode为

Continuation

但前面没有对应的

Text/Binary

起始帧——说明分片传输被截断或错序；

某条Text帧Payload长度远超预期（如200KB），却未压缩，容易导致主线程阻塞；

反复出现

← Close

后立刻

→ Open

，结合时间戳看是否在弱网下形成“重连风暴”；

消息内容乱码或无法JSON解析，先检查编码（服务端是否误发GBK？）、再确认前端是否漏了

responseType = 'text'

设置（尤其Blob场景）。