如何在 Chrome 中保存 websocket 帧 [英] How to save websocket frames in Chrome

问题描述

我正在使用 Chrome/开发者工具记录 websocket 流量.我在网络框架"窗口中查看 websocket 框架没有问题，但我无法将所有框架(内容编码为 JSON)保存在外部(文本)文件中.我已经尝试过另存为 HAR 并且还简单地使用了 cntl A、C、V(仅复制了第一个页面")，但到目前为止还不是很成功.

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.

我运行的是 Linux Mint 17.

I am running Linux Mint 17.

你有什么提示吗?

推荐答案

Chrome 63 更新，2018 年 1 月

我设法将它们导出为 JSON，如下所示:

I managed to export them as JSON as this:

1. 分离一个活跃的检查员(如有必要)
2. 使用 ctrl-shift-j/cmd-opt-j 在检查器上启动检查器
3. 将以下代码粘贴到该检查器实例中.

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.

此时，您可以对框架执行任何操作.我使用了 https://bgrins 中的 console.save 实用程序.github.io/devtools-snippets/#console-save 将帧保存为 JSON 文件(包含在下面的代码段中).

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.

这篇关于如何在 Chrome 中保存 websocket 帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！