如何衡量页面中建立的TCP连接数

Question

使用chrome dev工具，我可以看到页面中的请求数，但似乎无法测量连接数。

Chrome开发工具有可能吗？如果没有，我可以使用哪些工具？

Answer 1

您可以在“网络”面板中启用“连接ID”标头，该标头是特定连接的唯一标识符。您可以对列进行排序，以查看特定连接实例的请求数量，但是没有内置方法可以查看结果数量或过滤结果。

但是，此数据可以导出为JSON格式的文件，称为HAR（HTTP存档）。您可以通过右键单击面板并选择＆＃39;另存为内容＆＃39;

来执行此操作。

您可以从JSON中提取数据，然后根据需要进行过滤和聚合。我创建了一个简单的示例脚本，它将从本地文件系统加载HAR，解析数据并过滤内容，以便显示会话中出现的唯一连接ID数。

＆＃13;

＆＃13;

function loadFile(event) {
    var file = event.target.files[0];

    if (file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var contents = e.target.result;
            var data = JSON.parse(contents);
            getUniqueConnectionCount(data);
        }
        reader.readAsText(file);
    } else {
        alert('Failed to load file.');
    }
}

function getUniqueConnectionCount(data) {
    var entries = data.log.entries;
    var uniqueConnectionIds = entries.map(function(item) {
        return item['connection'];
    }).filter(function(x, i, a) {
        return a.indexOf(x) === i && i > 0;
    });

    console.log('There were ', uniqueConnectionIds.length, ' unique connections found', uniqueConnectionIds);
}

document.getElementById('files').addEventListener('change', loadFile, false);

＆＃13;

<div>
  <input type='file' id='files' name='files' />
</div>

＆＃13;

＆＃13;

＆＃13;

注意：确保＆＃39;保留日志＆＃39;未经检查以避免查看先前会话中的数据。这只是您的用例的一个快速示例，但我可能会考虑将其扩展为更通用。

Answer 2

这取决于您对哪些连接感兴趣。您可以按照Gideon Pyzer指出的查看html连接的方式使用Chrome Developer工具。但是，如果您对TCP或其他协议感兴趣，则可以使用Wireshark（免费和开源的数据包分析器）来捕获这些连接。

然后在Chrome中显示“捕获网络日志”。在地址字段中输入“ chrome：// net-export /”，设置就绪，然后按“将Loggin启动到磁盘”按钮-这会将您的浏览器网络活动保存到json文件中。