首個「專業級」WebSocket 調試神器來了!
說到 WebSocket,很多人第一反應就是:“這玩意兒快是真快,調試也是真崩潰?!?/p>
Network 面板刷一次掉一次,想抓個包得把頁面按 F5 按到手指抽筋;后端吼一句“我發了”,前端一臉懵:“哥,真沒收到。”
現在,這塊黑布總算被扯下來了——WebSocket DevTools 正式上線:抓包、改包、斷網、重放,一條龍全安排。
Chrome 商店直接裝,30 秒就能上手。

它到底是啥?
一句話:把 WebSocket 的專屬監控臺直接塞進 Chrome DevTools,按 F12 就能看見,連接、消息、狀態全擺眼前,想改哪條隨手雙擊,再也不用去 Network 里瞇眼找小字。

能干啥?
- ?? 實時監控——消息一來,面板秒亮,像刷微博那樣實時。
- ?? 后臺蹲守——DevTools 關了也繼續跑,錯過建連還能倒帶回放。
- ?? 消息偽造——想發啥 JSON,改兩行直接回車,Mock 都省了。
- ?? 流量使壞——勾個選項,指定消息原地“斷網”,弱網測試不求人。
- ?? 收藏常用——把固定報文標星,下次一鍵重發,團隊還能共享模板。
- ?? 雙語界面——中英文隨時切,提示都是人話。
- ?? 原生手感——官方面板,操作跟 Network 一個味兒,零學習成本。
??? iframe 也不放過——頁面里再套頁面,所有 WebSocket 一把抓,不用額外腳本。
三步上手
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”,裝上體驗,告別盲調!
官網地址:https://www.websocket-devtools.com/























