How to debug CSS with your browser development tools

CSS is not a programming language. Yet, depending on who you ask, will tell you writing good CSS can sometimes be as challenging as writing in programming languages like Java or JavaScript.

In this article, I want to show you a few tricks how you can debug CSS problems to solve them. As a good web developer, you should be familiar with browser developer tools (e.g. from Google Chrome) so we will use those.

Wireframe mode

Struggling with layout issues? Maybe a more wireframe-like look will help you to understand your layout better. The following CSS rule will make every element have a black background, green text color and a red border. You can either add the rule in your stylesheet or directly in your browser. Depending on your use case, you can even improve this rule. Don’t forget to disable this on production!

* {
   background: #000 !important;
   color: #0f0 !important;
   outline: solid #f00 1px !important;
}

Computed style properties

Some browser development tools (e.g. Chrome developer tools) offer you a view displaying the style properties which are applied to a particular element. Here, you can also see for each style property where it has been set.

Testing CSS queries directly in your browser

Unless you are not inlining styles, you have to create valid CSS declaration blocks. Sometimes, CSS selectors can become complicated to read and write. A quick way to verify whether CSS selectors work correctly is to search directly in your browser development tools. You can look for both text and CSS selectors.

Toggling element states

Certain elements like input fields are styled when they are focused. Other elements like buttons react when you hover with your mouse on them. Most browser development tools allow you to toggle element states like focus or hover. However, if a DOM listener is listening for this event then toggling the state of an element will usually not throw an event which would be registered by this listener.

Conclusion

Thank you for reading this article. As you see, there are a couple of strategies you can use when running into CSS issues. Do you know any other tricks when it comes to debugging CSS? Let me know in the comments.