Chrome Developer Tools : I CSS Coverage unused bytes

I am trying to remove unused CSS from a webpage.

  • In Chrome Developer Tools -> click on vertical three dots -> More tools -> Coverage.
  • Click on any CSS
  • We see a report wherein red indicates unused CSS, green indicates used CSS.

Is there a way to group CSS based off whether they are used or not? Right now, the red/green visual indicators are good, however, they don’t provide an easy way to copy/paste just the used CSS.

How to get CSS Code Coverage

Visual indicators for CSS code coverage

Chrome Dev Tools – Code Coverage during navigation

The new code coverage feature is really awesome, but it can only test one page.

Obviously noone has a site where you can see all abstractions and modules at once. This might be the case on SPAs, though.

So the question is:

Is there a possibility to capture the information across multiple sites during navigation?

Tested in Chrome 63.0.3239.132