google-chrome-devtools - 使用 Puppeteer，如何获取 Chrome DevTools 的 "Network"选项卡的时间信息？

Question

下面是我访问https://www.ted.com的截图并检查 Google Chrome DevTools 的“网络”选项卡，并查看根请求和子请求的时间数据。

如何使用 Puppeteer 以编程方式获取上述所有计时数据？理想情况下，它看起来像这样的 JSON 结构:

{
    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>,
    ...
}

Answer 1

您想检查 HAR(HTTP 存档)文件，这是您将通过 saving the data 创建的文件通过 Chrome。

引述什么是 HAR 文件 ( 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.

有像puppeteer-har这样的库和 chrome-har可以使用 puppeteer 创建 HAR 文件。

代码示例(对于 puppeteer-har，引用自页面)

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

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

await har.stop();