Hidden Gems in Chrome DevTools: 9 Tips and Tricks
Chrome has a great set of developer tools that allow you to dive into the internals of any website! Below are some of the most useful features that I use all the time for both front and back-end development.
A really useful but somewhat unknown feature is their CSS Overview page. It’s a super handy page that gives you an overview of a website's styling, such as the most used colors, the distribution of fonts and font sizes, and other useful stats about your CSS, such as the number of media queries used.
To access this page, click the three vertical dots on the right side of the screen, go to More Tools, and then click “CSS Overview.”
Once there, you’ll see a page like the one below. This is a snapshot of my website; we can see all of the text and background colors being used along with their contrast for accessibility purposes:
There are many things to look at on the CSS Overview page, but one thing I find especially useful is the “Font Info” tab. On this page, I can see the distribution of font sizes and weights on my website, which is super helpful!
