puppeteer 导航指标：每个请求/响应的开始和结束时间

Question

我正在使用这个快速启动代码，允许在 puppeteer 无头的情况下进入页面。

const puppeteer = require('puppeteer');

(async () => {

    const args = [

        "--disable-setuid-sandbox",

        "--no-sandbox"

    ];

    const options = {

        args,

        headless: true,

        ignoreHTTPSErrors: true,

    };

    const browser = await puppeteer.launch(options);

    const page = await browser.newPage();

    await page.goto("https://www.example.com/", {

        waitUntil: 'networkidle0',

        timeout: 30000

    });

    await page.close();

    await browser.close();

})()

我想了解有关导航的更多信息：

我能得到每个请求和每个响应的开始和结束时间吗？

puppeteer 中是否有允许获取这些指标的功能？

例如第一个请求的开始时间和第一个响应的结束时间？每个请求和每个响应的最终...

Answer 1

使用PerformanceObserver，您可以通过将条目类型指定为“资源”来获取每个请求的时间。将每个条目添加到对象window，然后使用 puppeteer 对其进行评估。const puppeteer = require('puppeteer');const perfObsRunner = () => {  window.resourceList = [];  new PerformanceObserver((list) => {    list.getEntries().forEach((item) => {      window.resourceList = [...window.resourceList, item.toJSON()]    })  }).observe({type: 'resource', buffered: true});}const getResourceTiming = async () => {  const browser = await puppeteer.launch();  const page = await browser.newPage();  await page.evaluateOnNewDocument(perfObsRunner);  await page.goto("https://pptr.dev/", { waitUntil: 'load', timeout: 30000 });  const resource = await page.evaluate(() => ({ resource: window.resourceList }))  await page.close();  await browser.close();}从响应中您可以获取有关请求的信息，例如：startTime、duration、responseStart、responseEnd。 示例响应：resource = [    {      "name": "https://pptr.dev/style.css",      "entryType": "resource",      "startTime": 55.9099999954924,      "duration": 0,      "initiatorType": "link",      "nextHopProtocol": "h2",      "workerStart": 0,      "redirectStart": 0,      "redirectEnd": 0,      "fetchStart": 55.9099999954924,      "domainLookupStart": 55.9099999954924,      "domainLookupEnd": 55.9099999954924,      "connectStart": 55.9099999954924,      "connectEnd": 55.9099999954924,      "secureConnectionStart": 55.9099999954924,      "requestStart": 0,      "responseStart": 0,      "responseEnd": 55.9099999954924,      "transferSize": 0,      "encodedBodySize": 3704,      "decodedBodySize": 14326,      "serverTiming": [],      "workerTiming": []    },    {      "name": "https://pptr.dev/index.js",      "entryType": "resource",      "startTime": 56.08000000938773,      "duration": 0,      "initiatorType": "script",      "nextHopProtocol": "h2",      "workerStart": 0,      "redirectStart": 0,      "redirectEnd": 0,      "fetchStart": 56.08000000938773,      "domainLookupStart": 56.08000000938773,      "domainLookupEnd": 56.08000000938773,      "connectStart": 56.08000000938773,      "connectEnd": 56.08000000938773,      "secureConnectionStart": 56.08000000938773,      "requestStart": 0,      "responseStart": 0,      "responseEnd": 56.08000000938773,      "transferSize": 0,      "encodedBodySize": 52861,      "decodedBodySize": 149772,      "serverTiming": [],      "workerTiming": []    },    {      "name": "https://raw.githubusercontent.com/GoogleChrome/puppeteer/main/README.md",      "entryType": "resource",      "startTime": 98.98000000976026,      "duration": 1.6949999844655395,      "initiatorType": "fetch",      "nextHopProtocol": "h2",      "workerStart": 0,      "redirectStart": 0,      "redirectEnd": 0,      "fetchStart": 98.98000000976026,      "domainLookupStart": 0,      "domainLookupEnd": 0,      "connectStart": 0,      "connectEnd": 0,      "secureConnectionStart": 0,      "requestStart": 0,      "responseStart": 0,      "responseEnd": 100.6749999942258,      "transferSize": 0,      "encodedBodySize": 0,      "decodedBodySize": 0,      "serverTiming": [],      "workerTiming": []    },]