The Resources Panel

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 sequel, index databases, 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