CSS Experimental Overview (Chrome)

CSS Experimental Overview (Chrome)


1 min read

Ever wanted to see an overview of all your CSS in Chrome? What colour scheme you are using, where you are using certain things. Do you have any unusable variables in CSS etc?

To open the developer console in Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools. You can also use the shortcut Option + โŒ˜ + J (on macOS), or Shift + CTRL + J (on Windows/Linux). Developer Tools

Then go to Settings by clicking the cogwheel cogweel at the right. Then select Experiments and click CSS Overview Experiments

Now you will have a new tab when opening your developer tools on any website called CSS Overview open a website and click Capture Overview

Now you will get something like this Color Overview Font Overview Unused Overview

Hope you enjoyed this and now you can get an easy overview of all your CSS instead of digging through the file.