說到 WebSocket，很多人第一反應就是：“這玩意兒快是真快，調試也是真崩潰。”

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/