40

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?

AlterSchwede
  • 463
  • 1
  • 5
  • 9

4 Answers4

21

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!"
  }
]
...
CodeIt
  • 3,492
  • 3
  • 26
  • 37
19

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.

evandrix
  • 6,041
  • 4
  • 27
  • 38
Tiana
  • 750
  • 6
  • 14
  • I get an SDK not defined when using your code. Any pointers on how to get that to work? – viksit Jan 23 '18 at 02:09
  • 1
    Resolved this. For those who face this later - once you have the new inspector-inspector defined, you need to type in the code into the new window, but all your other WS activity is going to be output/recorded in the original console/browser window. – viksit Jan 23 '18 at 02:46
  • 2
    If you just want to dump all the frames from an existing wss frame log, you can do something like this: ``console.save(BrowserSDK.networkLog.requests()[18]._frames, "frames.json")`` – richardw Sep 25 '18 at 16:50
  • @richardw hi, I want to do exactly what you said but can't, what's your chrome version? Can you tell more how you do please. – bertrandg Jan 22 '19 at 14:31
  • 1
    @bertrandg I'm now using `Version 71.0.3578.98 (Official Build) (64-bit)` and it looks like `BrowserSDK` is now just `SDK`. I just tested it again with the following code: `console.save(SDK.networkLog.requests()[27]._frames, "frames.json")`. Hope that helps. – richardw Jan 23 '19 at 17:13
  • ...and if you don't understand what "once you have the new inspector-inspector defined" means, do this: 1) Open a devtools window on the page performing the websockets traffic 2) Open a new tab to `chrome://inspect/#other` 3) You should see a chrome-devtools item there now 4) Click "Inspect". A new devtools window will open. *That* is your inspector-inspector, that is, a devtools window that is inspecting the first devtools window. – Cosimo Feb 18 '19 at 12:57
  • See also (for step 1): [How do you inspect the web inspector in Chrome? - Stack Overflow](https://stackoverflow.com/questions/12291138/how-do-you-inspect-the-web-inspector-in-chrome) – user202729 Nov 06 '19 at 03:55
4

This is something that is not possible to put into HAR format at this time because HAR specification does not have details on how to export framed transfer formats like WebSockets

From here: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/jUOLFqpu-2Y

sergey
  • 81
  • 4
0

There is an open request for this feature

https://bugs.chromium.org/p/chromium/issues/detail?id=496006

please "star" it to raise the priority.

DicBrus
  • 1,291
  • 9
  • 9