WebSocket（WS）是 HTML5 開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議，它允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就可以直接創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。

通常 WebSocket 可用于替換 AJax 技術(shù)進(jìn)行推送，繼而實(shí)現(xiàn)成本更低、更實(shí)時(shí)的通訊，一般 WebSocket 也主要用于需要進(jìn)行實(shí)時(shí)通信的應(yīng)用。

日前 Firefox 開發(fā)人員在博客中介紹了其將在 Firefox 71 中引入的 WebSocket 檢查器。

新的 WebSocket 檢查器是 DevTools 中現(xiàn)有“ 網(wǎng)絡(luò)”面板 UI 的一部分，在此面板中已經(jīng)可以過濾已打開的 WS 連接的內(nèi)容，但是目前仍然不能看到通過 WS 幀傳輸?shù)膶?shí)際數(shù)據(jù)。

以下屏幕截圖顯示了運(yùn)行中的 WS 過濾器，響應(yīng)代碼指示服務(wù)器正在切換到 WS 連接。

如下圖所示，邊欄顯示了有關(guān)所選 HTTP 請(qǐng)求的詳細(xì)信息。此外，UI 現(xiàn)在提供了一個(gè)全新的“ 消息”面板，該面板可用于檢查通過選定 WS 連接發(fā)送和接收的 WS 幀。

實(shí)時(shí)更新的表顯示了已發(fā)送（綠色箭頭）和已接收（紅色箭頭）WS 幀的數(shù)據(jù)，單擊時(shí)每個(gè)幀都會(huì)展開，可以檢查格式化的數(shù)據(jù)。

專注于特定消息的話，可以將幀過濾為自由文本。

默認(rèn)顯示“數(shù)據(jù)”和“時(shí)間”列，但是可以自定義界面查看更多列。

在列表中選擇一個(gè)幀的話會(huì)在“消息”面板的底部顯示預(yù)覽。

該檢查器當(dāng)前支持以下 WS 協(xié)議：

純 JSON

socket

SockJS

新的 WS 檢查器將解析基于這些協(xié)議的有效負(fù)載并將其顯示為可擴(kuò)展樹，以便于檢查。當(dāng)然，仍然可以查看原始數(shù)據(jù)：

使用“網(wǎng)絡(luò)”面板工具欄中的“暫停/繼續(xù)”按鈕可以停止攔截 WS 通信，方便僅捕獲感興趣的幀。

WebSocket 檢查器將在 Firefox 71 中發(fā)布，現(xiàn)在可以在 Firefox Developer Edition 中使用。目前 Firefox 還在對(duì)以下功能進(jìn)行跟進(jìn)：

二進(jìn)制有效負(fù)載查看器

指示關(guān)閉的連接

導(dǎo)出 WS 幀（作為 HAR 的一部分）