1
00:00:01,020 --> 00:00:03,840
‫As web developers, we rely a lot

2
00:00:03,840 --> 00:00:05,370
‫on Developer Tools.

3
00:00:05,370 --> 00:00:07,380
‫So things like the Console

4
00:00:07,380 --> 00:00:11,010
‫or the Element Inspect panel in our browser.

5
00:00:11,010 --> 00:00:15,150
‫And so since tools are so helpful for developers

6
00:00:15,150 --> 00:00:19,410
‫the React team built dev tools specific for React

7
00:00:19,410 --> 00:00:23,370
‫which can be extremely helpful when working with State.

8
00:00:23,370 --> 00:00:25,380
‫And so since we're working with State now,

9
00:00:25,380 --> 00:00:26,943
‫let's go check them out.

10
00:00:28,380 --> 00:00:31,560
‫And actually since the beginning, we got this message here

11
00:00:31,560 --> 00:00:35,970
‫in our Console telling us to download these dev tools.

12
00:00:35,970 --> 00:00:38,190
‫So you can open up your Console

13
00:00:38,190 --> 00:00:40,112
‫and then here you will find the link

14
00:00:40,112 --> 00:00:42,972
‫to the place in the React documentation where

15
00:00:42,972 --> 00:00:46,563
‫we then can find the link to the dev tools.

16
00:00:47,790 --> 00:00:49,020
‫So here is the link

17
00:00:49,020 --> 00:00:52,500
‫for the Chrome Web Store and then for the other browsers.

18
00:00:52,500 --> 00:00:55,050
‫But since we're using Google Chrome

19
00:00:55,050 --> 00:00:57,570
‫this is the one that we want.

20
00:00:57,570 --> 00:01:01,020
‫And if for some reason this link here didn't appear

21
00:01:01,020 --> 00:01:02,886
‫in your Console, you can just Google,

22
00:01:02,886 --> 00:01:07,886
‫"chrome react dev tools".

23
00:01:09,300 --> 00:01:12,330
‫So yeah, that's going to be this first one.

24
00:01:12,330 --> 00:01:16,110
‫And so then once you're on this page or on this one

25
00:01:16,110 --> 00:01:19,260
‫which is the same, you can just download this extension

26
00:01:19,260 --> 00:01:22,320
‫and install it in your Google Chrome.

27
00:01:22,320 --> 00:01:25,080
‫Now, I cannot do this because I'm on a Guest window

28
00:01:25,080 --> 00:01:26,733
‫so let me quickly fix that.

29
00:01:27,990 --> 00:01:30,780
‫And so now here in this window I can actually

30
00:01:30,780 --> 00:01:33,420
‫use these dev tools, as well.

31
00:01:33,420 --> 00:01:35,640
‫So hopefully you installed the tool.

32
00:01:35,640 --> 00:01:38,130
‫So just like any other Chrome extension.

33
00:01:38,130 --> 00:01:40,500
‫And then once you did, down here

34
00:01:40,500 --> 00:01:43,860
‫once you have these developer tools here already open,

35
00:01:43,860 --> 00:01:47,310
‫you'll see one tab which appears here

36
00:01:47,310 --> 00:01:51,270
‫or actually two which are coming from the React dev tools.

37
00:01:51,270 --> 00:01:54,780
‫So that's this Component tab and this Profiler tab.

38
00:01:54,780 --> 00:01:56,850
‫And since we're going to use this all the time

39
00:01:56,850 --> 00:01:59,733
‫we can even drag, well actually not.

40
00:02:01,050 --> 00:02:04,710
‫Now we can like drag it here to the beginning where

41
00:02:04,710 --> 00:02:06,480
‫it will then stay.

42
00:02:06,480 --> 00:02:09,210
‫Now here it says loading React Element Tree,

43
00:02:09,210 --> 00:02:11,100
‫which should be fast.

44
00:02:11,100 --> 00:02:12,750
‫So let's try that again.

45
00:02:12,750 --> 00:02:15,840
‫And actually it only worked for me after closing

46
00:02:15,840 --> 00:02:18,270
‫and reopening my browser.

47
00:02:18,270 --> 00:02:22,050
‫So if you see the same error message that I had previously

48
00:02:22,050 --> 00:02:25,860
‫down here, then please go ahead and do the same now.

49
00:02:25,860 --> 00:02:27,870
‫But so now everything is working.

50
00:02:27,870 --> 00:02:31,290
‫And so let's take a look at these dev tools and

51
00:02:31,290 --> 00:02:35,520
‫in particular of this Component part of the dev tools.

52
00:02:35,520 --> 00:02:39,060
‫Because again, there's another part which is this Profiler

53
00:02:39,060 --> 00:02:41,850
‫but we will come back to that a bit later.

54
00:02:41,850 --> 00:02:45,480
‫So Components, basically, as the name says, is

55
00:02:45,480 --> 00:02:48,012
‫for showing a component tree.

56
00:02:48,012 --> 00:02:52,320
‫Now, right now we only have one component, so only

57
00:02:52,320 --> 00:02:54,750
‫the app component, and so then this

58
00:02:54,750 --> 00:02:57,180
‫is the only one that we can see here.

59
00:02:57,180 --> 00:02:59,130
‫But if we had more, then all of them

60
00:02:59,130 --> 00:03:01,140
‫would be showing up down here

61
00:03:01,140 --> 00:03:04,140
‫and we could see our entire component tree.

62
00:03:04,140 --> 00:03:07,170
‫So I will show you this again once we have that.

