WebSocket DevTools

WebSocket DevTools 是一款专为 WebSocket 连接调试而设计的 Chrome/Edge/Brave 等 Chromium 系列浏览器的开发者工具扩展。它把原本“看不见、摸不着”的实时通信变成了可视化、可交互的调试面板，使开发者能够在页面中直接查看、拦截、修改和分析 WebSocket 消息，从而快速定位和解决通信问题。

• WebSocket DevTools官网入口网址：https://www.websocket-devtools.com/
• WebSocket DevTools开源项目地址：https://github.com/law-chain-hot/websocket-devtools

主要特性

• 实时监控：在 DevTools 面板中实时展示所有打开的 WebSocket 连接状态、握手信息以及收发的每一条消息。
• 消息记录：完整保存发送和接收的消息，支持按时间、类型、内容等维度过滤查看。
• 消息拦截与编辑：可以在消息发送前或接收后插入自定义过滤器，对 JSON、二进制等多种格式进行校验、修改或阻断。
• 连接管理：提供手动创建、关闭、重连 WebSocket 连接的快捷按钮，便于在调试过程中快速切换不同的服务器地址或协议参数。
• 性能分析：统计连接延迟、消息大小、帧率等指标，帮助评估实时通信的性能瓶颈。
• 错误追踪：开启错误追踪后，工具会捕获异常关闭、协议错误等异常信息并在面板中高亮提示。
• 自定义过滤：支持用户自行编写过滤函数，实现复杂的业务层过滤或消息格式验证（如 JSON Schema 校验）。

兼容性与隐私

• 支持 Chrome 88+、Edge、Brave 等 Chromium 浏览器。
• 完全兼容原生 WebSocket API、Socket.IO、ws 等常见库。
• 采用纯本地运行模式，所有调试数据均保存在本机，不会上传至服务器，遵循 MIT 开源协议，代码可随时审查。

使用场景

• 前端开发：在调试实时聊天、推送、游戏等需要双向通信的页面时，快速捕获并分析消息流。
• 后端联调：配合服务器日志，对比前后端的消息结构，验证协议一致性。
• 性能调优：通过延迟、消息大小统计，发现网络瓶颈或不合理的消息频率。
• 安全审计：拦截敏感字段或异常数据，防止潜在的注入或协议攻击。

安装与入口

• 在 Chrome Web Store 搜索 “WebSocket DevTools”，点击安装后即可在浏览器的 DevTools 中看到新增的 “WebSocket DevTools” 面板，打开任意包含 WebSocket 的页面即可开始使用。官方主页提供了最新版本下载、使用文档以及开源代码仓库，地址为 https://www.websocket-devtools.com/ 。

小贴士：

• 使用 “Add Filter” 可以快速添加自定义过滤器，实现业务层的消息校验。
• 开启 “Error Tracking” 能在连接异常时第一时间得到提示，省去反复查看控制台的麻烦。

通过上述功能，WebSocket DevTools 为实时通信的开发、调试、性能分析提供了一站式解决方案，是前后端协同调试 WebSocket 的利器。