Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Debugging CSS with Chrome DevTools!
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Learn how to identify errors in your CSS, visualize and test element state, and copy or save changes to your CSS from DevTools.
Resources
- Add a pseudostate to a class | Chrome Developers
- Edit Files With Workspaces | Chrome Developers. Save changes that you make within DevTools to source code that's stored on your computer.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up