- Introduction to Chrome DevTools 2:11
- Getting to Know the Elements Panel 4:32
- Inspecting Styles 5:26
- Viewing Inherited and User Agent Styles 3:58
- Adding and Editing Styles 2:31
- Identify and Debug Errors 4:28
- Visualizing the Box Model and Computed styles 3:59
- Debugging Styles Challenge 2:05
- Debugging Styles Solution 5:55
Preview
Video Player
00:00
00:00
Identify and Debug Errors
4:28Learn how to identify errors in your CSS, visualize and test element state, and copy or save changes to your CSS from DevTools.
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