63
00:03:07,170 --> 00:03:10,320
‫The point here now is that we can take a look

64
00:03:10,320 --> 00:03:13,263
‫at all the State that is inside each component.

65
00:03:14,400 --> 00:03:18,663
‫To make this even a bit bigger here so you can actually see.

66
00:03:20,198 --> 00:03:22,170
‫Well, that's maybe too big,

67
00:03:22,170 --> 00:03:25,743
‫or I can also make the entire window bigger.

68
00:03:26,850 --> 00:03:28,800
‫So just like this.

69
00:03:28,800 --> 00:03:31,710
‫So you see here that first, we have this props

70
00:03:31,710 --> 00:03:34,560
‫which is for all the props that the component

71
00:03:34,560 --> 00:03:37,470
‫that is currently selected is receiving.

72
00:03:37,470 --> 00:03:39,300
‫And in this case, we, of course,

73
00:03:39,300 --> 00:03:42,090
‫are receiving no props, so nothing there.

74
00:03:42,090 --> 00:03:44,310
‫But then here is the interesting part.

75
00:03:44,310 --> 00:03:47,130
‫So here we then have a list of all the hooks.

76
00:03:47,130 --> 00:03:49,560
‫And so here we have these two entries

77
00:03:49,560 --> 00:03:52,560
‫one for each State hook that we used.

78
00:03:52,560 --> 00:03:56,610
‫So remember that we created the State with use State

79
00:03:56,610 --> 00:03:59,430
‫and these use functions are hooks;

80
00:03:59,430 --> 00:04:03,180
‫therefore, they are here in the list of hooks.

81
00:04:03,180 --> 00:04:05,940
‫But anyway, what's interesting is that we can now

82
00:04:05,940 --> 00:04:09,813
‫manipulate these values down here to experiment with them.

83
00:04:10,680 --> 00:04:13,080
‫For example, when we have a bullion value

84
00:04:13,080 --> 00:04:17,520
‫we here get this checkbox, and so then we can toggle it

85
00:04:17,520 --> 00:04:20,190
‫which will then also toggle the value here.

86
00:04:20,190 --> 00:04:21,573
‫So from true to false.

87
00:04:22,650 --> 00:04:26,070
‫So basically we can do the same thing as in the UI

88
00:04:26,070 --> 00:04:27,810
‫but here with the dev tools.

89
00:04:27,810 --> 00:04:31,050
‫So that's very useful and it's a bit similar

90
00:04:31,050 --> 00:04:34,980
‫to what we also can do with CSS here in the Element tab.

91
00:04:34,980 --> 00:04:37,890
‫So here we can do similar things.

92
00:04:37,890 --> 00:04:40,260
‫So this was inspired by that.

93
00:04:40,260 --> 00:04:43,101
‫And then of course here we can also change this date.

94
00:04:43,101 --> 00:04:48,000
‫So we can go from one to three directly, or of course

95
00:04:48,000 --> 00:04:49,230
‫we can also try

96
00:04:49,230 --> 00:04:52,593
‫with values that we usually cannot access from the UI.

97
00:04:53,610 --> 00:04:57,690
‫So by clicking these buttons, we cannot set the state to 10,

98
00:04:57,690 --> 00:05:01,277
‫for example, but maybe for some reason we need

99
00:05:01,277 --> 00:05:03,600
‫to see what the UI looks like with 10.

100
00:05:03,600 --> 00:05:06,090
‫And so then we can come here to the dev tools

101
00:05:06,090 --> 00:05:08,280
‫and set it to this.

102
00:05:08,280 --> 00:05:10,590
‫Now, again, this is just a small demo example.

103
00:05:10,590 --> 00:05:12,480
‫So here that wouldn't be important.

104
00:05:12,480 --> 00:05:15,660
‫But in bigger and large scale applications

105
00:05:15,660 --> 00:05:18,030
‫this might be necessary from time to time.

106
00:05:18,030 --> 00:05:20,670
‫And so this is very, very important to keep in

107
00:05:20,670 --> 00:05:24,693
‫mind that you can use the dev tools for this kind of thing.

108
00:05:26,130 --> 00:05:27,450
‫So that's one thing.

109
00:05:27,450 --> 00:05:29,400
‫And as I mentioned earlier

110
00:05:29,400 --> 00:05:31,800
‫it's also very useful to be able to see the

111
00:05:31,800 --> 00:05:32,633
‫entire component tree right here because

112
00:05:32,633 --> 00:05:37,633
‫when we have many, many files in a project and dozens

113
00:05:37,797 --> 00:05:41,110
‫or even hundreds of components in our app maybe,

114
00:05:41,110 --> 00:05:44,100
‫then it can become quickly out of hand

115
00:05:44,100 --> 00:05:47,280
‫and we can lose sight which components are where.

116
00:05:47,280 --> 00:05:50,550
‫And so then a component tree can become very handy.

117
00:05:50,550 --> 00:05:52,500
‫So instead of drawing that manually

118
00:05:52,500 --> 00:05:54,633
‫we just come here and there it is.

119
00:05:55,980 --> 00:05:58,800
‫Okay, and that's for now all I had to tell you

120
00:05:58,800 --> 00:06:00,300
‫about these dev tools.

121
00:06:00,300 --> 00:06:01,200
‫Very handy.

122
00:06:01,200 --> 00:06:04,050
‫Make sure that you install them and we will come

123
00:06:04,050 --> 00:06:06,903
‫back to them in future lectures, for sure.