1 00:00:00,280 --> 00:00:03,330 Those are all of the panels in the Chrome DevTools. 2 00:00:03,330 --> 00:00:06,340 Let's now take a look at some settings to wrap things up. 3 00:00:08,500 --> 00:00:11,120 If I go down here to the bottom right and 4 00:00:11,120 --> 00:00:14,030 click on this little gear here, we'll pull up the settings. 5 00:00:14,030 --> 00:00:16,320 And we did this earlier, but we didn't really 6 00:00:16,320 --> 00:00:18,358 take a very detailed look at what's in here. 7 00:00:18,358 --> 00:00:24,360 So I'm gonna go ahead and increase the size of my DevTools a little bit here. 8 00:00:24,360 --> 00:00:25,660 So we can see what's going on. 9 00:00:27,420 --> 00:00:33,990 Here, we can disable the cache, while the DevTools are open, and that's really handy 10 00:00:33,990 --> 00:00:39,340 if you wanna go ahead, and exactly as the name implies, disable the cache. 11 00:00:39,340 --> 00:00:42,360 So you don't want any cached assets loading in. 12 00:00:42,360 --> 00:00:44,780 And you just want a fresh webpage every time. 13 00:00:44,780 --> 00:00:46,500 You can also disable JavaScript. 14 00:00:46,500 --> 00:00:48,565 So if you wanna see what your web page might 15 00:00:48,565 --> 00:00:51,430 look like if JavaScript were disabled, you can do that. 16 00:00:53,800 --> 00:00:57,570 We're not gonna go over every single setting here, but you'll see that there 17 00:00:57,570 --> 00:01:00,950 is a couple of other things, the color format you can go ahead and change. 18 00:01:00,950 --> 00:01:06,140 So, in your Elements panel, it will go ahead and show them as 19 00:01:06,140 --> 00:01:09,550 authored, which means just the way that you wrote them in your CSS. 20 00:01:09,550 --> 00:01:13,520 But you can also change all of the colors over to a specific format if you'd like. 21 00:01:16,420 --> 00:01:20,040 If we scroll down some more, there's a couple of settings in Rendering. 22 00:01:20,040 --> 00:01:22,050 I showed you earlier that we can enforce 23 00:01:22,050 --> 00:01:28,130 accelerated compositing and cause the browser to continuously repaint. 24 00:01:28,130 --> 00:01:32,760 We can also turn on and off the FPS meter. That's pretty cool. 25 00:01:35,110 --> 00:01:39,340 There's several settings for our sources here. 26 00:01:39,340 --> 00:01:42,560 We can search in different types of scripts. 27 00:01:42,560 --> 00:01:47,610 We can enable and disable JavaScript and CSS source maps. 28 00:01:48,680 --> 00:01:52,860 And we can even detect indentation and show white space character. 29 00:01:52,860 --> 00:01:53,630 So, that's pretty nice. 30 00:01:55,530 --> 00:01:59,600 In the Profiler we can show Advanced Heap Snapshot Properties. 31 00:01:59,600 --> 00:02:00,260 Like I said earlier, 32 00:02:00,260 --> 00:02:03,290 we didn't really get into that, but it's there if you need it. 33 00:02:04,900 --> 00:02:07,680 In the Timeline view, we can limit 34 00:02:07,680 --> 00:02:11,000 the number of captured JavaScript stack frames. 35 00:02:11,000 --> 00:02:13,440 And that just means how often we're actually 36 00:02:13,440 --> 00:02:17,660 capturing the JavaScript when we're doing some profiling there. 37 00:02:17,660 --> 00:02:20,170 So, that's good, if you need it, and then 38 00:02:20,170 --> 00:02:23,330 we can also show CPU activity if we need to. 39 00:02:23,330 --> 00:02:25,100 In the console, we can also log 40 00:02:25,100 --> 00:02:30,200 XML Http Requests. So, in other words, we can go ahead and 41 00:02:30,200 --> 00:02:36,390 log ajax requests that we're making. So that's pretty handy. 42 00:02:36,390 --> 00:02:39,216 And then we can also enable, Command 1 43 00:02:39,216 --> 00:02:42,810 through 9, to switch between the various panels. 44 00:02:42,810 --> 00:02:45,950 That looks like it's under Console, but it's actually a separate setting. 45 00:02:47,670 --> 00:02:50,730 There's a number of really cool overrides in here. 46 00:02:50,730 --> 00:02:55,090 So if you want to override the user agent, and wanna have the 47 00:02:55,090 --> 00:02:59,920 user agent of some other browser, you can go ahead and spoof it there. 48 00:03:01,330 --> 00:03:01,980 That's pretty cool. 49 00:03:02,980 --> 00:03:07,180 You can set device metrics, so when you set 50 00:03:07,180 --> 00:03:09,720 device metrics you can go ahead and set the 51 00:03:09,720 --> 00:03:13,450 screen resolution, you can set the font scale factor, 52 00:03:13,450 --> 00:03:16,060 and you can also fit it into the window. 53 00:03:16,060 --> 00:03:21,160 So that's handy. You can enable the DevTools on startup. 54 00:03:21,160 --> 00:03:23,620 So immediately when you startup your browser, if you 55 00:03:23,620 --> 00:03:25,920 always want to show the DevTools, you can do that. 56 00:03:27,020 --> 00:03:33,650 You can also override geolocation and give a lat and longitude here, 57 00:03:33,650 --> 00:03:36,730 if you want to simulate a specific location and 58 00:03:36,730 --> 00:03:41,470 you're using the geolocation API. You can override device orientation. 59 00:03:41,470 --> 00:03:42,510 That's pretty cool. 60 00:03:42,510 --> 00:03:46,660 You can emulate touch events so, if you're not on a touch device like I am. 61 00:03:46,660 --> 00:03:51,470 You can go ahead and fake those, and you can even emulate CSS media. 62 00:03:51,470 --> 00:03:56,370 So for example, if you wanted to say that this device is a printer and you wanted 63 00:03:56,370 --> 00:04:00,900 to see what all of your print style sheets look like, you can go ahead and do that. 64 00:04:03,800 --> 00:04:09,110 Last, we have the shortcuts here. So if you want to go 65 00:04:09,110 --> 00:04:14,220 ahead and look at all the shortcuts for the DevTools, they're all right there. 66 00:04:14,220 --> 00:04:16,150 In fact, it looks like there's even more, you 67 00:04:16,150 --> 00:04:20,580 can see the full list of keyboard shortcuts and gestures. 68 00:04:20,580 --> 00:04:22,202 That's it for the Chrome DevTools. 69 00:04:22,202 --> 00:04:25,760 Remember, anytime that your having a styling issue, or an 70 00:04:25,760 --> 00:04:29,100 issue with some of your Javascript, or you wanna improve 71 00:04:29,100 --> 00:04:31,270 the performance of your webpage, the 72 00:04:31,270 --> 00:04:33,580 Chrome DevTools can definitely help you out.