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

【问题标题】：How to measure how many TCP connections were made in a page如何测量一个页面中建立了多少个 TCP 连接
【发布时间】：2017-01-10 15:29:49
【问题描述】：

使用chrome dev tool，我可以看到一个页面的请求数，但似乎没有办法测量连接数。

chrome 开发工具有可能吗？如果没有，我可以用什么工具代替？

【问题讨论】：

标签： google-chrome google-chrome-devtools

【解决方案1】：

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

但是，这些数据可以导出为 JSON 格式的文件，称为 HAR（HTTP 存档）。您可以通过右键单击面板并选择“Save as HAR with Content”来执行此操作。

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

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

【讨论】：

【解决方案2】：

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

然后在chrome中有“捕获网络日志”。在地址字段中输入“chrome://net-export/”，准备好并按“开始登录到磁盘”按钮 - 它会将您的浏览器网络活动保存到 json 文件。

【讨论】：