1
00:00:00,016 --> 00:00:04,526
[MUSIC]

2
00:00:04,526 --> 00:00:07,409
In this course we're gonna take a look at
the Chrome DevTools.

3
00:00:07,409 --> 00:00:10,849
The Chrome DevTools exist inside the
Google Chrome

4
00:00:10,849 --> 00:00:13,489
web browser, and they allow you to take

5
00:00:13,489 --> 00:00:16,369
a deeper look at your code, debug errors,

6
00:00:16,369 --> 00:00:20,340
and generally profile the performance of
your page.

7
00:00:20,340 --> 00:00:20,920
Let's check it out.

8
00:00:22,190 --> 00:00:26,400
Now I've pulled up the website
smellslikebakin.com

9
00:00:26,400 --> 00:00:29,820
here, and Smells Like Bakin' is an example

10
00:00:29,820 --> 00:00:33,920
website we use here at Treehouse in a
couple of different projects.

11
00:00:33,920 --> 00:00:38,770
And it's a project we're going to be using
today to take a look at the DevTools.

12
00:00:38,770 --> 00:00:42,830
Now there's a couple of different ways to
bring up the DevTools.

13
00:00:42,830 --> 00:00:46,620
And one of the ways is to go ahead and
right-click on an

14
00:00:46,620 --> 00:00:53,140
element and then click Inspect Element in
the context menu that pops up.

15
00:00:53,140 --> 00:00:54,940
So down here at the bottom

16
00:00:54,940 --> 00:00:58,470
you'll see this panel has appeared and
there's

17
00:00:58,470 --> 00:01:00,500
a whole bunch of stuff going on here.

18
00:01:00,500 --> 00:01:04,190
We're going to get in, into every little
piece that's in here.

19
00:01:04,190 --> 00:01:06,850
We're gonna go through each one of these
different panels here.

20
00:01:06,850 --> 00:01:08,940
There's all sorts of cool stuff to
explore.

21
00:01:08,940 --> 00:01:12,830
But first, I want to show you how else you
can pull up the DevTools.

22
00:01:12,830 --> 00:01:20,080
You can also go up to this menu here and
go to Tools, and then

23
00:01:20,080 --> 00:01:24,080
go ahead and click on Developer Tools, and

24
00:01:24,080 --> 00:01:25,840
that will bring up the Developer Tools as
well.

25
00:01:25,840 --> 00:01:29,470
We'll click the X here to go ahead and
close that

26
00:01:31,860 --> 00:01:32,210
out.

27
00:01:32,210 --> 00:01:35,850
And the last way to bring them up is with
the shortcut

28
00:01:35,850 --> 00:01:41,640
key, so I'm gonna hit Cmd+Option+I, and
that's if you're on a Mac.

29
00:01:41,640 --> 00:01:46,290
If you're on Windows you'll want to hit
Ctrl+Shift+I.

30
00:01:46,290 --> 00:01:51,440
So slightly different hotkeys there.
Once we have the dev tools up, we can go

31
00:01:51,440 --> 00:01:57,670
ahead and hit Cmd+Plus, or Ctrl+Plus to
increase the size of the texts and

32
00:01:57,670 --> 00:01:59,060
other interface elements.

33
00:01:59,060 --> 00:02:01,460
So I'm gonna make mine just a little bit

34
00:02:01,460 --> 00:02:04,560
larger here, so you can see what's going
on.

35
00:02:04,560 --> 00:02:06,340
I think that's good.

36
00:02:06,340 --> 00:02:09,640
And you can also tear off this menu into a

37
00:02:09,640 --> 00:02:12,250
new window, and there's a couple of
different modes here.

38
00:02:12,250 --> 00:02:17,040
So down here in the bottom left, if we
click and hold a

39
00:02:17,040 --> 00:02:20,670
little menu will come up here and it says
Dock to main window.

40
00:02:21,970 --> 00:02:23,430
So we'll click that.

41
00:02:23,430 --> 00:02:27,750
And that shows up over on the right hand
side.

42
00:02:27,750 --> 00:02:31,080
Now if we click it again, it'll go back
down to the bottom.

43
00:02:31,080 --> 00:02:36,120
We can also click and hold here and bring
this up into a new

44
00:02:36,120 --> 00:02:40,670
window, wo we can go ahead and undock it
from the Chrome web browser.

45
00:02:40,670 --> 00:02:42,590
And that way we can switch back and forth
between

46
00:02:42,590 --> 00:02:47,170
our website and the DevTools fullscreen if
we wanna do that.

47
00:02:47,170 --> 00:02:49,030
But for today, I'm gonna go ahead and

48
00:02:49,030 --> 00:02:51,470
keep them docked down at the bottom.