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")