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

The Resources Panel

3:36 with Nick Pettit

The Resources panel in the DevTools provides a picture of the file structure and all the assets and data being loaded into the browser. From here you can view details about assets such as images and videos. You can also inspect data stored in cookies, sessions, local storage, and more.

This video doesn't have any notes.

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

    I wanna go ahead and take a look at the resources panel, which 0:00
    is similar to the elements panel, but 0:04
    we can actually look at some of the assets that are being loaded in. 0:07
    So if we twirl open our directory here, you can go ahead and click on one of these 0:12
    fonts, and you'll see that it actually displays the font right over here. 0:19
    So we can see A through Z in terms of capital 0:25
    letters, and we can also see A through Z in lower case. 0:29
    And we can see all ten numbers. 0:32
    If we click on, images over here, we can see what each one of these images looks 0:36
    like, and it will give us a couple of bits of information about the image. 0:42
    So, we can see the image against a transparent background. 0:47
    So we can see, you know, what 0:50
    the transparency actually looks like on that image. 0:52
    We can see the name of the file and the file type. 0:56
    We can also see the dimensions and file size for the image. 0:59
    So, that's especially important if you're building say, a 1:03
    website that's going to be ready for high resolution displays. 1:07
    You wanna be able to see the dimensions of the image. 1:11
    And if you're trying to optimize your website, 1:14
    you'll wanna look at the file size as well. 1:16
    We'll get a little bit more into optimization using some of the 1:18
    other panels later, but this is a good way to see file size. 1:21
    Again, we can see the mime type or file type. 1:26
    And then we can see the URL, that this image is coming from. 1:29
    So this is really handy if you have a broken image on 1:34
    the page, and you wanna try to trace where it actually is showing 1:37
    up, and whether or not you have the file path correct on your website. 1:41
    We can also look at style sheets here. 1:48
    So we can go ahead and see what 1:51
    all these style sheets look like, that's pretty nifty. 1:53
    And then we can go ahead and look at the HTML itself. 1:56
    Now all of these panels are linked together 2:01
    in some way or another. 2:06
    So, for example, if we go over to the elements panel again, and we 2:07
    see some styling being applied and we want to look at it in more detail. 2:12
    We can go ahead and click on the right side 2:17
    here, and it will bring us over to the sources panel. 2:19
    And, here you can see what that source actually looks like. 2:25
    So we'll look at the sources panel in 2:29
    a little bit more detail. 2:31
    But, that's very similar to the resources panel, and the elements panel, 2:33
    in that you can see what the HTML and the CSS looks like. 2:37
    So, down here, you'll notice a couple of other pieces here. 2:42
    There's Web SQL, IndexedDB, local storage, 2:46
    session storage, cookies, and the application cache. 2:50
    This website doesn't have any cookies, now if we go ahead and click on it. 2:54
    It will actually, explicitly say that, this site has no cookies. 2:57
    And if we twirl out local storage, well 3:01
    there aren't any key value pairs stored here. 3:04
    We can go ahead and add key value pairs, if we want to. 3:08
    So, that's really nice if you're interacting with a JavaScript application 3:11
    and you want to go ahead and see what key value 3:16
    pairs look like in the application or you want to edit 3:19
    those key value pairs, add new ones, delete ones, and so on. 3:22
    That pretty much wraps things up for the resources panel. 3:27
    Next up, we're gonna take a look at the network panel and 3:30
    learn about a couple of ways that we can improve the performance of our page. 3:33

    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