Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
There are several panels in the DevTools, but the Elements panel is one of the most useful for front-end developers. It provides a conduit to directly interact with the DOM and styling. This makes it easy to test out and debug structural and aesthetic issues in HTML and CSS.
The panel that we're looking at here is
the Elements panel.
0:00
You'll notice that says elements right
here.
0:04
There's a lot of other panels and we're
gonna look at each one.
0:07
There's Resources, Network, Sources,
Timeline, Profiles, Audits, and Console.
0:10
In the Elements panel, on the left side
here, we have the dom tree, or document
0:19
object model tree, which is basically a
fancy way of saying our HTML code.
0:27
So we can go ahead and twirl out all of
our different
0:33
HTML elements here, and we can see what
our document looks like.
0:37
Over on the right side here, we have our
CSS.
0:44
So when we click on any of our elements in
0:49
our dom we can see what the CSS looks
like.
0:51
Now, when I pull up the Dev tools, if I
haven't right clicked and hit
0:56
inspect element, and I've just brought
them up using the Hot key or the Menu.
1:00
I can go ahead and still select elements
using this little magnifying
1:06
glass tool down here at the bottom.
1:10
So if I click on the magnifying glass,
you'll
1:12
see that I can hover over anything on my
1:14
web page, and it will give me a little
1:17
bit of information about it in this little
tool-tip here.
1:19
So you can see how much space the element
is actually taking up.
1:24
And you can also see what kind of margin
and padding that element has.
1:28
And that's the orange area.
1:33
And then, in the tool tip, we can also see
1:36
the total amount of space that the element
is taking up.
1:37
So, this element is 745 pixels by 111
pixels.
1:41
And we can also see what type of element
it is, so this is an H1.
1:47
Down here, we have an A element, with the
class.btn on it.
1:51
And over here we have an image.
Now,
1:58
I'm just hovering right now, with my
magnifying glass selected.
2:02
If I actually click on something, you'll
see down
2:05
here that it will highlight the tool in
the DOM.
2:08
So it's highlighted that H1.
2:13
And we can go ahead and open that up, and
see the contents of it inside.
2:17
Now when we select an element like this.
Like I said before it
2:23
will also show the CSS for that element
over on the right.
2:27
So, we can go ahead and do a couple of
different things here.
2:32
We can uncheck CSS properties.
2:36
And that does exactly what you would
expect.
2:41
It enables and disables various pieces of
CSS.
2:43
We can also actually edit the CSS.
2:51
So I can go ahead and click, and let's say
we wanted this to be a smaller font size.
2:55
I can go ahead and do something like that,
3:02
or I could increase the font size, just
like that.
3:04
And when I click away,
3:07
that will be maintained.
We can also go ahead and edit the HTML.
3:09
So
3:16
I can click here and I'll right click.
I'll say edit text.
3:16
And I'm just gonna change this to say,
this is my cupcake website.
3:21
And then when I click away, you can see
that
3:28
it changes it in real time in the browsing
window.
3:30
Now one thing to keep in mind here is
3:35
that this doesn't actually save to any
kind of file.
3:37
This is just going to edit it in your
browser.
3:42
So nobody else will be able to see this
and if I refresh the page, it will
3:47
go exactly back to how it was previously.
So all of our edits will be removed.
3:53
So if you're actually editing something,
you'll
4:00
want to do that in your Text editor.
4:03
You don't want to do that in
4:06
the Chrome Dev-tools.
However, the Chrome Dev-tools are great if
4:07
you just want to quickly experiment and
try a couple things out or, trace bugs.
4:12
There's a couple more things to go over in
the Elements panel.
4:19
Now you saw that we can edit text, but we
can also actually edit attributes.
4:22
And we can add attributes as well.
So, for example, if I were to right-click
4:27
on this div here, I could edit the HTML.
4:32
Or, I could edit an attribute, or I could
add an attribute.
4:37
And let's say I wanted to add an ID of my
div, and
4:41
that's not going to do anything because
there's no styles associated with it.
4:48
But you get the idea.
You can go ahead and add attributes there.
4:52
We can also rearrange elements.
4:56
So if I were to grab one of these and then
click
4:58
and drag, you can see that it rearranges
it in the DOM
5:04
and it's also rearranging it on my webpage
here.
5:10
So you can see that we've rearranged the
page just by clicking and dragging here.
5:16
And again, if I go ahead and just refresh
the page,
5:21
it's back to normal.
5:24
Now, the Elements panel is real useful for
debugging, as I mentioned earlier.
5:27
If you're trying to figure out where
certain CSS is being applied.
5:33
Or how something is being done, you can go
ahead and inspect an element.
5:38
So for example, you'll notice on this
button we have some rounded corners here.
5:42
And you might wanna know, if that's being
done with an image, or if
5:47
it's being done with the border radius,
CSS property.
5:52
We can do that by clicking on the button.
5:56
We look at the button class, and we find
that in our CSS over here.
5:59
And we say okay.
6:04
It looks like border radius is being
applied here, and if we were to uncheck
6:06
that, we could say yes, indeed, there is
not an image there that's styling that.
6:12
It's actually being styled with border
radius.
6:18
Which, by the way, is probably the way
that you wanna do that.
6:21
That about wraps things up for the
Elements panel, next
6:25
up we're gonna take a look at the
Resources panel.
6:27
You need to sign up for Treehouse in order to download course files.
Sign up