How to Use Puppeteer to Extract Code Coverage Data From Chrome Dev Tools

#node #css #question

Hello,

I was referring to https://www.philkrie.me/2018/07/04/extracting-coverage.html

This tutorial seems working fine, indeed the only tutorial I found working as per my requirement.

I guess this post is a little outdated; I am sorry if it is not.

I am trying to generate unused CSS for my WordPress website that using builder tools like Elementor or Divi.

Currently, the output is minimal and breaking my website styles.

Do we have any way to open the GUI of the browser, and then I interact with the pages like scrolling, opening the pop-up, and adjusting the viewport so that we can let the coverage tool make it more accurate?

Then the Node script do rest of the things?

If yes, please help me with updated code.

If that is not possible or not an easier solution, I wish to know a working way to convert/parse the Coverage-xxxxx.json file to CSS file where it only holds used CSS. I tried most of the available threads and forums, but no luck.

Thank you so much.