如何在 Chrome 中保存 websocket 帧答案

【问题标题】：How to save websocket frames in Chrome如何在 Chrome 中保存 websocket 帧
【发布时间】：2015-07-09 07:36:56
【问题描述】：

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

我正在运行 Linux Mint 17。

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

【问题讨论】：

标签： google-chrome logging websocket trace developer-tools

【解决方案1】：

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

WebSocket messages in HAR exports

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

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

【讨论】：

【解决方案2】：

此功能有一个未解决的请求

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

请给它加星标以提高优先级。

【讨论】：

【解决方案3】：

Chrome 63 更新，2018 年 1 月

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

分离活跃的检查员（如有必要）
使用 ctrl-shift-j/cmd-opt-j 在检查器上启动检查器
将以下代码粘贴到该检查器实例中。

此时，您可以对框架做任何您想做的事情。我使用 https://bgrins.github.io/devtools-snippets/#console-save 中的 console.save 实用程序将帧保存为 JSON 文件（包含在下面的 sn-p 中）。

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

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

【讨论】：

我在使用您的代码时得到一个未定义的 SDK。关于如何让它发挥作用的任何指示？
解决了这个问题。对于以后遇到这个问题的人来说——一旦你定义了新的检查员-检查员，你需要在新窗口中输入代码，但你所有的其他 WS 活动都将在原始控制台/浏览器窗口中输出/记录。
如果你只想从现有的 wss 帧日志中转储所有帧，你可以这样做：console.save(BrowserSDK.networkLog.requests()[18]._frames, "frames.json")
@richardw 嗨，我想完全按照你说的做，但不能，你的 chrome 版本是什么？你能告诉更多你是怎么做的吗？
@bertrandg 我现在使用的是Version 71.0.3578.98 (Official Build) (64-bit)，看起来BrowserSDK 现在只是SDK。我刚刚使用以下代码再次对其进行了测试：console.save(SDK.networkLog.requests()[27]._frames, "frames.json")。希望对您有所帮助。

【解决方案4】：

这是目前无法放入 HAR 格式的内容时间，因为 HAR 规范没有关于如何导出的详细信息 WebSockets 等框架传输格式

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

【讨论】：