In our interview with John Riviello, we learned that one of the important skills developers need is their ability to debug their code. In this episode, we'll take a look at some of my favorite ways to debug CSS with Chrome Developer Tools.
- [Instructor] In a previous interview with John Rivialo, we learn that one of the important skills developers need is the ability to debug their code. In this episode, we're going to take a look at some of my favorite ways to debug CSS with the Chrome developer tools. Now, although we're using Chrome right here, all browsers have their own set of developer tools, which are fairly comparable with what I'm going to be showing you in Google Chrome. Now, regardless of the tool you're using, it's critical to be comfortable with the developer tools that you know. Developer tools are pretty deep, so I'm just going to focus in CSS in this episode and the following things.
First, I'm going to talk about navigating the DOM, or the structure of your page, so that you can target a specific element. In the Chrome browser, you do that through the elements tab. Now, second, we're going to take a look at the two main places where you can analyze what your stylesheet is doing, the styles subtab, as well as the computed subtab. I'll also show you how to make changes to your CSS and your HTML so that you can test out what would happen when you make some changes to code. So let's take a look. Here's a simple project that we developed in a previous episode, and we can get to the developer tools in a number of different ways.
Now, one way is to go through the menus, but that's actually very inefficient. The best way is to right-click on an element and then select the inspect submenu. There's also a command key that you can use for this, and that's command + option + I on a Mac, or ctrl + shift + I in Windows. So you can see now that I have, on the left-hand side, my page, and on the right-hand side, the HTML. More specifically, the DOM in my HTML, so it's sort of giving you an outline of what's happening with this page, and as I navigate through these different elements, you can see that it's highlighting them on the left.
Now, because this window is taking up some of the room in our interface, this view happens to be the mobile view, or the mobile breakpoint, so if I wanted to, I could make this bigger, and we could switch to another breakpoint, but this is actually a good breakpoint to look at for what we're going to be doing, so we'll leave it in here. Now, there's a lot of contextual functionality available by right-clicking on things, so make sure you try this in different places. So, for example, I can switch to another element if I right-click right here and select to inspect the DOM at that instance.
There's also a lot of right-clicking that can happen on these different elements. If I click right here, you'll see some additional items that pop up on this element's tab. Now, you can also switch the location of this tab if you don't like it right here. You can switch it to be underneath or to either side of your interface, and this is going to work pretty well for the amount of room that we have here, and I like this view of the mobile-size version of my page. As you notice, when I navigate through these different elements, it's actually highlighting them on the page, letting me know that if I click right here, it's going to show you this section of the DOM node.
There's another way of doing this. If you wanted to specifically target an element, you can click right here, in this icon on the top left, and then target a specific element and click on it. Let's say we wanted to get to this headline. And we click on it right here, it's going to take it directly to that element by first clicking on this icon and then targeting the element by rolling over it and then clicking it. Now, once you have a DOM element selected here in the elements tab, you can move through the DOM by hitting the arrow key, so you can hit up and down, and then, if you hit the right arrow here, it's going to open that DOM element.
You can also, of course, close them by hitting the left arrow, or you can use your mouse to click on these different elements. Now, if you want to see how a node looks like when an event like a hover takes place, you can open one of these DOM elements up, so let's go ahead and open up in the navigation one of these items right here, and if I right-click to the left of this element, I'll get a contextual menu, and then I can select hover to see how that element would look when we're hovering over the page.
That same functionality is available right here, so you can toggle the element state and any of these other element states are available as well. Now, if you take a look at these breadcrumbs right here, they allow you to sort of go up the DOM tree. So right now, we're looking at this anchor tag, and if click right here, it's going to go up one level to my div with a class of nav bar, and I can navigate up and down the DOM tree like that, as well. Now, underneath that, you're going to have some additional information, so let's go ahead and pull that up by clicking and dragging on this.
Now, in this styles pane, you're going to see how these elements are being applied, including the line number in your CSS, where you can find this definition. So if you're looking for where I am defining the nav, navbar class, I can click on this right here to go directly to where that would be on my stylesheet. Now, I can make changes here, but they're not going to be saved by default, so you can play around with this, but this is really to tell you where in your code, for example, which line number you can modify in your stylesheet.
So let's go ahead and go back. Notice that this also takes you to the sources tab, so we have to click on elements to come back here. This is a great way of finding out where I have modified my CSS. Now, if you want to, you can modify some of these just by clicking on them, and then you can change, maybe, the hue here, and play around with how that would look. Now, these changes are temporary, so if you want to start over, just refresh the page and your changes will be gone, so it no longer remembers that we wanted to test hover on this element, so go ahead and turn that back on, and it's already reset my color right here.
We can turn styles on and off if we want to see how some of these style definitions will affect my page, and in addition to these style.css line numbers, you'll notice that if you go far back enough, you'll see one called user agent stylesheet. Now, that means that the browser itself is affecting how this element is displayed within its own default. Sometimes you'll see a strikethrough, like in this line right here, and that means that the style is being overwritten by some other style.
So, for example, even though we are defining the color of links, by default, to be this red color, whenever we are hovering, that is being overwritten by this new slightly darker color, and that's why, on the left, you can see that the profile link we have defined as sort of displaying temporarily as a hover is a little bit different than the other links. If he sees styles that are grayed out like these margins and paddings right here, it means that these aren't defined in the stylesheets but will be computed at run time.
Now, one of the most common debugging tasks that you'll have to do is figure out the width of elements. You can see that right here, we can see a representation of the sort of box model for our current element, so we can actually come in here and edit these. So, say, delete the padding at the top and see how that would affect our layout. Again, if you want to undo that, just go ahead and hit refresh, set you back to the defaults, and let's go ahead and turn cover back on here, and you can see that right underneath, because we have the window so wide, we have a slightly different view of what's happening here.
This is sometimes called the computed view, and it would be maybe on a separate subtab. Depending on how you have your interface defined, you may see it appear right here, to the right. I'd say, I think if you make this window smaller at some point, it might disappear. It really depends on your layout, which, if you remember, you can change right here. So, we'll leave it as-is right now. So this view right here gives you the computed version of the CSS, and this is sometimes a little bit more useful because if you want to find out what the actual font is right now, or the font size, if you go by this list on the left, you're going to see the styles applied in order of specificity, so these styles right here will overwrite previous styles that are defined through these different style definitions.
However, if you just want to figure out what the final style for an element is, then you can see it right here on this computed tab. So even though we may have defined padding in different places, if I wanted to find out what the actual padding at the bottom of this element is, it's telling me that it's 16 pixels, and the font weight is 600 pixels, even though I may have different places where I had defined that. Now, if you want to get to where these are actually defined in your CSS, you can open up this little triangle right here and it's going to tell you the line number where that is done.
You can also click on these little arrows right here, again, to go to the place in your stylesheet where that is defined, so notice that it's highlighting it right here on the left. You can click in these links as well if you want to see it on your actual stylesheet on line 58. So this is sometimes a quicker way of finding where, exactly, the specific styles have been modified, as opposed to digging through the DOM order. As I mentioned, to edit any of these styles, the easiest thing to do is just to click on the styles right here.
You can turn 'em on and off, and you can also hit this button to insert a new rule. It's right next to the bottom of each one of these different style definitions, so we can add another style here, and/or just click right here, sort of to the end of the semicolon, and then we can add another style to that level. If you do that right here on the element.style definition, which will be in all of your different elements, it's the same thing as adding a style attribute to an individual tag.
So it's going to be the most specific. Notice that once I do this, it shows that this one has been overwritten to one that I added just a few minutes ago, and then it shows that it's also overwriting the previous style. Again, if you want to start over, just hit the refresh button and all those changes will be gone. Now, here are some pages where you can get more information about working with the developer tools in the different browsers, as well as some related courses with information on how developer tools work.
It's really important that you get comfortable with them, and in order to do that, you'll need to spend some time just practicing with them. Now, as usual, if you have some ideas for this weekly series and maybe you want to share with me some questions you've been asked or have asked in interviews, connect with me in LinkedIn or just about any other social media network, like Twitter or GitHub, @planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.