Puppeteer 有没有办法从 Chrome 网络标签中获取确切的数据？

Question

我正在尝试使用 Puppeteer 导航到 URL 并从 Chrome 开发人员工具的网络选项卡中提取指标。 例如，导航到此页面会显示以下网络信息，并捕获总共 47 个请求。

但是，我正在尝试使用以下代码获取这些指标：

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

但是，当我查看performanceTiming对象时，它只有 34 个项目：

因此，我的问题是：

1. 为什么 Network 选项卡与performance.getEntries()显示的请求数量存在差异？
2. 是否可以让performance.getEntries()显示所有请求而不是其中的一部分？
3. Puppeteer 是否可以从“网络”选项卡中获取所有数据？

Answer 1

您可以使用page.tracing功能。

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

devtools.timeline类别有很多东西需要探索。

您可以通过ResourceSendRequest获取所有请求过滤

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

以及通过ResourceReceiveResponse过滤的所有响应

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