首个「专业级」WebSocket 调试插件!启动!

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