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

问题描述

我使用Chrome / Developer Tools记录websocket流量。我没有问题在网络框架窗口中查看WebSocket框架，但我无法将所有框架（内容加密为JSON）保存在外部（文本）文件中。
我已经尝试保存为HAR，并且还简单地使用了cntl A，C，V（仅第一个页面被复制），但迄今为止并不是非常成功。

>解决方案

适用于Chrome 63的更新，2018年1月 我设法将它们导出为JSON，如下所示：

1. detatch 活动检查器（如有必要）
>

2. 使用ctrl-shift-j / cmd-opt-j启动检查器上的检查器
   
3. 将以下代码粘贴到该检查器实例中。

此时，您可以对框架进行任何操作。我从 console.save > https://bgrins.github.io/devtools-snippets/#console-save 将帧保存为JSON文件（包含在下面的代码片段中）。

  // https://bgrins.github.io/devtools-snippets/#console-save 
（函数（控制台）{
 console.save =函数（数据，文件名）{
 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 =文件名
 a.href = window.URL.createObjectURL（blob）
 a.dataset。 downloadurl = ['text / json （'：'）
 e.initMouseEvent（'click'，true，false，window，0,0,0,0,0，false，false，false， false，0，null）
 a.dispatchEvent（e）
} 
}）（控制台）
 
 //框架/套接字消息计数器+文件名
 var iter = 0; 
 
 //这将用原始代码
 //替换浏览器的`webSocketFrameReceived`代码并添加两行，一行保存套接字消息，另一行保存计数器。 
 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）; 
} 
  

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

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?

解决方案

Update for Chrome 63, January 2018

---

I managed to export them as JSON as this:

1. detatch 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.

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