This guide assumes that you're familiar with inspecting CSS in Chrome DevTools. See Get Started With Viewing And Changing CSS to learn the basics.
Overview
Suppose that you just added some CSS to your nav and want to make sure the new styles are being applied properly. When you refresh the page the nav looks the same as before. Something is wrong. The first thing to do is inspect the element and make sure that your new CSS is actually being applied to the nav. If you can see your new CSS in the Styles pane, but your new CSS is crossed out, it means that there's some other CSS that is overriding your new CSS. In CSS terminology this concept is called Specificity. Chrome DevTools can help you find the old CSS that is causing your new CSS to not be applied.
max-height: 512px declaration is crossed out.
Find overrides in the Computed pane
From the Elements panel, open the Computed pane.
Figure 2. The Computed pane. Scroll through the list of properties and expand the one that you want to investigate further.
Figure 3. Investigating the max-heightproperty in the Computed pane.Click the blue link next to a declaration to jump to open the Sources panel and jump to that declaration's source code. See Make a minified file readable if the code is minified.
Figure 4. Viewing the max-heightdeclaration's source code in the Sources panel.
Filter properties
If you want to focus on a specific property, type that property name in the Filter textbox.
max in the
Computed pane.
Show all properties
If you want to see all properties that are being applied to the element, including user-agent stylesheets, enable the Show All checkbox.