使用Chrome或Fiddler抓取WebSocket包

首先，HTTP是創建在TCP協議基礎上的，而WebSocket一般也是創建在TCP上，因此說爲何有些網頁遊戲抓不到包而有些又能夠，這僅是由於你使用的抓包工具是針對了HTTP的通訊協議。

我先從抽象的層面，舉一個可能不太恰當的例子，只爲了讓不明白HTTP和WebSocket二者之間抓包有何區別的同窗大概瞭解這兩個協議的異同。客戶端/服務端用C/S簡稱，我把數據抽象成水流，而HTTP是用水槍傳遞水流的（無狀態），至於WEBSOCKET則是使用水管傳遞水流（實時）。

HTTP通信方式：

客戶端C把數據封裝好了要交給服務端S，因此把水放到水槍裏面，射過去給S
S用桶把水擋下來了，而後分析水的成分（數據內容），完成後再把新的水（返回的數據）射回去給C
這個過程當中，任何人均可以隨時在C和S之間用海綿吸一點水而後拿去分析（嗅探數據），或者是直接用桶把水都擋下來分析完後再裝到水槍中，模仿C的動做射給S（也就是代理抓包）
WEBSOCKET方式：

客戶端C和服務端S，雙方之間先用一條水管連起來（用的是HTTP握手），而後水流都經過這個小水管來傳輸
水管裏面一直有水在流動，因此要通信只須要C或者是S把數據水流放到水管中，則會馬上傳輸到對方那邊
這個過程當中，要嗅探就比較麻煩了，須要先在水管中先打個洞，而後再把分析器放進去、或者是斬斷這個水管在中間接個水錶之類的設備去分析水質成分
好了，亂說一通完畢，說一下抓取WebSocket的兩個工具，都是常見的程序，只是可能不少同窗不清楚有這樣的功能而已。

第一個：Chrome，也就是谷歌的瀏覽器

進入你要抓包的網頁，而後按F12打開咱們最愛的開發者工具
而後點Network，再從過濾器中找到WebSockets（上方或下方的狀態欄）
選中過濾出來的WebSocket，在彈出來的右邊欄中能夠找到Frames，裏面就是抓到的包
若是要看新通信產生的數據包，則要先點其餘的位置好比Headers再點Frames才能夠刷新
第二個：Fiddler，抓包調試的利器，已經人手一個了吧

打開Fiddler，點開菜單欄的Rules，選擇Customize Rules...
這時會打開CustomRules.js文件，在class Handlers中加入如下代碼
static function OnWebSocketMessage(oMsg: WebSocketMessage) {
    // Log Message to the LOG tab
    FiddlerApplication.Log.LogString(oMsg.ToString());
}
保存後就能夠在Fiddler右邊欄的Log標籤裏，看到WebSocket的數據包
到了這裏，還有一個狀況要說明，就算是有工具能夠抓到WebSocket中的包，看到的也不必定是明文。這個要看傳輸的水是什麼，若是是普通水那誰均可以分析；但若是是水銀，那這個分析水的設備極可能就顯示亂碼了。 因此也就有同窗明明使用了能夠抓WebSocket包的程序，卻抓出來的是亂碼。那是由於別人傳輸的是二進制數據流（好比AMF包），而不是JSON之類的對人類可讀的明文。

參考資料：

Debug Inspect WebSocket traffic with Fiddler 【薦】

Logging WebSocket Frames using Chrome Developer Tools, Net-internals and Wireshark
原始連接: http://blog.jtwo.me/post/use-chrome-or-fiddler-sniffer-websocket