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
Start a free Courses trial
to watch this video
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.
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