说到 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/