GoogleChrome / lighthouse

Automated auditing, performance metrics, and best practices for the web.
https://developer.chrome.com/docs/lighthouse/overview/
Apache License 2.0
28.02k stars 9.32k forks source link

View trace not available on programatically executed lighthouse #15987

Closed hbpatel142 closed 1 month ago

hbpatel142 commented 1 month ago

FAQ

URL

https://www.google.co.uk

What happened?

Below script is executed

 const browser = await launch({ executablePath: '/Applications/Chromium.app/Contents/MacOS/Chromium' });
    const page = await browser.newPage();
    const flow = await startFlow(page);

    await page.tracing.start({path: 'trace.json'})
    // Navigate with a URL
    await flow.navigate('https://www.google.co.uk');
    await page.tracing.stop()
    await browser.close();
    writeFileSync('report.html', await flow.generateReport());

view trace is not present in the report

What did you expect?

Expected to see the view trace in the results

What have you tried?

I have tried looking for different options in the configuration file and noticed that the throttlingtype should be devtools in order to have trace in the flow report. but it did not work either.

const config =
    {
        extends: 'lighthouse:default',
        settings: {
            throttlingMethod: 'devtools',
        },
    }

report.html.zip

How were you running Lighthouse?

node

Lighthouse Version

12.0.0

Chrome Version

124

Node Version

22.1.0

OS

Mac

Relevant log output

No response

connorjclark commented 1 month ago

The trace is one of the artifacts, you can grab it if you like.

The view trace button is only available in devtools because it uses the performance panel to view the trace.

hbpatel142 commented 1 month ago

Hi Connor,

Thanks for the response, I think this is not part bug fix but could you please share how could I get the trace as an artifact.

In regards to the feature request, I have seen the feature of opening trace file directly in the performance tab. https://trace.cafe/

Would it be right for us to convert this to a feature instead of bug ?

connorjclark commented 1 month ago

Thanks for the response, I think this is not part bug fix but could you please share how could I get the trace as an artifact.

flow.createArtifactsJson(), grab the step you want, it's called Trace.

Would it be right for us to convert this to a feature instead of bug ?

We could theoretically add a link to trace.cafe from the report, but that means making the trace part of the LHR and its far too large to do that. Or preemptively uploading to trace.cafe with a short expiry, but that would have to be opt-in, and even then I don't know if @paulirish is set up for that much data. Will extracting the trace programmatically and manually uploading to trace.cafe be sufficient for you?