1
00:00:00,480 --> 00:00:04,230
In this workshop we're going to work with
the Elements panel of Chrome Dev Tools.

2
00:00:04,230 --> 00:00:06,780
To follow along,
launch the workspace with this video or

3
00:00:06,780 --> 00:00:10,000
download the project files and
use your preferred text editor.

4
00:00:10,000 --> 00:00:12,370
The Elements panel displays the DOM, or

5
00:00:12,370 --> 00:00:14,930
Document Object Model
structure of the webpage.

6
00:00:14,930 --> 00:00:18,300
In other words,
the HTML code that makes up the page.

7
00:00:18,300 --> 00:00:22,430
The panel provides a real time
representation of your HTML,

8
00:00:22,430 --> 00:00:26,060
including any updates or
changes being made to the DOM.

9
00:00:26,060 --> 00:00:31,820
For example, this RSVP app uses JavaScript
to add guests to the invitee list.

10
00:00:31,820 --> 00:00:34,560
Each guest you submit
appears in the list below.

11
00:00:37,280 --> 00:00:42,110
Now if I right click on the page and
select View Page Source, we see

12
00:00:42,110 --> 00:00:47,590
the HTML and the original .html file,
but the list of invited guests is empty.

13
00:00:48,620 --> 00:00:52,560
So what we're seeing in the source is
different from what's rendered in the DOM

14
00:00:52,560 --> 00:00:54,890
or what we're seeing in the browser.

15
00:00:54,890 --> 00:00:59,864
Now in the elements panel, you can view
all the content that JavaScript puts

16
00:00:59,864 --> 00:01:04,620
into the DOM as well as any content
that's added or removed in real time.

17
00:01:04,620 --> 00:01:07,965
So for example, adding or
removing a guest.

18
00:01:11,446 --> 00:01:13,910
In the Elements panel you can
even edit the content and

19
00:01:13,910 --> 00:01:16,490
structure of your page
in the rendered DOM.

20
00:01:16,490 --> 00:01:20,450
Clicking the select icon in
the top left corner of the panel,

21
00:01:20,450 --> 00:01:24,230
let's use select and
inspect any element in the page.

22
00:01:24,230 --> 00:01:29,270
So for example, I'll use the select tool
to highlight and select a guest name.

23
00:01:29,270 --> 00:01:33,285
Now down in the elements panel,
I see that it's a span element and

24
00:01:33,285 --> 00:01:37,083
double clicking inside the span
lets you edit the content.

25
00:01:43,327 --> 00:01:44,676
Now I can, for example,

26
00:01:44,676 --> 00:01:48,480
change the name to a longer name to
test how it might affect the layout.

27
00:01:50,570 --> 00:01:53,859
You could also use this
tool to select headings and

28
00:01:53,859 --> 00:01:58,183
test how much text they can display
before breaking to a new line.

29
00:02:09,126 --> 00:02:12,822
You can also hide an element
by right-clicking it or

30
00:02:12,822 --> 00:02:18,370
clicking the three dots to the left of
the element and selecting hide element.

31
00:02:20,190 --> 00:02:25,090
Or you can delete an element
by right clicking on it and

32
00:02:25,090 --> 00:02:26,580
selecting delete element.

33
00:02:28,600 --> 00:02:32,050
Now don't be afraid to experiment like
this, the changes you make here don't

34
00:02:32,050 --> 00:02:35,390
actually change any of your HTML or
JavaScript file.

35
00:02:35,390 --> 00:02:39,243
As you can see, reloading the page
erases and undos all the changes.

36
00:02:42,197 --> 00:02:47,155
So let's say that you want to test what
a guest name looks like inside an H3 tag,

37
00:02:47,155 --> 00:02:48,570
instead of a span tag.

38
00:02:49,570 --> 00:02:54,400
Select the element, and
simply double click the opening span tag,

39
00:02:55,530 --> 00:02:58,940
change it to h3, then press Enter or
click away from it, and

40
00:02:58,940 --> 00:03:01,230
you see the change is
applied live in the browser.

41
00:03:03,130 --> 00:03:06,730
To edit a group of HTML
elements all at once, for

42
00:03:06,730 --> 00:03:11,765
example, a list item and its children,
select the element then right or

43
00:03:11,765 --> 00:03:14,670
Control click and select edit as HTML.

44
00:03:14,670 --> 00:03:17,740
And this makes the selected code editable.

45
00:03:17,740 --> 00:03:21,480
Now you can do things
like remove the label and

46
00:03:21,480 --> 00:03:24,243
edit the button text all at once.

47
00:03:31,249 --> 00:03:33,002
Then click away from the edit box and

48
00:03:33,002 --> 00:03:35,640
the changes are immediately
applied in the browser.

49
00:03:37,260 --> 00:03:42,240
You can also use the Elements panel to
identify a particular type of element or

50
00:03:42,240 --> 00:03:45,160
an element with a specific class or id.

51
00:03:45,160 --> 00:03:48,230
This is a great way to quickly
find an element in your HTML and

52
00:03:48,230 --> 00:03:50,450
inspect the styles being applied to it.

53
00:03:50,450 --> 00:03:56,380
Press Command or CTRL+F to bring up the
search field at the bottom of the panel.

54
00:03:56,380 --> 00:04:00,370
Then type the element class or
ID selector you want to inspect.

55
00:04:00,370 --> 00:04:04,160
So for example, to quickly view
elements with the class guest,

56
00:04:04,160 --> 00:04:08,660
type .guest into the field and
they are highlighted in yellow.

57
00:04:09,790 --> 00:04:10,840
And you can click the up and

58
00:04:10,840 --> 00:04:14,932
down arrows to individually inspect
each element with that class.

59
00:04:14,932 --> 00:04:16,910
All right, so

60
00:04:16,910 --> 00:04:21,230
now that you have a better understanding
of how the elements panel works,

61
00:04:21,230 --> 00:04:25,110
you're ready to use one of the most useful
features of Chrome DevTools, inspecting

62
00:04:25,110 --> 00:04:29,460
the styles applied to an element as
well as adding and editing styles.

63
00:04:29,460 --> 00:04:31,400
I'll teach you about those
in the next few videos.