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