Chrome DevTools for troubleshooting HTML and CSS

Chrome DevTools for troubleshooting HTML and CSS

March 22, 2015

When your code isn't working it can be frustrating. Not knowing the tools available to figure out why its not working is more frustrating. The Chrome DevTools are a tremendous part of my work flow, I don't know what I'd do without them. For instance, when I enter something in my CSS and it doesn’t look the way I expected it to in the browser, the first thing I do is crack open the DevTools to see why. And it usually tells me.

Opening DevTools

Option + Command + I on the mac and F12 on a PC. Or you can right-click and select Inspect Element from the contextual menu. This opens the developer tools with the Elements tab open, showing html on the left and css on the right. Awesome sauce. Firefox, Safari, and newer versions of IE have roughly something like it. I’m most comfortable with Chrome, so this article is concentrated on Chrome’s capabilities.

The Elements Panel

This is the default tab that opens and is probably the most important for CSS troubleshooting and designing in the browser.

Chrome's Developer Tools

If you opened the DevTools, however, using shortcut key Option + Command + I it defaults to inspecting the body tag, with the CSS for that tag on the right. Not particularly useful most of the time. My preferred approach is to right-click or Control-click on a specific image, word, or element on the page in order to get the DevTools to target that specific element and show its styles. It also does this awesome highlight feature where it highlights the element you selected showing the space it occupies plus the margin and padding. The margin is color coded in a light peachy/orangey color while the padding is a greenish color. That in itself is very useful especially when you get in to the territory of floats and collapsed elements due to floats.

Inspecting an element

The Styles panel on the right is even more helpful. I can see the selectors that are influencing this element’s styles. The most specific selector is going to be on top, and in this case is .class-info h2. This is where the border properties as well as the margin and padding are being applied. Below the initial selector are other less specific rules that apply to this element. The second selector from the top h1, h2, h3, .nav a is less specific and shows where this h2 is getting its font-family from. Now what’s really awesome is I can simply change these rules in order to see how it affects the page. For instance, if i want to change the color of the border-bottom I can simply click on the color swatch and a color picker appears that allows me to choose my desired color.


chrome-color-picker

Changes do not persist by default. So as soon as you refresh the page you go back to the original styles. However, Chrome does have a way for you to save your changes in the DevTools and have them update your project immediately, it’s called Workspaces and it pretty much rocks. But don’t worry about that too much if you’re just getting in to DevTools. Circle back to that later when you have a need for it.

Problems with specificity

Have you ever typed in a background color for a certain element and then not had the color show up when you viewed it in the browser? I think everyone has issues like this from time to time. A lot of time its a specificity issue. Meaning you’re applying a background property to a selector that is less specific than another selector where the actual background property is actually coming from.

For instance, let’s say you add a background color to your headlines and expect the nice shiny red to show up when you view it in the browser. But when it doesn’t, the DevTools will show you that another more specific selector is taking precedence by the fact that your property is literally crossed out with a line through it.

css specificity

This is nice because it also shows you the exact line numbers to find the more specific selector that is overriding it. At line 1476,.class-info h2 is more specific and taking precedence with its green background.

Typing Problems

The other common problem is you just type in the property name incorrectly. Have you ever typed in font-color by mistake and wondered why the text color didn’t change. What’s that? No, I don’t do that like every day.

invalid-css-property

So it also crosses out “font-color” with a symbol next to it, not signifying that another property is more specific, but signifying that the property font-color doesn’t exist. The same thing would go if you mispelled the word “background-clolor” or something.

Adding properties to an existing Selector

What’s nice is you can click on an existing value and hit tab until you come to the last value in a rule set. When you hit tab it will allow you to enter a new property.

new-property

It also is smart enough to offer value suggestions when you tab to the value field. There’s no browser refreshing necessary, the change is immediately visible. This speed is often nice to preview styles quickly. You then can copy the style changes directly from this panel and put them in your css file if you determine you want to accept the changes. This is great for previewing changes to existing selectors in your style sheet.

Creating a new selectors

Using the + button you can even create new a selector. This is nice because you may want to target an element that doesn’t have a rule set created for it in the style sheet. Or, it already has a generic rule set, but maybe you want to create a more specific rule set that only applies to the element in certain places.

new-selector

So I clicked the “+” button in the top right corner and then was able to type in a new selector .class-info a that only applies to anchor elements inside of .class-info.

Accessing hover states

Making cool hover states is kind of the funnest part of CSS in my opinion. Sometimes these interactions can become very complex and its worth creating them in the browser with the hover-state permanently on. This is something that can be very helpful.

hover-states

Click on the icon in the top right corner, and select the hover checkbox. This will show you the hover styles that are being applied to any given element and allow you to modify and add more.

Accessing Computed Values

DevTools shows declared as well as inherited styles. Its worth explaining how to interpret this as it’s useful when debugging CSS rules and determining which rules take priority. Sometimes you’ll get in to projects where the CSS is so bloated and chaotic, and there can be a lot of rules that are targeting a given element. When this happens its time consuming to find the rule set from the list of selectors that is truly having an impact. What’s more difficult to figure out is when a certain property is not specifically declared in your stylesheet but inherited or automatically assigned by the user agent (browser). Switch over to the Computed tab to see an alphabetical list of computed properties that are affecting the element.

computed-styles

Just expand the property name using the little carrot to see the selector and line number in the stylesheet that is applying that property.

Console for Finding errors

This is very useful for debugging javascript, but as far as CSS goes what do you do when a background image isn’t showing up? I find that there are two problems typically with images, 404 (can’t find it) and 403 (permissions on the file are forbidding you to access it). The conosle should tell you if there’s a problem.

console-error-icon

This little red error X icon with a number next to it shows up when Chrome finds problems with your website. Clicking on the error icon or switching over to the Console tab will provide further info.

console-error-msg

So I’m getting a 404 error which means its not a permissions problem on the file, it means that the file can’t be found at the location I provided. So maybe I typed the file name incorrectly. Maybe I specified PNG when its actually an SVG, or maybe the path to the file is incorrect. Either way this is helpful to know when determining why my image isn’t appearing.

Device Emulation Mode

Chrome has so many awesome developer tools and the device emulation has to be one of the cooler new features. Its hard to test your site on lots of devices. Although not perfect, emulating your site as various devices in Chrome is useful. Just click on the little phone icon in the top left of the developer tools.

device-emulation

The entire browser window will change and give you the opportunity to select from a number of devices. This isn’t going to be identical to testing on an actual Samsung Galaxy II but it might be as close as you’re going to get if you don’t have that phone and you get a problem reported from that device.

Conclusion

The Chrome DevTools are awesome and I tend to prefer them over other browser development tools. There’s so much more to the developer tools as well like using the Network tab to analyze and optimize performance and the Audit tab which can actually audit your page and offer improvement suggestions for performance.

Additional Resources

Mastering CSS: Book by Rich Finelli
Mastering CSS, the Book! Flexbox, Layout, Animations, Responsive, Retina, and more!
Mastering CSS, 2nd Edition, video course by Rich Finelli
Mastering CSS, Second Edition: 47 videos on how to make websites like a boss! Flexbox, Animations, Responsive, Retina, and more!
  • http://www.technbuzz.com/ Samiullah Khan

    There are so many great things discussed here and I frequently use them for me while teaching css beginners, is the specificity and when mistyping the css property.

    Secondly Kudos to this site design because, they are, so pleasing to eyes when I read the article.

  • Pingback: Calculating CSS Specificity – David Horn's Blog()

Back to top