Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,430 --> 00:00:03,060
So every modern browser
2
00:00:03,060 --> 00:00:05,270
contains a set of tools,
3
00:00:05,270 --> 00:00:09,260
which makes our lives as developers a lot easier.
4
00:00:09,260 --> 00:00:11,790
And we call these tools collectively
5
00:00:11,790 --> 00:00:15,520
developer tools or for short dev tools.
6
00:00:15,520 --> 00:00:16,950
And so in this lecture,
7
00:00:16,950 --> 00:00:18,700
let's learn how to use
8
00:00:18,700 --> 00:00:20,683
the Google Chrome Dev Tools.
9
00:00:22,110 --> 00:00:23,790
And let's give ourselves
10
00:00:23,790 --> 00:00:26,050
some more space here to start.
11
00:00:26,050 --> 00:00:27,930
And now there are three ways
12
00:00:27,930 --> 00:00:30,500
to open up the developer tools.
13
00:00:30,500 --> 00:00:32,020
So first, you can right click
14
00:00:32,020 --> 00:00:33,520
anywhere on the page
15
00:00:33,520 --> 00:00:37,223
and then click inspect or inspect element.
16
00:00:38,440 --> 00:00:40,400
So these are the dev tools,
17
00:00:40,400 --> 00:00:43,040
but let me first show you two other ways.
18
00:00:43,040 --> 00:00:45,720
The second way is to come here
19
00:00:45,720 --> 00:00:49,210
to the view menu, then developer,
20
00:00:49,210 --> 00:00:51,093
and then here developer tools.
21
00:00:52,831 --> 00:00:54,410
All right.
22
00:00:54,410 --> 00:00:57,010
Or the third way is a shortcut
23
00:00:57,010 --> 00:01:00,340
on the keyboard and that is option command
24
00:01:00,340 --> 00:01:03,003
or option control on Windows I.
25
00:01:04,560 --> 00:01:05,790
All right.
26
00:01:05,790 --> 00:01:07,440
And then we will want to come here
27
00:01:07,440 --> 00:01:11,003
to the very first tab, which says, elements.
28
00:01:12,180 --> 00:01:15,300
Just make this a bit bigger
29
00:01:15,300 --> 00:01:16,783
so you can actually see it.
30
00:01:18,500 --> 00:01:19,890
All right.
31
00:01:19,890 --> 00:01:22,340
So the first thing that we can see here
32
00:01:22,340 --> 00:01:25,209
in the elements tab is the exact HTML
33
00:01:25,209 --> 00:01:29,040
that we wrote in our HTML documents.
34
00:01:29,040 --> 00:01:30,190
Right?
35
00:01:30,190 --> 00:01:32,320
So here we can open up each element
36
00:01:32,320 --> 00:01:33,830
by clicking on them.
37
00:01:33,830 --> 00:01:37,420
And then as we hover them,
38
00:01:37,420 --> 00:01:39,430
they actually get highlighted here
39
00:01:39,430 --> 00:01:42,630
on the page or it can be very helpful.
40
00:01:42,630 --> 00:01:43,730
So you'll see, for example,
41
00:01:43,730 --> 00:01:46,330
that our header is this entire box
42
00:01:46,330 --> 00:01:48,950
that we see highlighted here in blue.
43
00:01:48,950 --> 00:01:50,260
Right?
44
00:01:50,260 --> 00:01:53,670
So that's this then the navigation is all this.
45
00:01:53,670 --> 00:01:55,140
And if we open it,
46
00:01:55,140 --> 00:01:57,450
then each of these links
47
00:01:57,450 --> 00:02:00,560
is just this very small box here
48
00:02:00,560 --> 00:02:02,960
and there sitting here side by side,
49
00:02:02,960 --> 00:02:04,630
as we can see.
50
00:02:04,630 --> 00:02:05,463
Right?
51
00:02:07,820 --> 00:02:09,320
So that is the first thing
52
00:02:09,320 --> 00:02:11,080
that we can explore here.
53
00:02:11,080 --> 00:02:12,680
And then the second thing,
54
00:02:12,680 --> 00:02:14,520
and even more important,
55
00:02:14,520 --> 00:02:17,743
is the style tab here on the left side.
56
00:02:18,630 --> 00:02:21,200
So here we can see all the styles
57
00:02:21,200 --> 00:02:23,573
that have been applied to a certain element.
58
00:02:24,700 --> 00:02:28,340
So let's go to the H1 for example, here,
59
00:02:28,340 --> 00:02:30,820
and then we can click it.
60
00:02:30,820 --> 00:02:32,650
And then here on the left side,
61
00:02:32,650 --> 00:02:34,570
all the styles that are currently
62
00:02:34,570 --> 00:02:38,020
applied to this element in our CSS file
63
00:02:38,020 --> 00:02:39,113
are displayed here.
64
00:02:40,260 --> 00:02:43,440
So we have this rule somewhere in our code,
65
00:02:43,440 --> 00:02:45,510
which sets the font of 26
66
00:02:45,510 --> 00:02:47,370
and does all of this.
67
00:02:47,370 --> 00:02:48,203
Right.
68
00:02:48,203 --> 00:02:50,090
Then we also have this rule somewhere,
69
00:02:50,090 --> 00:02:51,453
which sets the color.
70
00:02:52,400 --> 00:02:56,730
And in fact it is this one here.
71
00:02:56,730 --> 00:02:58,060
Right?
72
00:02:58,060 --> 00:03:00,423
So this first one is this.
73
00:03:01,470 --> 00:03:03,680
Then here we get this one.
74
00:03:03,680 --> 00:03:07,283
And finally, there's also this one here.
75
00:03:08,350 --> 00:03:09,183
Right?
76
00:03:09,183 --> 00:03:11,483
And so that is exactly this one.
77
00:03:13,270 --> 00:03:14,103
Okay.
78
00:03:14,950 --> 00:03:17,110
Now maybe you had wondered before
79
00:03:17,110 --> 00:03:20,180
why the text here is actually bold
80
00:03:20,180 --> 00:03:21,960
in this H1 element,
81
00:03:21,960 --> 00:03:23,500
and the reason for that
82
00:03:23,500 --> 00:03:26,540
is basically the default style.
83
00:03:26,540 --> 00:03:30,010
So those default styles for the H1
84
00:03:30,010 --> 00:03:32,710
are what are displayed here in this rule
85
00:03:32,710 --> 00:03:35,530
of the user agent style sheet.
86
00:03:35,530 --> 00:03:37,680
So that's just a fancy word
87
00:03:37,680 --> 00:03:40,660
for basically the default style.
88
00:03:40,660 --> 00:03:41,740
And down here,
89
00:03:41,740 --> 00:03:43,720
we can see that the font weight
90
00:03:43,720 --> 00:03:46,003
is set to bold by default.
91
00:03:47,281 --> 00:03:48,880
Okay.
92
00:03:48,880 --> 00:03:50,390
Then this one here is something
93
00:03:50,390 --> 00:03:53,300
that we will learn about very soon.
94
00:03:53,300 --> 00:03:56,282
So don't worry about it for now.
95
00:03:56,282 --> 00:03:57,470
And then here, let's see,
96
00:03:57,470 --> 00:03:59,133
for example, these links.
97
00:04:01,120 --> 00:04:03,730
And so here is the code for them.
98
00:04:03,730 --> 00:04:07,270
So the CSS that we had applied to them already,
99
00:04:07,270 --> 00:04:10,530
so the color and the text decoration.
100
00:04:10,530 --> 00:04:11,430
Right?
101
00:04:11,430 --> 00:04:13,420
But now what if we actually wanted
102
00:04:13,420 --> 00:04:15,930
to add some more styles here.
103
00:04:15,930 --> 00:04:18,120
So we could actually do that.
104
00:04:18,120 --> 00:04:20,610
So just for testing purposes of course,
105
00:04:20,610 --> 00:04:23,883
we could now add a font size, let's say,
106
00:04:25,890 --> 00:04:28,480
of 30 pixels,
107
00:04:28,480 --> 00:04:31,520
and then immediately all the links on the page.
108
00:04:31,520 --> 00:04:33,130
So not just this one,
109
00:04:33,130 --> 00:04:36,370
but also this one and the other ones,
110
00:04:36,370 --> 00:04:38,660
all of them will now have the font size,
111
00:04:38,660 --> 00:04:40,390
all 30 pixels.
112
00:04:40,390 --> 00:04:44,260
And to test that, we can then turn it on and off.
113
00:04:44,260 --> 00:04:45,842
And of course we can also
114
00:04:45,842 --> 00:04:48,650
turn the other styles on and off
115
00:04:48,650 --> 00:04:49,893
simply by clicking here.
116
00:04:51,630 --> 00:04:53,040
All right.
117
00:04:53,040 --> 00:04:56,100
And of course these values that we specify here,
118
00:04:56,100 --> 00:04:58,950
they will not affect the final website.
119
00:04:58,950 --> 00:05:01,240
So our code does not get changed
120
00:05:01,240 --> 00:05:02,710
if we do this
121
00:05:02,710 --> 00:05:05,020
and we can prove that by very easily
122
00:05:05,020 --> 00:05:06,380
reload the page
123
00:05:06,380 --> 00:05:09,410
and then everything is back to normal.
124
00:05:09,410 --> 00:05:10,243
All right.
125
00:05:12,380 --> 00:05:13,890
But that's actually exploring
126
00:05:13,890 --> 00:05:15,540
links a little bit more,
127
00:05:15,540 --> 00:05:18,410
because there's something cool that we can do.
128
00:05:18,410 --> 00:05:20,783
So right now, there is only
129
00:05:20,783 --> 00:05:23,000
this CSS rule here applied.
130
00:05:23,000 --> 00:05:26,720
So only the one that has the link pseudo class.
131
00:05:26,720 --> 00:05:28,230
And that's because of right now,
132
00:05:28,230 --> 00:05:32,020
the link is not being hovered or it's not active.
133
00:05:32,020 --> 00:05:33,390
And so therefore,
134
00:05:33,390 --> 00:05:35,393
the style for that does not apply.
135
00:05:36,340 --> 00:05:38,330
However, by clicking here,
136
00:05:38,330 --> 00:05:41,690
we can basically fake one of these states.
137
00:05:41,690 --> 00:05:43,080
So we can, for example,
138
00:05:43,080 --> 00:05:46,970
fake that the link is currently being hovered.
139
00:05:46,970 --> 00:05:49,510
So if we click here on hover,
140
00:05:49,510 --> 00:05:51,580
then you see that now this rule here
141
00:05:51,580 --> 00:05:54,650
is applying, because now A
142
00:05:54,650 --> 00:05:57,453
with the pseudo class hover does actually exist.
143
00:05:58,460 --> 00:06:00,100
So let's see that on the page.
144
00:06:00,100 --> 00:06:03,300
And the one that should have the state
145
00:06:03,300 --> 00:06:06,370
is the one that I actually have selected here.
146
00:06:06,370 --> 00:06:08,230
So this is the one that I selected,
147
00:06:08,230 --> 00:06:09,480
and so this is the one
148
00:06:09,480 --> 00:06:12,210
that now looks as if it is being hovered,
149
00:06:12,210 --> 00:06:14,070
even though it is not.
150
00:06:14,070 --> 00:06:15,240
And so this is great.
151
00:06:15,240 --> 00:06:17,300
So we can test our webpage
152
00:06:17,300 --> 00:06:20,030
without actually having to manually go there
153
00:06:20,030 --> 00:06:21,593
and hover over the links.
154
00:06:23,270 --> 00:06:24,103
Okay.
155
00:06:24,103 --> 00:06:27,890
Of course we can do the same for this one here.
156
00:06:27,890 --> 00:06:31,150
And we could go ahead and search that here
157
00:06:31,150 --> 00:06:32,850
in the HTML tree,
158
00:06:32,850 --> 00:06:35,210
but I find it easier to simply right click
159
00:06:35,210 --> 00:06:39,250
on the element that I want and then inspect.
160
00:06:39,250 --> 00:06:42,170
And so that then automatically moves there.
161
00:06:42,170 --> 00:06:44,330
So if I click on hover now,
162
00:06:44,330 --> 00:06:46,900
then it automatically becomes hover,
163
00:06:46,900 --> 00:06:48,740
even though it's not really.
164
00:06:48,740 --> 00:06:51,603
And the same of course, for active.
165
00:06:53,230 --> 00:06:54,063
Right?
166
00:06:54,063 --> 00:06:55,320
So it's active,
167
00:06:55,320 --> 00:06:57,480
but we also want it to look
168
00:06:57,480 --> 00:06:59,460
like it's hovered at the same time,
169
00:06:59,460 --> 00:07:01,180
because usually when it's active,
170
00:07:01,180 --> 00:07:02,800
it is also hovered.
171
00:07:02,800 --> 00:07:03,633
But anyway,
172
00:07:03,633 --> 00:07:05,150
what matters is that now we have
173
00:07:05,150 --> 00:07:08,730
all these rules here applying in this moment.
174
00:07:08,730 --> 00:07:10,210
All right.
175
00:07:10,210 --> 00:07:13,283
But now let's turn it off again.
176
00:07:14,410 --> 00:07:16,020
And yeah,
177
00:07:16,020 --> 00:07:18,490
I think that's actually all I had to show you
178
00:07:18,490 --> 00:07:19,750
at this point.
179
00:07:19,750 --> 00:07:21,400
So we're going to use the dev tools
180
00:07:21,400 --> 00:07:23,740
all the time throughout the rest of the course,
181
00:07:23,740 --> 00:07:26,100
because these are absolutely essential
182
00:07:26,100 --> 00:07:29,560
to create a website in an efficient way.
183
00:07:29,560 --> 00:07:31,700
So I was actually really excited
184
00:07:31,700 --> 00:07:33,210
when I found out myself
185
00:07:33,210 --> 00:07:34,970
about these tools
186
00:07:34,970 --> 00:07:36,970
and I hope you liked them as well.
187
00:07:36,970 --> 00:07:39,460
And that you, maybe go ahead and experiment
188
00:07:39,460 --> 00:07:42,110
around a little bit with this now.
189
00:07:42,110 --> 00:07:44,730
So you can just click on any element
190
00:07:44,730 --> 00:07:46,870
that you'd like and experiment
191
00:07:46,870 --> 00:07:48,870
maybe a little bit with turning
192
00:07:48,870 --> 00:07:50,570
these styles on and off,
193
00:07:50,570 --> 00:07:52,640
maybe adding some other ones.
194
00:07:52,640 --> 00:07:54,240
And it's really analyzing a bit
195
00:07:54,240 --> 00:07:55,460
what happens here
196
00:07:55,460 --> 00:07:58,330
with all these different rules being applied.
197
00:07:58,330 --> 00:07:59,910
So have some fun with that.
198
00:07:59,910 --> 00:08:02,203
And I see you soon in the next video.
12848
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.