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
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