Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 909
anurag Avatar asked May 04 '18 03:05

anurag


People also ask

How do I get CSS coverage in Chrome?

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.

How do I find unused CSS and JavaScript files in my website?

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.


1 Answers

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.

like image 96
Kayce Basques Avatar answered Oct 24 '22 11:10

Kayce Basques