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

• WebSocket DevTools官網(wǎng)入口網(wǎng)址：https://www.websocket-devtools.com/
• WebSocket DevTools開(kāi)源項(xiàng)目地址：https://github.com/law-chain-hot/websocket-devtools

主要特性

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

兼容性與隱私

• 支持 Chrome?88+、Edge、Brave 等 Chromium 瀏覽器。
• 完全兼容原生 WebSocket API、Socket.IO、ws 等常見(jiàn)庫(kù)。
• 采用純本地運(yùn)行模式，所有調(diào)試數(shù)據(jù)均保存在本機(jī)，不會(huì)上傳至服務(wù)器，遵循 MIT 開(kāi)源協(xié)議，代碼可隨時(shí)審查。

使用場(chǎng)景

• 前端開(kāi)發(fā)：在調(diào)試實(shí)時(shí)聊天、推送、游戲等需要雙向通信的頁(yè)面時(shí)，快速捕獲并分析消息流。
• 后端聯(lián)調(diào)：配合服務(wù)器日志，對(duì)比前后端的消息結(jié)構(gòu)，驗(yàn)證協(xié)議一致性。
• 性能調(diào)優(yōu)：通過(guò)延遲、消息大小統(tǒng)計(jì)，發(fā)現(xiàn)網(wǎng)絡(luò)瓶頸或不合理的消息頻率。
• 安全審計(jì)：攔截敏感字段或異常數(shù)據(jù)，防止?jié)撛诘淖⑷牖騾f(xié)議攻擊。

安裝與入口

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

小貼士：

• 使用 “Add?Filter” 可以快速添加自定義過(guò)濾器，實(shí)現(xiàn)業(yè)務(wù)層的消息校驗(yàn)。
• 開(kāi)啟 “Error?Tracking” 能在連接異常時(shí)第一時(shí)間得到提示，省去反復(fù)查看控制臺(tái)的麻煩。

通過(guò)上述功能，WebSocket?DevTools 為實(shí)時(shí)通信的開(kāi)發(fā)、調(diào)試、性能分析提供了一站式解決方案，是前后端協(xié)同調(diào)試 WebSocket 的利器。