Question

我正在尝试计算chrome跟踪请求所花费的总时间。我正在使用puppeteer进行跟踪。我知道我可以通过从ts时间中减去NavigationStart来计算时间，但是我很困惑是从ResourceReceiveResponse事件ts还是ResourceFinish ts中减去。

我正在使用puppeteer版本2.1.0

这是我的跟踪代码

let args = puppeteer.defaultArgs().filter(arg => arg !== '--enable-devtools-experiments');
       args.push('--enable-devtools-experiments');

       let x = {
           headless : false,
           devtools : true,
           args : ['--no-sandbox']
       };

       const browser = await puppeteer.launch({ ignoreDefaultArgs: true,  args });

        const page = await browser.newPage();
        await page._client.send('Performance.enable');
        await page.tracing.start({
            // Use these categories instead of the puppeteer defaults
            categories: [
                'disabled-by-default-v8.cpu_profiler',
                "disabled-by-default-v8.runtime_stats",
                'devtools.timeline',
                'v8.execute'
                ]
        });

        await page.goto("http://localhost:3000/check", {waitUntil: 'load', timeout: 0});

       const metrics = await page._client.send('Performance.getMetrics');
       const getTimeFromMetrics = (metrics, name) => metrics.metrics.find(x => x.name === name).value * 1000;
       const navigationStart = getTimeFromMetrics(metrics, 'NavigationStart');

       console.log(navigationStart);

        // await page.goto("http://js-perf-tracker.dcos-apps.ncal.reports.mn/check", {waitUntil: 'load', timeout: 0});
        const trace  =  JSON.parse(await page.tracing.stop());

Answer 1

我一直在寻找相同的东西，并且发现similar issue on GitHub

我还没有使用puppeteer，我需要使用它来解析Chrome Performance Profile，所以idk会派上用场

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.tracing.start({ path: 'trace.json' });
    await page.goto('https://example.com', { timeout: 60000 });

    const metrics = await page._client.send('Performance.getMetrics');
    const navigationStart = getTimeFromMetrics(metrics, 'NavigationStart');
    await page.tracing.stop();

    // --- extracting data from trace.json ---
    const tracing = JSON.parse(fs.readFileSync('./trace.json', 'utf8'));
    const htmlTracing = tracing.traceEvents.filter(x => (
        x.cat === 'devtools.timeline' &&
        typeof x.args.data !== 'undefined' &&
        typeof x.args.data.url !== 'undefined' &&
        x.args.data.url === 'https://example.com/'
    ));
    const HtmlResourceSendRequest = htmlTracing.find(x => x.name === 'ResourceSendRequest');
    const HtmlId = HtmlResourceSendRequest.args.data.requestId;
    const htmlTracingEnds = tracing.traceEvents.filter(x => (
        x.cat === 'devtools.timeline' &&
        typeof x.args.data !== 'undefined' &&
        typeof x.args.data.requestId !== 'undefined' &&
        x.args.data.requestId === HtmlId
    ));
    const HtmlResourceReceiveResponse = htmlTracingEnds.find(x => x.name === 'ResourceReceiveResponse');
    const HtmlResourceReceivedData = htmlTracingEnds.find(x => x.name === 'ResourceReceivedData');
    const HtmlResourceFinish = htmlTracingEnds.find(x => x.name === 'ResourceFinish');
    // --- end extracting data from trace.json ---

    await page.close();

    let results = [
        {
            variable: 'HtmlResourceReceiveResponse',
            value: HtmlResourceReceiveResponse.ts/1000 - navigationStart
        },
        {
            variable: 'HtmlResourceReceivedData',
            value: HtmlResourceReceivedData.ts/1000 - navigationStart
        },
        {
            variable: 'HtmlResourceSendRequest',
            value: HtmlResourceSendRequest.ts/1000 - navigationStart
        },
        {
            variable: 'HtmlResourceFinish',
            value: HtmlResourceFinish.ts/1000 - navigationStart
        },
    ];

    console.log(results);
})();

在操纵up跟踪中的ResourceReceiveResponse与ResourceFinish

1 个答案: