Search code examples
google-chrome-devtoolspuppeteer

Using Puppeteer, how to get Chrome DevTools' "Network" tab's timing information?

Below is a screenshot of me accessing https://www.ted.com and inspecting the Google Chrome DevTools' "Network" tab, and viewing the Timing data for the root & child requests.

enter image description here

How can I get all of the above timing data programatically using Puppeteer? Ideally, it would look like this JSON structure:

{
    name: "www.ted.com",
    queueTime: 0,
    startedTime: 1.93,
    stalledTime: 4.59,
    dnsLookupTime: 10.67,
    initialConnectionTime: <the number of milliseconds>,
    ...
},
{
    name: <the next child request>,
    ...
}
Solution

  • You want to check out HAR (HTTP Archive) files, which is what you would create by saving the data via Chrome.

    Quotation what a HAR file is (source):

    The HAR file format is an evolving standard and the information contained within it is both flexible and extensible. You can expect a HAR file to include a breakdown of timings including:

    1. How long it takes to fetch DNS information
    2. How long each object takes to be requested
    3. How long it takes to connect to the server
    4. How long it takes to transfer assets from the server to the browser of each object

    The data is stored as a JSON document and extracting meaning from the low-level data is not always easy. But with practice a HAR file can quickly help you identify the key performance problems with a web page, letting you efficiently target your development efforts at areas of your site that will deliver the greatest results.

    There are libraries like puppeteer-har and chrome-har which can create HAR files by using puppeteer.

    Code sample (for puppeteer-har, quote from the page)

    const har = new PuppeteerHar(page);
await har.start({ path: 'results.har' });

await page.goto('http://example.com');

await har.stop();