WebSocket DevTools 现已上线,轻松实现抓包、改包、断网以及消息重放,一站式解决调试难题,Chrome扩展商店即可安装,让你30秒快速上手。
提到 WebSocket,很多开发者的第一印象往往是“又爱又恨”。爱的是它传输速度快、实时性强,恨的则是调试起来两眼一抹黑,出了问题根本无从下手。
Network面板里的数据刷一次就消失一次,想抓个包得反复刷新页面,刷到怀疑人生;后端说“消息已经发了”,前端却一脸懵:“我怎么没收到?”。这种沟通全靠猜的日子,实在难熬。
现在,这块“黑布”终于被扯下来了——WebSocket DevTools正式上线。抓包、改包、模拟断网、消息重放,功能一应俱全。只需在Chrome商店一键安装,30秒就能开始使用。

什么是 WebSocket DevTools
简单来说,它是一个直接嵌入 Chrome 开发者工具(DevTools)的 WebSocket 专用监控面板。

安装之后,按下F12,你就能在DevTools顶部看到新增的“WebSocket DevTools”标签页。所有WebSocket连接状态、收发消息都一目了然,想编辑哪条就点哪条,再也不用在Network面板那堆小字里苦苦寻觅。
WebSocket DevTools 功能一览
实时监控——消息一出现,面板立刻点亮,体验如同刷微博一样实时顺畅。后台监控——即使关闭DevTools窗口,监控依然在后台持续运行,即使错过建连过程也能倒带回放。
消息模拟——想发什么JSON数据,直接编辑然后回车发送,前后端都无需再搭建Mock环境。
流量控制——勾选对应选项,可以让指定消息瞬间“断网”,弱网测试不求人。
收藏系统——将常用报文加为收藏,下次调试秒级调用,团队还能共享消息模板。
多语言——中英文双语随时切换,所有提示文案都清晰易懂。
DevTools 集成——原生面板无缝集成,操作手感和Network面板一样顺滑,零学习成本。
iframe 支持——即使页面里再嵌套页面,其中的WebSocket连接也能一网打尽,无需额外脚本。
如何快速使用
打开 Chrome 商店搜索“WebSocket DevTools”,然后点击“添加至 Chrome”即可完成安装。

在浏览器中按下F12,顶部会出现“WebSocket DevTools”标签页。

页面连接WebSocket后,左侧会立即列出所有活跃连接,点击任意连接即可查看、拦截、编辑或重放消息。

界面功能一览
左栏:连接列表(显示URL、连接状态、消息帧数)。


兼容性方面
浏览器:兼容 Chrome 88+、Edge、Brave 等所有 Chromium 内核浏览器。WebSocket 实现:原生WebSocket API、Socket.IO、ws库等主流方案全部支持。
隐私:纯本地运行,数据零上传;采用MIT开源协议,代码完全公开透明。
总结
WebSocket DevTools 将原本“看不见、摸不着”的实时通信数据,变成了“点一点就能改”的普通接口。现在就去Chrome商店搜索“WebSocket DevTools”,装上它亲身体验,从此告别盲调!
