Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Website Optimization

Well done!

You have completed Website Optimization!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Adjusting Settings

4:34 with Nick Pettit

The DevTools are fairly complex, so as a result there are many different settings. From the Settings window, you can adjust general settings for the DevTools, adjust settings for the browser such as the user agent, change keyboard shortcuts, and more.

Those are all of the panels in the Chrome DevTools. 0:00
Let's now take a look at some settings to wrap things up. 0:03
If I go down here to the bottom right and 0:08
click on this little gear here, we'll pull up the settings. 0:11
And we did this earlier, but we didn't really 0:14
take a very detailed look at what's in here. 0:16
So I'm gonna go ahead and increase the size of my DevTools a little bit here. 0:18
So we can see what's going on. 0:24
Here, we can disable the cache, while the DevTools are open, and that's really handy 0:27
if you wanna go ahead, and exactly as the name implies, disable the cache. 0:33
So you don't want any cached assets loading in. 0:39
And you just want a fresh webpage every time. 0:42
You can also disable JavaScript. 0:44
So if you wanna see what your web page might 0:46
look like if JavaScript were disabled, you can do that. 0:48
We're not gonna go over every single setting here, but you'll see that there 0:53
is a couple of other things, the color format you can go ahead and change. 0:57
So, in your Elements panel, it will go ahead and show them as 1:00
authored, which means just the way that you wrote them in your CSS. 1:06
But you can also change all of the colors over to a specific format if you'd like. 1:09
If we scroll down some more, there's a couple of settings in Rendering. 1:16
I showed you earlier that we can enforce 1:20
accelerated compositing and cause the browser to continuously repaint. 1:22
We can also turn on and off the FPS meter. That's pretty cool. 1:28
There's several settings for our sources here. 1:35
We can search in different types of scripts. 1:39
We can enable and disable JavaScript and CSS source maps. 1:42
And we can even detect indentation and show white space character. 1:48
So, that's pretty nice. 1:52
In the Profiler we can show Advanced Heap Snapshot Properties. 1:55
Like I said earlier, 1:59
we didn't really get into that, but it's there if you need it. 2:00
In the Timeline view, we can limit 2:04
the number of captured JavaScript stack frames. 2:07
And that just means how often we're actually 2:11
capturing the JavaScript when we're doing some profiling there. 2:13
So, that's good, if you need it, and then 2:17
we can also show CPU activity if we need to. 2:20
In the console, we can also log 2:23
XML Http Requests. So, in other words, we can go ahead and 2:25
log ajax requests that we're making. So that's pretty handy. 2:30
And then we can also enable, Command 1 2:36
through 9, to switch between the various panels. 2:39
That looks like it's under Console, but it's actually a separate setting. 2:42
There's a number of really cool overrides in here. 2:47
So if you want to override the user agent, and wanna have the 2:50
user agent of some other browser, you can go ahead and spoof it there. 2:55
That's pretty cool. 3:01
You can set device metrics, so when you set 3:02
device metrics you can go ahead and set the 3:07
screen resolution, you can set the font scale factor, 3:09
and you can also fit it into the window. 3:13
So that's handy. You can enable the DevTools on startup. 3:16
So immediately when you startup your browser, if you 3:21
always want to show the DevTools, you can do that. 3:23
You can also override geolocation and give a lat and longitude here, 3:27
if you want to simulate a specific location and 3:33
you're using the geolocation API. You can override device orientation. 3:36
That's pretty cool. 3:41
You can emulate touch events so, if you're not on a touch device like I am. 3:42
You can go ahead and fake those, and you can even emulate CSS media. 3:46
So for example, if you wanted to say that this device is a printer and you wanted 3:51
to see what all of your print style sheets look like, you can go ahead and do that. 3:56
Last, we have the shortcuts here. So if you want to go 4:03
ahead and look at all the shortcuts for the DevTools, they're all right there. 4:09
In fact, it looks like there's even more, you 4:14
can see the full list of keyboard shortcuts and gestures. 4:16
That's it for the Chrome DevTools. 4:20
Remember, anytime that your having a styling issue, or an 4:22
issue with some of your Javascript, or you wanna improve 4:25
the performance of your webpage, the 4:29
Chrome DevTools can definitely help you out. 4:31