Record bandwidth, page load and domComtentLoad data using JavaScript

Question

Is there any way using Javascript (perhaps with an extension? ) to record to an external file or by ajax the bandwidth, page load and domContentLoad load times according to URL being viewed?

Answer 1

In the Network panel, right click in the grid and select "Save HAR with Content" to download the HTTP Archive file. You can alternatively click "Copy all as HAR" and paste it into your text editor.

In the HAR output, you can see the request and response headers in JSON format.

• The DOMContentLoaded value (in milliseconds) can be seen in the onContentLoad property of the pageTimings object (in milliseconds).

• The Load value (in seconds) can be seen in the onLoad property (in milliseconds).

I suspect the total transfer size and timings are calculated within DevTools from the individual entries in the HAR. You can easily calculate this by parsing the JSON and summing the relevant header values if need be.

An individual resource example would be the kamalahmed.png image download shown in the first screenshot above. It has a transfer size of 6.2 KB and downloads in 21 ms.

The time header, which is 20.601999... corresponds to the 21 ms (rounded) and

The _transferSize header, which is 6336 (in bytes) approximately corresponds to the 6.2 KB - possibly a minor rounding issue.