调试 websocket 需“看得清、改得动、复现得了”：chrome devtools 适合基础观察但不记录握手；websocket devtools 插件支持编辑重发、模拟响应和拦截；charles/fiddler/wireshark 用于协议层分析；在线工具如 websocket test 和 apifox 便于快速验证与协作。
调试 WebSocket 流量和消息内容，关键不是“看得到”，而是“看得清、改得动、复现得了”。浏览器自带工具能帮你入门，但真要定位问题、验证逻辑、模拟异常，得用对方法和工具。
Chrome DevTools 基础排查
这是最快速的起点，无需安装任何插件：
- 按 F12 打开开发者工具 → 切到 Network 标签 → 刷新页面或触发连接
- 在顶部过滤框输入 ws 或 websocket，只留 WebSocket 连接条目
- 点击该连接 → 右侧切换到 Messages 标签页，绿色箭头是客户端发送，红色是服务端推送
- 文本帧会自动格式化（如 JSON），二进制帧显示为
[object ArrayBuffer]，需点开 Frames 标签页查十六进制
注意：Network 面板不记录握手细节（如 Sec-WebSocket-Key），断连后历史消息也会清空，适合初步观察，不适合深度调试。
用 WebSocket DevTools 插件深度干预
当需要修改、重发、拦截或模拟时，原生面板就不够用了。WebSocket DevTools 插件通过劫持 JS 层的 WebSocket 构造函数实现真正可控的调试：
WebSocket 8.18.2
下载
WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。
- 编辑并重发消息：双击任意一条 Received 消息，修改字段后点 “Send as Client”，前端立刻以新数据重发
-
伪造服务端响应：右侧面板填 JSON，点 “Simulate Server Message”，前端立即触发
onmessage回调 - 拦截特定消息：勾选某条消息旁的拦截开关，它就不会到达业务代码，适合测断网重连、消息丢失等边界场景
- 支持 iframe 场景：嵌套页面里的 WebSocket 连接也会被自动捕获，无需额外注入脚本
抓包工具辅助分析协议层
当问题涉及握手失败、TLS 加密、跨客户端（如 App）或需对比多端行为时，代理类工具更可靠：
- Charles Proxy：界面直观，支持 WebSocket 会话结构化展示、JSON 自动美化、消息导出与重发，适合日常开发和协作复现
- Fiddler：Windows 下免费且可脚本扩展，适合定制规则（如自动解压 Luckysheet 的 pako 压缩数据）
- Wireshark：底层协议全貌可见（TCP + TLS + WebSocket 帧），但信息庞杂，适合排查握手超时、帧解析错误等网络层问题
特别提醒：若遇到压缩数据（如 Luckysheet 默认用 pako gzip），需先将乱码字符串转为 Uint8Array 再解压，直接操作字符串会导致损坏。
在线工具快速验证与协作
适合临时测试、分享给同事或无环境限制的场景：
- WebSocket Test（在线版）：极简界面，支持 ws/wss 地址直连、原始帧查看、二进制消息调试，适合快速验证服务端是否正常响应
- Apifox：把 WebSocket 当作接口管理，支持环境变量、历史记录、团队共享，适合中大型项目持续维护
- Firefox 网络监视器：比 Chrome 多显示每条消息的时间戳和大小，十六进制/UTF-8 双视图切换更方便，适合分析推送频率或载荷异常
不复杂但容易忽略
