Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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.
For more information about the available settings inside the DevTools, refer to the DevTools Settings documentation.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up