Chrome開發(fā)人員工具現(xiàn)在可以列出WebSocket框架，如果框架不是二進(jìn)制的，還可以檢查數(shù)據(jù)。

處理：

1. 啟動Chrome開發(fā)者工具

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

3. 單擊網(wǎng)絡(luò)選項卡。

4. 從左側(cè)列表中選擇WebSocket連接（其狀態(tài)為“ 101交換協(xié)議”。

5. 單擊消息子選項卡。二進(jìn)制幀將顯示長度和時間戳，并指示是否被遮罩。文本框?qū)@示還包括有效載荷內(nèi)容。

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

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

1. 導(dǎo)航到websocket.org網(wǎng)站上托管的WebSocket Echo演示。

2. 打開Chrome開發(fā)者工具。

3. 單擊“ 網(wǎng)絡(luò)”，然后單擊WebSockets以過濾開發(fā)工具顯示的流量。

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

5. 單擊Echo演示中的發(fā)送按鈕。

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

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

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

我最近出版的書《 HTML5 WebSocket權(quán)威指南》也有專門的附錄，涵蓋了各種檢查工具，包括Chrome開發(fā)工具，Chrome網(wǎng)絡(luò)內(nèi)部程序和Wire Shark。