I am trying to remove unused CSS from a webpage.
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
In Chrome's Dev Tools (Command+Option+C on Mac, Control+Shift+C on Windows/Linux, or right-click on the page and choose “Inspect”), select the “Sources” tab, and if “Coverage” isn't a displayed tab at the bottom, select it using the three vertical dots to the left of those tabs.
Open the DevTools on your Chrome tab by right clicking and inspecting using 'Inspect' or pressing F12 from your keyboard. Click on the reload icon shown in the above text. The coverage of the code (JavaScript and CSS) will be calculated.
DevTools technical writer here.
No, unfortunately there is no way to group, at the moment. We're aware that users want to be able to export used code to a file. Can't give a timeline on when that feature will ship, though.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With