使用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 存档）文件，这是您通过 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();

Answer 2

HAR 文件是一个不错的选择，但如果想要更自定义的内容，您可以使用 Puppeteer 通过导航到您想要分析的页面并点击 Chrome DevTools 协议来记录请求计时数据。

(async function() {
  // launch in headless mode & create a new page
  const browser = await pptr.launch({
    headless: true,
  });
  const page = await browser.newPage();

  // attach cdp session to page
  const client = await page.target().createCDPSession();
  await client.send('Debugger.enable');
  await client.send('Debugger.setAsyncCallStackDepth', { maxDepth: 32 });

  // enable network
  await client.send('Network.enable');
  // attach callback to network response event
  await client.on('Network.responseReceived', (params) => {
    const { response: { timing } } = params;
    /*
     * See: https://chromedevtools.github.io/devtools-protocol
     * /tot/Network/#type-ResourceTiming for complete list of
     * timing data available under 'timing'
     */
  });

  await page.goto('https://www.ted.com/', {
    waitUntil: 'networkidle2',
  });

  // cleanup
  await browser.close();
})();

对于您的情况，您可以侦听

Network.responseReceived

事件，并解析出

responseTime

参数，该参数嵌套在事件侦听器回调中提供的响应对象的

response

属性中。他们关于接口的文档非常好。我将在下面列出它们：

---

Chrome DevTools 协议文档

您期望从每个

Network.responseReceived

事件回调接收的数据：Network.responseReceived。

更具体的响应相关数据，在

response

属性中：Network.Response.

最后，您要查找的嵌套请求计时数据位于

timing

下：Network.ResourceTiming。

---

您可能还想查看

Network.requestWillBeSent

界面。您将能够通过

requestId

来匹配请求和响应。

Answer 3

目前，您也可以在没有 HAR 文件的情况下获取此信息。

使用 performance.getEntriesByType("resource")

// Obtain PerformanceEntry objects for resources    
const performanceTiming = JSON.parse(
      await page.evaluate(() =>
        JSON.stringify(performance.getEntriesByType("resource"))
      )
    );
    
// Optionally filter resource results to find your specifics - ex. filters on URL
const imageRequests = performanceTiming.filter((e) =>
  e.name.endsWith("/images")
);

console.log("Image Requests " , imageRequests)