When I was redesigning my site and creating my interactive tools earlier this year (because I clearly undervalue protecting my mental health 🙃), CSS issues nearly drove me mad.
Then I discovered the Computed tab in Chrome DevTools.
It rocked my world. Seriously. I’ve always seen it over there but diagnosed all CSS issues in the Styles tab. The beauty of the Computed tab though is it shows the actual values applied to an html element. In this tip I’ll walk through my typical process for identifying the rule responsible for a style.
Step 1: Select the element
Right-click on the problematic element and select Inspect. Once the DevTools panel opens, if you hover over the html, the element will highlight in the browser with some basic info about it. In my example, you can see the h2 is a block element (because it spans the width of the div it’s in), and it’s 1200px wide (the width of div it lives in) and 48px in height.
Step 2: Open the Computed tab
Chrome DevTools defaults to the Styles tab. Click the Computed tab to open it. It shows you the actual styles being applied to your element after all the CSS rules have been processed.
Step 3: Hover over a value
Hover over a value to surface a green, right-facing arrow.
Step 4: Click the arrow
Click this arrow to navigate to the CSS rule responsible for that value. It will open the Styles tab and briefly highlight the exact rule.
In this example from my site, the h2 selector has a font-size of 2em but a computed font-size of 40px. The browser computed the 2em value using the parent element’s 20px font size, multiplying 20px × 2 to arrive at the final 40px that actually renders on screen.
Step 5: Experiment with different values
If I want to experiment with a different font-size, I can do that by selecting the value to highlight it and change it. The element will update immediately. You can even use the up and down arrows on your keyboard to in/decrement through different values, as long as the value is highlighted.
This technique works for any CSS property that’s giving you trouble, whether it’s margins behaving strangely, colors not appearing as expected, or layouts going rogue. Instead of hunting through multiple CSS files or guessing which rule might be winning, the Computed tab lets you diagnose issues in real time and experiment with different settings. Learning to use it helped me immensely when I was redesigning my site and creating my tools earlier this year.