In this video, explore the style information that Chrome Developer Tools expose for an element, including style rules that apply to the element, its ancestors, and pseudo-elements, as well as its computed styles.
- [Instructor] On the right side of the elements panel is a set of other panels that can be used in conjunction with the elements panel. The first is the styles panel, which shows all the CSS style rules that are relevant to the element currently selected in the elements panel. So, I have index.html from the data files for this video open in the browser window. And scrolling down, we've got the nav bar, and I'm thinking about making some changes to it. So, I'm going to right-click one of the elements in the nav bar, and I'm going to click Inspect, and then I'm going to select the A element rather than the span element in the dom code, because that's the element I'm really interested in working with.
So we notice that not only is the nav bar item selected in the elements panel, but also the styles panel to the right shows all the styles that apply to that A element. And as we scroll down the styles panel, that's quite a few. All the style rules that select this element itself, followed by style rules that this element inherits from, and finally its pseudo-elements. And at the very bottom, we get a visual representation of a box model for this element, which can be really useful in debugging layout issues.
Notice in the top right corner, we have a few options that give us further debugging tools. The :hov or hov option lets us toggle the element's state, and so with that A element selected, we can click hov, which shows us check boxes for four states. And if we click hover, we see that the element state changes in the browser window. It now has the yellow background and blue text that's styled for the hover state. And if I scroll to the top, the styles panel now shows the styles for the hover pseudo-class, which currently apply to this element.
So I want to explore maybe changing the colors on hover. I'm thinking that I'd like to see how it looks to have the text appear as the same red color as in the background of the hotel name to the left, which is hex code DF4848. So I click the value for the color property, and I'm going to type #DF4848, and then I'll click in a blank area of the side bar. And immediately, the text color goes from white to red.
And I can uncheck the hover box, and then use my mouse pointer to interact with the nav bar items, and each of them displays red text on hover instead of white. And that's because I changed the style rule that applies to all of the nav bar items. So now, I'm thinking maybe that would pop a little more if I didn't change the background color on hover, so it'd maybe have a more subtle effect where the text changes to red, but that's it. Well, notice that each declaration in the CSS code has a checkbox when you hover over a particular style rule.
So I'm going to click the hover box again to view the hover styles, and then I can go here and uncheck the box for the background color property. And now I'm going to uncheck hover and test again, and now, the page is rendered as if that property was not part of the webpage, so the background color doesn't change. Just the text. Now I think that's too hard to read, not great for user experience, so I can go back and check the box again. First I'll click hover to get those hover styles back, and then I'll check that box.
And now the background color changes, as originally designed. So I like the color change I made to the text itself, but again, the changes I've made here are just for testing purposes. When I close the tab or reload it, those changes are gone. And so, if I want to make them permanently, I need to go back to my code editor and make them there, and then save them to my stored code for them to be permanent. So, the styles tab in the sidebar shows me all the style rules that apply to the selected element with line through styles that are superseded by other declarations.
But sometimes, I just want to see the net effect. How big is the margin? What font size am I seeing? Rather than trying to sort through all the style rules to find a declaration that applies, we can click the computed tab, and below a diagram with a box model, this shows the final value for each CSS property that applies to the selected element. Now, it's not going to show the style rules that are being applied as in the styles tab, and it's not even going to show the value that was specified in the style sheet.
Instead, it shows the values that the browser uses in rendering the item. So, for instance, color properties are shown in RGB notation, even though in our style rules, that's specified using a hex code. So, this is a way to cut through the CSS code if you want to see a measurement or a color value, but it's not a way to view the values applied from the CSS. To do that, you're going to have to look through the code in the styles tab and find the relevant declaration.
- Setting up your testing and debugging environment
- Customize the display of Chrome Developer Tools
- Inspecting elements and styles
- Using the Console
- Opening source files in the Sources panel
- Identifying code that slows page loading
- Emulating mobile connections