WebSocket(WS)是HTML5開始提供的一種在單個TCP連接上進(jìn)行全雙工通訊的協(xié)議，它允許服務(wù)端主動向客戶端推送數(shù)據(jù)。在WebSocket API中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就可以直接創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。
通常WebSocket可用于替換 AJax技術(shù)進(jìn)行推送，繼而實(shí)現(xiàn)成本更低、更實(shí)時的通訊，一般WebSocket也主要用于需要進(jìn)行實(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請求的詳細(xì)信息。此外，UI現(xiàn)在提供了一個全新的“ 消息”面板，該面板可用于檢查通過選定WS連接發(fā)送和接收的WS幀。
實(shí)時更新的表顯示了已發(fā)送(綠色箭頭)和已接收(紅色箭頭)WS幀的數(shù)據(jù)，單擊時每個幀都會展開，可以檢查格式化的數(shù)據(jù)。
專注于特定消息的話，可以將幀過濾為自由文本。
默認(rèn)顯示“數(shù)據(jù)”和“時間”列，但是可以自定義界面查看更多列。
在列表中選擇一個幀的話會在“消息”面板的底部顯示預(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還在對以下功能進(jìn)行跟進(jìn)：
二進(jìn)制有效負(fù)載查看器
指示關(guān)閉的連接
導(dǎo)出WS幀(作為 HAR的一部分)
詳情查看原博客：點(diǎn)此前往
