如何测量一个页面中建立了多少个TCP连接

Question

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

chrome dev工具有可能吗？如果没有，我可以使用哪些工具代替？

Answer 1

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

但是，可以将这些数据导出为JSON格式的文件，称为HAR（HTTP存档）。您可以通过右键单击面板并选择“另存为具有内容的HAR”来实现。

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

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

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

注意：请确保未选中“保留日志”，以避免看到先前会话中的数据。这只是您的用例的快速示例，但我可能会考虑将其扩展为更通用的。