How to save websocket frames in Chrome

Question

I am logging websocket traffic using Chrome/Developer Tools. I have no problem to view the websocket frames in network "Frames" window, but I can not save all frames (content enc. as JSON) in an external (text) file. I have already tried save as HAR and also simply used cntl A,C,V (first "page" copied only) but have so far not been very successful.

I am running Linux Mint 17.

Do you have hints how this can be done?

Answer 1

Update for Chrome 63, January 2018

---

I managed to export them as JSON as this:

1. detach an active inspector (if necessary)
2. start an inspector on the inspector with ctrl-shift-j/cmd-opt-j
3. paste the following code into that inspector instance.

At this point, you can do whatever you want with the frames. I used the console.save utility from https://bgrins.github.io/devtools-snippets/#console-save to save the frames as a JSON file (included in the snippet below).

// https://bgrins.github.io/devtools-snippets/#console-save  (function(console){   console.save = function(data, filename){     if(!data) {       console.error('Console.save: No data')       return;     }      if(!filename) filename = 'console.json'      if(typeof data === "object"){       data = JSON.stringify(data, undefined, 4)     }      var blob = new Blob([data], {type: 'text/json'}),     e = document.createEvent('MouseEvents'),     a = document.createElement('a')      a.download = filename     a.href = window.URL.createObjectURL(blob)     a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')     e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)     a.dispatchEvent(e)   } })(console)  // Frame/Socket message counter + filename var iter = 0;  // This replaces the browser's `webSocketFrameReceived` code with the original code  // and adds two lines, one to save the socket message and one to increment the counter. SDK.NetworkDispatcher.prototype.webSocketFrameReceived = function (requestId, time, response) {   var networkRequest = this._inflightRequestsById[requestId];   if (!networkRequest) return;   console.save(JSON.parse(response.payloadData), iter + ".json")   iter++;   networkRequest.addFrame(response, time, false);   networkRequest.responseReceivedTime = time;   this._updateNetworkRequest(networkRequest); } 

This will save all incoming socket frames to your default download location.

Answer 2

From Chrome 76 the HAR file now includes WebSocket messages.

WebSocket messages in HAR exports

The _webSocketMessages property begins with an underscore to indicate that it's a custom field.

... "_webSocketMessages": [   {     "type": "send",     "time": 1558730482.5071473,     "opcode": 1,     "data": "Hello, WebSockets!"   },   {     "type": "receive",     "time": 1558730482.5883863,     "opcode": 1,     "data": "Hello, WebSockets!"   } ] ...