说到 WebSocket，很多人第一反应就是**「又爱又恨」**。爱的是它够快，恨的是出了问题压根没法看。
Network 面板刷一次丢一次，想抓个包得把页面刷新到怀疑人生；后端说“消息发了”，前端却一脸懵：“我咋没收到？”
现在，这块“黑布”终于被扯下来了——WebSocket DevTools 正式上线——抓包、改包、断网、重放，一条龙搞定，Chrome 商店就能装，30 秒上手。
什么是 WebSocket DevTools
一句话：它就是一个直接塞进 Chrome DevTools 里的 WebSocket 专用监控台。
装好以后，按 F12 就能看到一个新标签页，所有 WebSocket 连接、消息、状态一目了然，想改哪条就改哪条，再也不用翻 Network 里那串小字。
WebSocket DevTools 功能一览
- 🔍 实时监控——消息一出现，面板立刻点亮，像刷微博一样实时。
- 🔄 后台监控——关掉
DevTools也继续跑，错过建连还能倒带回放。 - 🎮 消息模拟——想发啥
JSON，改两行直接回车，前后端都省Mock。 - 🚧 流量控制——勾个选项，指定消息瞬间“断网”，弱网测试不求人。
- 💾 收藏系统——把常用报文标星，下次调试秒发，团队还能共享模板。
- 🌍 多语言——中英双语随时切，提示词都是人话。
- 🎨 DevTools 集成——原生面板，手感跟
Network一样顺，零学习成本。 - 🖼️ iframe 支持——页面里再嵌页面，所有
WebSocket一网打尽，无需额外脚本。
如何快速使用
- Chrome 商店搜
「WebSocket DevTools」→ 点「添加至 Chrome」。
- 浏览器按
F12→ 顶部出现「WebSocket DevTools」标签。
- 连上 WebSocket 后，左侧立刻出现连接，点击即可
查看、拦截、编辑、重放。
界面功能一览
- 左栏：连接列表（
URL、状态、帧数）。
- 中间：瀑布图——
绿上行、蓝下行、红阻断，一眼看完。
- 右栏：
JSON树形展开，双击即可改字段、发消息。
兼容性方面
- 浏览器：
Chrome 88+、Edge、Brave等 Chromium 系。 - WebSocket 实现：原生
API、Socket.IO、ws库全支持。 - 隐私：纯本地运行，零上传；
MIT开源，代码随便看。
总结
WebSocket DevTools 把原本“看不见、摸不着”的实时通信变成了“点一点就能改”的普通接口。
现在去 Chrome 商店搜「WebSocket DevTools」，装上体验，从此告别盲调！
- WebSocket DevTools 官网：
https://www.websocket-devtools.com/
