No One Knows About This Amazing CSS Dev Tools Panel (CSS Overview)

Key Takeaways

One of my favorite CSS dev tools is the CSS overview panel. Just type control shiftP into Chrome and type in CSS overview to view this panel and then click capture overview. This is going to give you a full list of everything on your page. If we just make this a little bit wider, you can see we get things like the number of elements, all the external styles sheets, what style rules I have, and so on. But really, the important stuff comes down below when we talk about colors. For example, I can see every single background color, every single text color, every single contrast issue. And if I click on this, I can actually view exactly where those contrast issues are on my page, which is great. So I can see all the colors and contrast and everything related to that, which is great for figuring out, do I have too many colors that are too similar? For example, up here, these two blue colors look nearly identical to me, so I should probably replace both of them with one of the other just because it's not good to have a bunch of really similar colors cuz it can make your design look a little bit off. Same thing here with fonts. I can see exactly what fonts I'm using as well as the sizes for those fonts and how many times they occur which can help me actually debug the certain problems. For example, inside of here I'm using Jet Brains Mono, but I also have this monospace font that shows up just a couple times like eight or nine times throughout my application. This is generally a sign of a problem in my application where I should be using this actual correct font, but instead I'm using this font by accident. So, this helps me find those particular problems in my page. It also shows me any CSS that doesn't work on my page. I have applied to elements and it does nothing. That'll help me with that. And it also tells me every single media query and how many times they occur. So I can figure out if I have too many or too few media queries or if I'm using values that are very similar to each other. This is just one of the many amazing CSS debugging tools. And if you want to see all of them, I'll link a video on your screen that goes over everything in the CSS test tools you need to