javascript - Puppeteer 有什么方法可以从 Chrome 网络选项卡获取准确的数据吗？

Question

我正在尝试使用 Puppeteer 导航到 URL 并从 Chrome 开发者工具的“网络”选项卡中提取指标。例如，导航至 this page显示以下网络信息，并捕获总共 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. 为什么“网络”选项卡与 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")