如何在Chrome中保存websocket框架

Question

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

我正在运行Linux Mint 17.

你有提示如何做到这一点吗？

Answer 1

更新Chrome 63,2018年1月

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

1. 分离一名现役督察(如有需要)
2. 使用ctrl-shift-j/cmd-opt-j在检查器上启动检查器
3. 将以下代码粘贴到该检查器实例中.

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

// 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);
}

这会将所有传入的套接字帧保存到默认下载位置.

Answer 2

从Chrome 76 开始，HAR文件现在包含WebSocket 消息。

HAR 导出中的 WebSocket 消息

该_webSocketMessages属性以下划线开头，表示它是一个自定义字段。

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

Answer 3

目前尚无法将其放入 HAR 格式，因为 HAR 规范没有有关如何导出 WebSocket 等帧传输格式的详细信息

从这里：https ://groups.google.com/forum/#!topic/google-chrome-developer-tools/jUOLFqpu-2Y