Modify HTML report - add screenshot

[alexyz41]

Hello!!

First of all I would like to thank all the people that is part of this project. You guys are doing an awesome job.

I am rather new to lighthouse, so I apologise for my ignorance.

I am using lighthouse from the Windows PowerShell with the command

lighthouse https://mywebsite.com/ --locale=es

I need to modify the HTML report that the tool generates and attach a screenshot of the webpage and the URL of the website at the top of the report.

Is that possible?

Thanks

[adamraine]

It's definitely possible, you just need to modify the HTML report manually to add the picture you want. There are some screenshots used in the timeline view under performance if that helps.

[adamraine]

Ah ok. Check out the report generator then https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report. You should be able to modify the code in that folder to suit your needs.

[alexyz41]

That is awesome!! Now I have a clear idea on where I should look for the files to modify.

My doubt now is what file should I actually modify in order to accomplish my goal, and what should I add/remove.

I know that maybe that's much to ask for, so I would really appreciate any hint or code draft.

Thanks

[adamraine]

Here is something quick and easy that you can start with:

<div style="height: 200px; background-image: var(--element-screenshot-url);"></div>

Put that element at the top of the div.lh-container that has --element-screenshot-url defined in the style attribute. Result looks like this:

[alexyz41]

I really appreciate your help adamraine. I am very close to what I want to acomplish.

I am facing a problem tough. I know that the file that I want to modify is "templates.html" inside \lighthouse\lighthouse-core\report\html.

In the HTML report generated, As you said, the section I want to insert the screenshot is before "lh-container"

But then, I go to the file "templates.html" and I am not able to find that section

Can you tell me where can I find the "lh-container" section?

Thank you so much.

[adamraine]

Not everything is in the template, some is generated by JS.

Look in https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report/html/renderer/report-renderer.js for how the element gets added.