Is there any way in Puppeteer to get the exact data from the Chrome Network tab?

Question

I'm attempting to use Puppeteer to navigate to a URL and extract the metrics from the Network tab in the Chrome developer tools. For example, navigating to this page shows the following Network info, and captures a total of 47 requests.

However, I'm trying to get these metrics using the following code:

import { Browser, Page } from "puppeteer";

const puppeteer = require('puppeteer');

async function run() {
    const browser: Browser = await puppeteer.launch({
        headless: false,
        defaultViewport: null
    });

    const page: Page = await browser.newPage();
    await page.goto("https://stackoverflow.com/questions/30455964/what-does-window-performance-getentries-mean");

    let performanceTiming = JSON.parse(
        await page.evaluate(() => JSON.stringify(window.performance.getEntries()))
    );

    console.log(performanceTiming);
}

run();

However, when I peer into the performanceTiming object, it only has 34 items in it:

Therefore, my questions are please:

1. Why is there a difference in the number of requests the Network tab vs performance.getEntries() are showing?
2. Is it possible to get performance.getEntries() to show all of the requests instead of only a portion of them?
3. Is it possible for Puppeteer to get all of the data from the Network tab?

Answer 1

You can use the page.tracing feature.

const browser =  await puppeteer.launch({ headless: true});
const page = await browser.newPage();
await page.tracing.start({ categories: ['devtools.timeline'], path: "./tracing.json" });
await page.goto("https://stackoverflow.com/questions/30455964/what-does-window-performance-getentries-mean");
var tracing = JSON.parse(await page.tracing.stop());

The devtools.timeline category has many things to explore.

You can get all the request filtering by ResourceSendRequest

tracing.traceEvents.filter(te => te.name ==="ResourceSendRequest")

And all the response filtering by ResourceReceiveResponse

tracing.traceEvents.filter(te => te.name ==="ResourceReceiveResponse")