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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Accessing the DevTools

2:52 with Nick Pettit

The Chrome DevTools inside of the Google Chrome web browser can be accessed in a number of different ways. In this video, you’ll get a brief introduction to the DevTools and you’ll learn how to reveal them in the browser.

These tutorials use the Chrome DevTools which are only available in the Google Chrome web browser. If you don't have Google Chrome, you can download it from https://www.google.com/chrome and then install it.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    In this course we're gonna take a look at the Chrome DevTools. 0:04
    The Chrome DevTools exist inside the Google Chrome 0:07
    web browser, and they allow you to take 0:10
    a deeper look at your code, debug errors, 0:13
    and generally profile the performance of your page. 0:16
    Let's check it out. 0:20
    Now I've pulled up the website smellslikebakin.com 0:22
    here, and Smells Like Bakin' is an example 0:26
    website we use here at Treehouse in a couple of different projects. 0:29
    And it's a project we're going to be using today to take a look at the DevTools. 0:33
    Now there's a couple of different ways to bring up the DevTools. 0:38
    And one of the ways is to go ahead and right-click on an 0:42
    element and then click Inspect Element in the context menu that pops up. 0:46
    So down here at the bottom 0:53
    you'll see this panel has appeared and there's 0:54
    a whole bunch of stuff going on here. 0:58
    We're going to get in, into every little piece that's in here. 1:00
    We're gonna go through each one of these different panels here. 1:04
    There's all sorts of cool stuff to explore. 1:06
    But first, I want to show you how else you can pull up the DevTools. 1:08
    You can also go up to this menu here and go to Tools, and then 1:12
    go ahead and click on Developer Tools, and 1:20
    that will bring up the Developer Tools as well. 1:24
    We'll click the X here to go ahead and close that 1:25
    out. 1:31
    And the last way to bring them up is with the shortcut 1:32
    key, so I'm gonna hit Cmd+Option+I, and that's if you're on a Mac. 1:35
    If you're on Windows you'll want to hit Ctrl+Shift+I. 1:41
    So slightly different hotkeys there. Once we have the dev tools up, we can go 1:46
    ahead and hit Cmd+Plus, or Ctrl+Plus to increase the size of the texts and 1:51
    other interface elements. 1:57
    So I'm gonna make mine just a little bit 1:59
    larger here, so you can see what's going on. 2:01
    I think that's good. 2:04
    And you can also tear off this menu into a 2:06
    new window, and there's a couple of different modes here. 2:09
    So down here in the bottom left, if we click and hold a 2:12
    little menu will come up here and it says Dock to main window. 2:17
    So we'll click that. 2:21
    And that shows up over on the right hand side. 2:23
    Now if we click it again, it'll go back down to the bottom. 2:27
    We can also click and hold here and bring this up into a new 2:31
    window, wo we can go ahead and undock it from the Chrome web browser. 2:36
    And that way we can switch back and forth between 2:40
    our website and the DevTools fullscreen if we wanna do that. 2:42
    But for today, I'm gonna go ahead and 2:47
    keep them docked down at the bottom. 2:49

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up