I wanna go ahead and take a look at the resources panel, which

is similar to the elements panel, but

we can actually look at some of the assets that are being loaded in.

So if we twirl open our directory here, you can go ahead and click on one of these

fonts, and you'll see that it actually displays the font right over here.

So we can see A through Z in terms of capital

letters, and we can also see A through Z in lower case.

And we can see all ten numbers.

If we click on, images over here, we can see what each one of these images looks

like, and it will give us a couple of bits of information about the image.

So, we can see the image against a transparent background.

So we can see, you know, what

the transparency actually looks like on that image.

We can see the name of the file and the file type.

We can also see the dimensions and file size for the image.

So, that's especially important if you're building say, a

website that's going to be ready for high resolution displays.

You wanna be able to see the dimensions of the image.

And if you're trying to optimize your website,

you'll wanna look at the file size as well.

We'll get a little bit more into optimization using some of the

other panels later, but this is a good way to see file size.

Again, we can see the mime type or file type.

And then we can see the URL, that this image is coming from.

So this is really handy if you have a broken image on

the page, and you wanna try to trace where it actually is showing

up, and whether or not you have the file path correct on your website.

We can also look at style sheets here.

So we can go ahead and see what

all these style sheets look like, that's pretty nifty.

And then we can go ahead and look at the HTML itself.

Now all of these panels are linked together

in some way or another.

So, for example, if we go over to the elements panel again, and we

see some styling being applied and we want to look at it in more detail.

We can go ahead and click on the right side

here, and it will bring us over to the sources panel.

And, here you can see what that source actually looks like.

So we'll look at the sources panel in

a little bit more detail.

But, that's very similar to the resources panel, and the elements panel,

in that you can see what the HTML and the CSS looks like.

So, down here, you'll notice a couple of other pieces here.

There's web sequel, index databases, local storage,

session storage, cookies, and the application cache.

This website doesn't have any cookies, now if we go ahead and click on it.

It will actually, explicitly say that, this site has no cookies.

And if we twirl out local storage, well

there aren't any key value pairs stored here.

We can go ahead and add key value pairs, if we want to.

So, that's really nice if you're interacting with a JavaScript application

and you want to go ahead and see what key value

pairs look like in the application or you want to edit

those key value pairs, add new ones, delete ones, and so on.

That pretty much wraps things up for the resources panel.

Next up, we're gonna take a look at the network panel and

learn about a couple of ways that we can improve the performance of our page.