1
00:00:00,110 --> 00:00:04,120
I wanna go ahead and take a look at the
resources panel, which

2
00:00:04,120 --> 00:00:07,860
is similar to the elements panel, but

3
00:00:07,860 --> 00:00:11,390
we can actually look at some of the assets
that are being loaded in.

4
00:00:12,950 --> 00:00:19,710
So if we twirl open our directory here,
you can go ahead and click on one of these

5
00:00:19,710 --> 00:00:25,530
fonts, and you'll see that it actually
displays the font right over here.

6
00:00:25,530 --> 00:00:29,650
So we can see A through Z in terms of
capital

7
00:00:29,650 --> 00:00:32,860
letters, and we can also see A through Z
in lower case.

8
00:00:32,860 --> 00:00:34,960
And we can see all ten numbers.

9
00:00:36,000 --> 00:00:42,072
If we click on, images over here, we can
see what each one of these images looks

10
00:00:42,072 --> 00:00:47,806
like, and it will give us a couple of bits
of information about the image.

11
00:00:47,806 --> 00:00:50,842
So, we can see the image against a
transparent background.

12
00:00:50,842 --> 00:00:52,692
So we can see, you know, what

13
00:00:52,692 --> 00:00:56,030
the transparency actually looks like on
that image.

14
00:00:56,030 --> 00:00:59,400
We can see the name of the file and the
file type.

15
00:00:59,400 --> 00:01:03,150
We can also see the dimensions and file
size for the image.

16
00:01:03,150 --> 00:01:07,440
So, that's especially important if you're
building say, a

17
00:01:07,440 --> 00:01:11,550
website that's going to be ready for high
resolution displays.

18
00:01:11,550 --> 00:01:14,170
You wanna be able to see the dimensions of
the image.

19
00:01:14,170 --> 00:01:16,280
And if you're trying to optimize your
website,

20
00:01:16,280 --> 00:01:18,820
you'll wanna look at the file size as
well.

21
00:01:18,820 --> 00:01:21,820
We'll get a little bit more into
optimization using some of the

22
00:01:21,820 --> 00:01:26,560
other panels later, but this is a good way
to see file size.

23
00:01:26,560 --> 00:01:29,720
Again, we can see the mime type or file
type.

24
00:01:29,720 --> 00:01:34,180
And then we can see the URL, that this
image is coming from.

25
00:01:34,180 --> 00:01:37,720
So this is really handy if you have a
broken image on

26
00:01:37,720 --> 00:01:41,280
the page, and you wanna try to trace where
it actually is showing

27
00:01:41,280 --> 00:01:47,010
up, and whether or not you have the file
path correct on your website.

28
00:01:48,430 --> 00:01:50,350
We can also look at style sheets here.

29
00:01:51,530 --> 00:01:53,440
So we can go ahead and see what

30
00:01:53,440 --> 00:01:56,980
all these style sheets look like, that's
pretty nifty.

31
00:01:56,980 --> 00:02:01,070
And then we can go ahead and look at the
HTML itself.

32
00:02:01,070 --> 00:02:06,450
Now all of these panels are linked
together

33
00:02:06,450 --> 00:02:07,340
in some way or another.

34
00:02:07,340 --> 00:02:12,320
So, for example, if we go over to the
elements panel again, and we

35
00:02:12,320 --> 00:02:17,220
see some styling being applied and we want
to look at it in more detail.

36
00:02:17,220 --> 00:02:19,270
We can go ahead and click on the right
side

37
00:02:19,270 --> 00:02:24,070
here, and it will bring us over to the
sources panel.

38
00:02:25,340 --> 00:02:29,900
And, here you can see what that source
actually looks like.

39
00:02:29,900 --> 00:02:31,610
So we'll look at the sources panel in

40
00:02:31,610 --> 00:02:32,750
a little bit more detail.

41
00:02:33,980 --> 00:02:37,360
But, that's very similar to the resources
panel, and the elements panel,

42
00:02:37,360 --> 00:02:39,850
in that you can see what the HTML and the
CSS looks like.

43
00:02:42,130 --> 00:02:46,450
So, down here, you'll notice a couple of
other pieces here.

44
00:02:46,450 --> 00:02:50,390
There's Web SQL, IndexedDB, local
storage,

45
00:02:50,390 --> 00:02:54,120
session storage, cookies, and the
application cache.

46
00:02:54,120 --> 00:02:57,640
This website doesn't have any cookies, now
if we go ahead and click on it.

47
00:02:57,640 --> 00:03:01,720
It will actually, explicitly say that,
this site has no cookies.

48
00:03:01,720 --> 00:03:04,591
And if we twirl out local storage, well

49
00:03:04,591 --> 00:03:08,091
there aren't any key value pairs stored
here.

50
00:03:08,091 --> 00:03:11,528
We can go ahead and add key value pairs,
if we want to.

51
00:03:11,528 --> 00:03:16,419
So, that's really nice if you're
interacting with a JavaScript application

52
00:03:16,419 --> 00:03:19,120
and you want to go ahead and see what key
value

53
00:03:19,120 --> 00:03:22,332
pairs look like in the application or you
want to edit

54
00:03:22,332 --> 00:03:27,120
those key value pairs, add new ones,
delete ones, and so on.

55
00:03:27,120 --> 00:03:30,330
That pretty much wraps things up for the
resources panel.

56
00:03:30,330 --> 00:03:33,210
Next up, we're gonna take a look at the
network panel and

57
00:03:33,210 --> 00:03:36,520
learn about a couple of ways that we can
improve the performance of our page.