- 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
Visualizing the Box Model and Computed styles
3:59The "Computed" pane displays the final set of CSS properties the browser is applying to the selected element. It also displays a representation of an element's box model, so you can quickly examine and edit its content, padding, border and margin areas.
Next to the Styles pane,
0:00
the Computed pane displays exactly how
the browser is computing your styles.
0:02
In other words, it lets you see the final
set of CSS properties the browser is
0:06
applying to the selected element.
0:10
As you learned earlier, CSS properties
can be applied to an element from
0:12
different rule sets, even rules defined
in the browser's default style sheet.
0:15
Now some properties, as you know,
0:20
get inherited from ancestor elements
while others get overridden.
0:21
So the Computed pane gathers all
the properties the browser's actually
0:26
using to style the element into
an alphabetical list of properties.
0:30
And it comes in handy when you
notice that an element has many
0:34
overridden styles, right?
0:38
So instead of searching through
the Styles pane to determine
0:39
which properties are being applied,
you click over to the Computed pane and
0:42
it will show you exactly
what the browser sees.
0:46
So for example, selecting the header shows
a list of all the background properties
0:49
the browser is applying to the header.
0:53
Clicking the arrow to the right
of a property takes you
0:56
back to its original
source in the Styles tab.
0:59
Now before applying a length value,
like a rem or
1:03
percentage to an element,
the browser computes it to a pixel value.
1:07
So in the Computed pane,
1:12
you're able to see computed pixel
values applied to elements.
1:13
For instance, the header's padding
values are set using units,
1:17
but we can see here that the computed
values are 16 pixels for
1:22
the bottom left and right sides and
40 pixels for the top.
1:26
One of the most important areas of the
Computed pane is the box panel diagram at
1:33
the top.
1:37
Each element takes up a certain
amount of space on a page and
1:38
the CSS box model is what determines
the amount of space each element takes up.
1:41
So the diagram here shows you
a representation of an element's box model
1:46
and how much space it's occupying.
1:50
It lets you quickly examine and
edit the content, padding, border, and
1:52
margin areas of an element.
1:56
So here, we see that the header's
content area is 868 by 224 pixels.
1:58
The browser also highlights
the selected box model area in blue and
2:04
the padding area is 40 pixels for
the top and 16 pixels for
2:08
the bottom left and right sides.
2:12
This area is highlighted in green.
2:13
All values in the box model diagram
are editable, just click on them.
2:16
For instance, I'll select the input
element then click inside
2:20
the height value in the content area.
2:25
I'll press the up arrow key to increase
the height of the content area and
2:27
the down key to decrease it.
2:32
So being able to see exactly how
much space an element is taking up
2:37
on the page is going to help
you debug layout issues faster.
2:41
For example,
somewhere in my CSS I could have
2:46
a troublesome rule like li last-child,
margin 0.
2:51
And when I go back and add guests to
the list, I notice that the guest
2:57
item on the far right doesn't
quite align with the other items.
3:03
Well I can select the item and
examine its box bottom parameters.
3:08
And this shows me that the item does not
have a margin area even though it should,
3:12
and I see all the margin values in
the list of computed styles set to zero.
3:17
Clicking over to the Styles pane shows
me that the li last-child rule is
3:26
in fact overriding the margin value
set for guest in this media query.
3:31
And turning this margin 0
property off fixes the problem.
3:36
Now I can simply go to my CSS, on line 13,
delete the rule, and that resolves it.
3:44