WebSocket(WS)是HTML5開(kāi)始提供的一種在單個(gè)TCP連接上進(jìn)行全雙工通訊的協(xié)議，它允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)。在WebSocket API中，瀏覽器

WebSocket(WS)是HTML5開(kāi)始提供的一種在單個(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開(kāi)發(fā)人員在博客中介紹了其將在Firefox 71中引入的WebSocket檢查器。

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

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

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

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

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

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

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

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

純JSON

socket

SockJS

新的WS檢查器將解析基于這些協(xié)議的有效負(fù)載并將其顯示為可擴(kuò)展樹(shù)，以便于檢查。當(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的一部分)（h4cd）

關(guān)鍵詞： Firefox 71 WebSocket檢查器 WS