Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Debugging CSS with Chrome DevTools

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Identify and Debug Errors

4:28 with Guil Hernandez

Learn how to identify errors in your CSS, visualize and test element state, and copy or save changes to your CSS from DevTools.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    In this video, I'll teach you other useful DevTools features that help you 0:00
    quickly identify errors in your CSS; visualize and test hover, 0:04
    active and focus states on elements. 0:08
    Even enabling and disabling classes, and ways to easily copy or 0:10
    save out changes to your CSS. 0:14
    As I mentioned in an earlier video, CSS does not provide you feedback or 0:17
    error messages if your code contains invalid declarations or syntax errors. 0:21
    One of the best features of Chrome DevTools is its ability to 0:26
    quickly recognize errors in your CSS and warn you about them. 0:29
    For example, if I give the h1 a font color of red, we see that 0:33
    it gets crossed out and a warning icon appears to the left of the declaration. 0:40
    Hover over the icon and it displays the text, unknown property name. 0:45
    Well font color is not a valid CSS property, so 0:49
    DevTools immediately flagged it and alerted us. 0:53
    And the same applies to CSS values. 0:56
    So for example, if I set color to reder, 0:58
    it lets me know that I've set an invalid property value. 1:00
    DevTools also provide a simple way to set dynamic 1:08
    pseudo-class selectors on elements like hover, active, and focus. 1:11
    To test the hover styles applied to a button, for 1:17
    example, right-click on the button element in the Elements panel, 1:19
    then select the hover pseudo-class from the menu to enable it. 1:24
    Now another way to toggle element states is by clicking the hov button 1:29
    in the styles pane. 1:33
    This opens a menu that lets you enable and disable element states for 1:35
    the selected element by checking and unchecking the boxes. 1:38
    Now the .cls or 1:42
    element classes button to the right of the toggle element state button, 1:46
    enables another useful feature of Chrome DevTools. 1:50
    Adding, enabling, and disabling CSS classes. 1:54
    When you select an element this panel displays all the CSS classes 1:57
    associated with the selected element. 2:01
    For example, 2:03
    selecting a guest list item shows that the list item has the class guest. 2:04
    Now if I click the confirm check box in the browser for 2:10
    the first guest, it adds the class responded to the list of classes. 2:13
    Now this class is being injected into the class attribute with JavaScript 2:18
    to change the border color. 2:22
    From here you can disable or enable classes by clicking the check boxes. 2:24
    You can even add new classes to the element using the Add new class text 2:30
    field. 2:35
    I like to use this feature when debugging layout problems. 2:41
    For example, add a debug class in my CSS, 2:45
    that applies a two pixel solid red border to an element. 2:49
    Then I can use the class's feature to a apply a temporary red border around 2:57
    a troublesome elements, to help make the document flow easy to understand. 3:01
    For example, select the main element and type the class debug into the field. 3:06
    The class debug is added to the main element's class attributes and 3:13
    we see the red border applied. 3:17
    And I can apply this class to any element to help me isolate the layout problem. 3:19
    So far, we've been testing and editing CSS directly in the styles pane. 3:34
    And like the elements panel, the styles pane does not modify your source CSS. 3:40
    If you've made lots of important changes in the styles pane, 3:46
    DevTools provides an easy way to let you copy your changes into your source CSS. 3:48
    So after you've made your changes, for example the form element, 3:55
    click the text to the right displaying the file name and line number. 3:59
    And this opens the sources panel displaying the updated form rule, and 4:04
    all your latest changes in style.css. 4:08
    So here I can continue editing the CSS here and 4:10
    simply copy my changes over to my CSS file. 4:13
    Now DevTools does provide a feature that lets you save your source CSS 4:17
    from this sources panel. 4:21
    I've posted a link with instructions on how to set that up in the teacher's 4:23
    notes for this video. 4:26

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up