Analyze Any Website’s Codes with CSS Dig Chrome Extension
There’s a lot you can do with Chrome DevTools from editing live websites to studying detailed HTTP requests. But, the ability to analyze CSS patterns is not baked into the console.
With CSS Dig, you can analyze all CSS selectors, specificity, and unique properties of any web page right from Chrome. This extension is totally free and offers a lot of power to frontend developers.
Read Also: Web Design: Getting Started With Chrome Developer Tools
As you inspect a stylesheet you’ll get lots of data from the CSS Dig panel. It can show you individual selectors, including duplicates and unnecessary specificity levels.
To get started, simply install the plugin and open the console window. You’ll find two tabs in the CSS Dig window: Properties and Selectors.
You can browse results organized by properties (color, border, padding), or by selectors (classes, IDs). I find the Properties window to be the most valuable, as it allows you to study which fonts and colors you’re using.
This tool works across the board for any website, so it’s also handy for reverse-engineering anyone’s design. You can copy/paste the CSS directly from this window and reuse it on your own projects.
Probably the most common use case for CSS Dig is to clear duplicate colors from your color palette. How many unique shades of green do you really need? Or, how many different sans-serif fonts are necessary for one page?
CSS Dig is incredibly simple, so don’t expect dozens of features like with DevTools. Instead, this plugin is rather geared towards frontend developers auditing sites for repeat selectors or duplicate properties.
The source code of the plugin is available for free on GitHub where you’ll also find all the latest updates.
Recommended Reading: 5 (More) Useful Chrome DevTools Tips for Developers