首先，大家对于 WebSocket 调试的印象可能是这样的：连接速度飞快，但调试过程却让人感到头疼。在 Network 面板里，包总是一刷就没了，想抓个包得不停按 F5，手指都快抽筋了。后端说“我发了”，前端却一脸懵懂，心里默念：“我根本没收到呀。”这样的情况真让人挠头。
但是现在，有了 WebSocket DevTools，调试问题终于迎刃而解！这个工具让所有的抓包、修改、断网及重放功能都变得简单明了，完全不需要再依赖复杂的操作。
它到底是啥？
简单来说，WebSocket DevTools 就是一个专门为 WebSocket 设计的监控控制台，可以直接在 Chrome DevTools 里找到。
只要按下 F12，就能看到所有的连接、消息、状态信息，想修改哪条数据直接双击就行，再也不用在 Network 面板里苦苦寻找小字了。
它能干啥？
-
实时监控：消息一来，面板立马显示，刷微博般的速度。
-
后台蹲守：即使关闭 DevTools，它仍旧可以继续运行；错过了的连接还能回放。
-
消息伪造：输入想要的 JSON 数据，修改几行直接发送，Mock 测试再也不用单独操作。
-
流量使坏：勾选一个选项，就能让特定消息在“断网”中消失，轻松进行弱网测试。
-
收藏常用：将常用的报文标星，方便将来一键重发，还可以和团队共享模板。
-
双语界面：支持中英文切换，界面信息通俗易懂。
-
原生手感：官方面板，操作体验与 Network 面板相似，学习成本为零。
-
iframe 全覆盖：页面中嵌套的网页也能一并抓取，无需额外的脚本。
三步上手
在 Chrome 商店中搜索“WebSocket DevTools”，点击“添加至 Chrome”。
打开网页，按下 F12，新的“WebSocket DevTools”标签会出现在顶部。
如果页面建立了 WebSocket 连接，左侧会列出所有连接，一点就能查看、拦截、修改和重放。
界面速览
左栏：展示连接列表，一眼看完 URL、状态及帧数。
中间：时间线瀑布图，绿色代表上行消息，蓝色代表下行，红色是被拦截的。
右栏： JSON 数据以树形结构展现，双击字段就能轻松修改和发送消息。
兼容性
适用于 Chrome 88+、Edge、Brave 等 Chromium 系列浏览器。
支持原生 WebSocket、Socket.IO、ws 等协议。
完全在本地运行，隐私有保障；项目是 MIT 开源，代码也可以自由查看。
总结一下
WebSocket DevTools 把“看不见、摸不着”的实时通信变成了“点几下就能改”的可操作接口。
快去 Chrome 商店搜索“WebSocket DevTools”，装上它，解除调试盲区，拥抱便利吧！
官网地址：