How to save websocket frames in Chrome

前端 未结 4 1979
迷失自我
迷失自我 2020-12-08 07:18

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 (cont

相关标签:
4条回答
  • 2020-12-08 07:35

    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.

    0 讨论(0)
  • 2020-12-08 07:39

    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

    0 讨论(0)
  • 2020-12-08 07:45

    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.

    0 讨论(0)
  • 2020-12-08 07:49

    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!"
      }
    ]
    ...
    
    0 讨论(0)
提交回复
热议问题