WebSocket?DevTools 是一款專為 WebSocket 連接調試而設計的 Chrome/Edge/Brave 等 Chromium 系列瀏覽器的開發者工具擴展。它把原本“看不見、摸不著”的實時通信變成了可視化、可交互的調試面板，使開發者能夠在頁面中直接查看、攔截、修改和分析 WebSocket 消息，從而快速定位和解決通信問題。

• WebSocket DevTools官網入口網址：https://www.websocket-devtools.com/
• WebSocket DevTools開源項目地址：https://github.com/law-chain-hot/websocket-devtools

主要特性

• 實時監控：在 DevTools 面板中實時展示所有打開的 WebSocket 連接狀態、握手信息以及收發的每一條消息。
• 消息記錄：完整保存發送和接收的消息，支持按時間、類型、內容等維度過濾查看。
• 消息攔截與編輯：可以在消息發送前或接收后插入自定義過濾器，對 JSON、二進制等多種格式進行校驗、修改或阻斷。
• 連接管理：提供手動創建、關閉、重連 WebSocket 連接的快捷按鈕，便于在調試過程中快速切換不同的服務器地址或協議參數。
• 性能分析：統計連接延遲、消息大小、幀率等指標，幫助評估實時通信的性能瓶頸。
• 錯誤追蹤：開啟錯誤追蹤后，工具會捕獲異常關閉、協議錯誤等異常信息并在面板中高亮提示。
• 自定義過濾：支持用戶自行編寫過濾函數，實現復雜的業務層過濾或消息格式驗證（如 JSON Schema 校驗）。

兼容性與隱私

• 支持 Chrome?88+、Edge、Brave 等 Chromium 瀏覽器。
• 完全兼容原生 WebSocket API、Socket.IO、ws 等常見庫。
• 采用純本地運行模式，所有調試數據均保存在本機，不會上傳至服務器，遵循 MIT 開源協議，代碼可隨時審查。

使用場景

• 前端開發：在調試實時聊天、推送、游戲等需要雙向通信的頁面時，快速捕獲并分析消息流。
• 后端聯調：配合服務器日志，對比前后端的消息結構，驗證協議一致性。
• 性能調優：通過延遲、消息大小統計，發現網絡瓶頸或不合理的消息頻率。
• 安全審計：攔截敏感字段或異常數據，防止潛在的注入或協議攻擊。

安裝與入口

• 在 Chrome Web Store 搜索 “WebSocket?DevTools”，點擊安裝后即可在瀏覽器的 DevTools 中看到新增的 “WebSocket?DevTools” 面板，打開任意包含 WebSocket 的頁面即可開始使用。官方主頁提供了最新版本下載、使用文檔以及開源代碼倉庫，地址為 https://www.websocket-devtools.com/ 。

小貼士：

• 使用 “Add?Filter” 可以快速添加自定義過濾器，實現業務層的消息校驗。
• 開啟 “Error?Tracking” 能在連接異常時第一時間得到提示，省去反復查看控制臺的麻煩。

通過上述功能，WebSocket?DevTools 為實時通信的開發、調試、性能分析提供了一站式解決方案，是前后端協同調試 WebSocket 的利器。