chrome原生network面板仅能查看websocket消息，无法拦截、修改或模拟服务器推送；websocket devtools插件通过劫持构造函数实现消息编辑、服务器模拟、流量拦截及iframe支持，真正实现可动、可控、可复现的深度调试。

Chrome 自带的 Network 面板能看 WebSocket 消息，但不能拦截、不能模拟服务器推送、无法修改帧内容——它只适合“旁观”，不适合“调试”。真要解决问题，得用专为 WebSocket 设计的工具，核心是：能动、能控、能复现。

Network 面板里怎么快速找到 WebSocket 连接

打开 DevTools（F12）→ 切到 Network 标签 → 刷新页面或触发连接。关键操作不是盲目滚动，而是用过滤器：

• 在 Network 顶部筛选框输入 ws 或 websocket，列表立刻只留 WebSocket 类型请求
• 点击该请求 → 右侧切到 Messages 子标签，才能看到实际收发的帧（绿色上行 = send，红色下行 = receive）
• 如果消息是 JSON，点击内容会自动格式化；但二进制帧只会显示 [object ArrayBuffer]，需手动点开 Frames 标签页查十六进制
• 注意：Network 面板不记录连接建立前的握手细节（如 Sec-WebSocket-Key），也不保留断连后的消息历史

WebSocket DevTools 插件为什么比原生面板好用

它不是增强 Network 面板，而是重写了一套监控逻辑：通过劫持 WebSocket 构造函数，在 JS 层直接代理所有通信。这意味着：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 消息可编辑：双击任意一条 Received 消息，改完字段直接点“Send as Client”就能重发
• 服务器消息可伪造：右侧面板填 JSON，点 Simulate Server Message，前端立刻收到并触发 onmessage 回调
• 流量可拦截：勾选某条消息旁的 Block，它就永远不会到达前端，适合测断网重连逻辑
• 支持 iframe 内嵌页：页面里套了另一个 Web 应用？它的 WebSocket 连接也会出现在左栏列表中，无需额外注入脚本

插件配置容易忽略的三个坑

装完插件不等于开箱即用，这几个初始化动作常被跳过：

• 首次启用后必须刷新所有已打开的含 WebSocket 页面，否则插件无法 Hook 到已有连接
• maxMessages 默认是 2000，但在长连接持续数小时的场景下，缓存溢出会导致旧消息被丢弃，建议按需设为 5000 并开启 enableLogging: true
• 心跳包（ping/pong 帧）默认不显示，若要分析连接稳定性，需在插件配置里显式移除 excludeTypes: ['ping'] 这项过滤

真正卡住开发的从来不是“连不上”，而是“连上了但消息没触发预期逻辑”。这时候你不需要猜服务端有没有发，而是直接用插件模拟一条带正确字段的 Server -> Client 消息——如果 UI 依然不动，问题一定在前端事件监听或状态更新链路里。这个动作本身，就是调试思路从“怀疑别人”转向“确认自己”的分水岭。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！