Chrome開發人員工具現在可以列出WebSocket框架，如果框架不是二進制的，還可以檢查數據。

處理：

1. 啟動Chrome開發者工具

2. 加載頁面并啟動WebSocket連接

3. 單擊網絡選項卡。

4. 從左側列表中選擇WebSocket連接（其狀態為“ 101交換協議”。

5. 單擊消息子選項卡。二進制幀將顯示長度和時間戳，并指示是否被遮罩。文本框將顯示還包括有效載荷內容。

如果您的WebSocket連接使用二進制框架，那么您可能仍將希望使用Wireshark調試連接。Wireshark 1.8.0添加了對WebSocket的解剖器和過濾的支持。在另一個答案中可以找到替代方法。

Chrome Canary和Chromium現在具有WebSocket消息框架檢查功能。以下是快速測試它的步驟：

1. 導航到websocket.org網站上托管的WebSocket Echo演示。

2. 打開Chrome開發者工具。

3. 單擊“ 網絡”，然后單擊WebSockets以過濾開發工具顯示的流量。

4. 在Echo演示中，點擊連接。在Google Dev Tool的Headers選項卡上，您可以檢查WebSocket握手。

5. 單擊Echo演示中的發送按鈕。

6. 此步驟很重要：要在Chrome開發者工具中查看WebSocket框架，請在“名稱/路徑”下單擊代表您的WebSocket連接的echo.websocket.org條目。這將刷新右側的主面板，并使“ WebSocket框架”選項卡顯示實際的WebSocket消息內容。

注意：每次發送或接收新消息時，都必須通過單擊左側的echo.websocket.org條目刷新主面板。

我還通過屏幕截圖和視頻發布了步驟。

我最近出版的書《 HTML5 WebSocket權威指南》也有專門的附錄，涵蓋了各種檢查工具，包括Chrome開發工具，Chrome網絡內部程序和Wire Shark。