How to measure how many TCP connections were made in a page

Question

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?

Answer 1

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.

Answer 2

It depends what connections you are interested in. You can use Chrome Developer tools the way Gideon Pyzer pointed out to see html connections. But if you are interested in TCP or some other protocol you can use Wireshark (free and open-source packet analyzer) to capture those connections.

Then there is "Capture Network Log" in chrome. Type "chrome://net-export/" in address field, set ready and press "Start Loggin to Disk" button - it will save your browser network activity to json file.