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