如何测量一个页面中有多少个TCP连接 [英] How to measure how many TCP connections were made in a page

问题描述

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

是在铬开发工具可能吗？如果没有，我可以使用什么工具来代替？ 您可以启用网络面板中的连接ID标头，特定连接的唯一标识符。您可以对列进行排序，以查看特定连接实例的请求数量，但没有内置的方法可以查看多少个结果或筛选结果。

然后，可以将这些数据导出为JSON格式的文件，即HAR（HTTP归档）。您可以通过在面板上单击鼠标右键并选择'另存为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（数据）; } reader.readAsText（file）; }其他{alert（'无法加载文件'）; }} 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'，uniqueConnectionIds.length，'找到唯一连接'，uniqueConnectionIds）;} document.getElementById（'files'）。addEventListener（'change'，loadFile，false）;

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

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

With chrome dev tool, I can see the number of requests in a page, but it seems that there is no way to measure number of connections.

Is it possible in chrome dev tool? if not, what tools can I use instead?

解决方案

You can enable the Connection ID header in the Network panel, which is a unique identifier for a particular connection. You can sort the column to see how many requests there were for a particular connection instance, but there's no built in way to see how many or filter the results.

However, this data can be exported into a JSON formatted file, known as the HAR (HTTP Archive). You can do this by right-clicking on panel and selecting 'Save as HAR with Content'.

You can extract the data from the JSON, and filter and aggregate however you like. I have created a simple example script that will load the HAR from the local file system, parse the data, and filter the content, so that it shows how many unique Connection IDs appeared in the session.

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>

Note: Make sure 'Preserve Log' is un-checked to avoid seeing data from previous sessions. This is just a quick example for your use case, but I might look into extending this to be more generic.

这篇关于如何测量一个页面中有多少个TCP连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！