使用 Puppeteer，如何获取 Chrome DevTools 的“网络”选项卡的计时信息？

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 存档）文件，这是您通过 Chrome保存数据所创建的文件。

引用什么是 HAR 文件（来源）：

HAR 文件格式是一种不断发展的标准，其中包含的信息既灵活又可扩展。您可以期望 HAR 文件包含时间细分，包括：

1. 获取DNS信息需要多长时间
2. 请求每个对象需要多长时间
3. 连接到服务器需要多长时间
4. 每个对象的资源从服务器传输到浏览器需要多长时间

数据存储为 JSON 文档，从低级数据中提取含义并不总是那么容易。但是通过实践，HAR 文件可以快速帮助您识别网页的关键性能问题，让您有效地将开发工作定位在站点中将提供最佳结果的区域。

有像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();