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!
You have completed Debugging CSS with Chrome DevTools!
Preview
The "Elements" panel displays the DOM (document object model) structure of a web page, including any real-time updates or changes being made to the DOM.
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 workshop we're going to work with
the Elements panel of Chrome Dev Tools.
0:00
To follow along,
launch the workspace with this video or
0:04
download the project files and
use your preferred text editor.
0:06
The Elements panel displays the DOM, or
0:10
Document Object Model
structure of the webpage.
0:12
In other words,
the HTML code that makes up the page.
0:14
The panel provides a real time
representation of your HTML,
0:18
including any updates or
changes being made to the DOM.
0:22
For example, this RSVP app uses JavaScript
to add guests to the invitee list.
0:26
Each guest you submit
appears in the list below.
0:31
Now if I right click on the page and
select View Page Source, we see
0:37
the HTML and the original .html file,
but the list of invited guests is empty.
0:42
So what we're seeing in the source is
different from what's rendered in the DOM
0:48
or what we're seeing in the browser.
0:52
Now in the elements panel, you can view
all the content that JavaScript puts
0:54
into the DOM as well as any content
that's added or removed in real time.
0:59
So for example, adding or
removing a guest.
1:04
In the Elements panel you can
even edit the content and
1:11
structure of your page
in the rendered DOM.
1:13
Clicking the select icon in
the top left corner of the panel,
1:16
let's use select and
inspect any element in the page.
1:20
So for example, I'll use the select tool
to highlight and select a guest name.
1:24
Now down in the elements panel,
I see that it's a span element and
1:29
double clicking inside the span
lets you edit the content.
1:33
Now I can, for example,
1:43
change the name to a longer name to
test how it might affect the layout.
1:44
You could also use this
tool to select headings and
1:50
test how much text they can display
before breaking to a new line.
1:53
You can also hide an element
by right-clicking it or
2:09
clicking the three dots to the left of
the element and selecting hide element.
2:12
Or you can delete an element
by right clicking on it and
2:20
selecting delete element.
2:25
Now don't be afraid to experiment like
this, the changes you make here don't
2:28
actually change any of your HTML or
JavaScript file.
2:32
As you can see, reloading the page
erases and undos all the changes.
2:35
So let's say that you want to test what
a guest name looks like inside an H3 tag,
2:42
instead of a span tag.
2:47
Select the element, and
simply double click the opening span tag,
2:49
change it to h3, then press Enter or
click away from it, and
2:55
you see the change is
applied live in the browser.
2:58
To edit a group of HTML
elements all at once, for
3:03
example, a list item and its children,
select the element then right or
3:06
Control click and select edit as HTML.
3:11
And this makes the selected code editable.
3:14
Now you can do things
like remove the label and
3:17
edit the button text all at once.
3:21
Then click away from the edit box and
3:31
the changes are immediately
applied in the browser.
3:33
You can also use the Elements panel to
identify a particular type of element or
3:37
an element with a specific class or id.
3:42
This is a great way to quickly
find an element in your HTML and
3:45
inspect the styles being applied to it.
3:48
Press Command or CTRL+F to bring up the
search field at the bottom of the panel.
3:50
Then type the element class or
ID selector you want to inspect.
3:56
So for example, to quickly view
elements with the class guest,
4:00
type .guest into the field and
they are highlighted in yellow.
4:04
And you can click the up and
4:09
down arrows to individually inspect
each element with that class.
4:10
All right, so
4:14
now that you have a better understanding
of how the elements panel works,
4:16
you're ready to use one of the most useful
features of Chrome DevTools, inspecting
4:21
the styles applied to an element as
well as adding and editing styles.
4:25
I'll teach you about those
in the next few videos.
4:29
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