說到 WebSocket，很多人第一反應(yīng)就是：“這玩意兒快是真快，調(diào)試也是真崩潰?！?/p>

Network 面板刷一次掉一次，想抓個包得把頁面按 F5 按到手指抽筋；后端吼一句“我發(fā)了”，前端一臉懵：“哥，真沒收到?！?/p>

現(xiàn)在，這塊黑布總算被扯下來了——WebSocket DevTools 正式上線：抓包、改包、斷網(wǎng)、重放，一條龍全安排。

Chrome 商店直接裝，30 秒就能上手。

它到底是啥？

一句話：把 WebSocket 的專屬監(jiān)控臺直接塞進 Chrome DevTools，按 F12 就能看見，連接、消息、狀態(tài)全擺眼前，想改哪條隨手雙擊，再也不用去 Network 里瞇眼找小字。

能干啥？

• ?? 實時監(jiān)控——消息一來，面板秒亮，像刷微博那樣實時。
• ?? 后臺蹲守——DevTools 關(guān)了也繼續(xù)跑，錯過建連還能倒帶回放。
• ?? 消息偽造——想發(fā)啥 JSON，改兩行直接回車，Mock 都省了。
• ?? 流量使壞——勾個選項，指定消息原地“斷網(wǎng)”，弱網(wǎng)測試不求人。
• ?? 收藏常用——把固定報文標星，下次一鍵重發(fā)，團隊還能共享模板。
• ?? 雙語界面——中英文隨時切，提示都是人話。
• ?? 原生手感——官方面板，操作跟 Network 一個味兒，零學(xué)習(xí)成本。

??? iframe 也不放過——頁面里再套頁面，所有 WebSocket 一把抓，不用額外腳本。

三步上手

Chrome 商店搜 “WebSocket DevTools” → 點“添加至 Chrome”。

打開網(wǎng)頁按 F12 → 頂部出現(xiàn)新標簽 “WebSocket DevTools”。

只要頁面里建了 WebSocket，左側(cè)立刻列出來，點一下就能看、攔、改、重放。

界面速覽

左欄：連接列表，URL、狀態(tài)、幀數(shù)一眼看完。

中間：瀑布時間線——綠的上行，藍的下行，紅的被攔，顏色分明。

右欄：JSON 直接樹形展開，雙擊就能改字段、發(fā)消息。

兼容性

• 瀏覽器：Chrome 88+、Edge、Brave 等 Chromium 全家桶。
• 庫：原生 WebSocket、Socket.IO、ws 全都認。
• 隱私：純本地運行，數(shù)據(jù)不出電腦；MIT 開源，代碼隨便翻。

收個尾

WebSocket DevTools 把“看不見、摸不著”的實時通信變成了“點兩下就能改”的普通接口。

現(xiàn)在就去 Chrome 商店搜 “WebSocket DevTools”，裝上體驗，告別盲調(diào)！

官網(wǎng)地址：https://www.websocket-devtools.com/