WEBVTT 00:00.260 --> 00:00.860 Okay. 00:00.860 --> 00:03.890 Now let's take a look at what these react dev tools are. 00:03.920 --> 00:06.260 Let's just click on this link and see where it takes us. 00:06.260 --> 00:10.640 And it takes us to react developer tools documentation in react. 00:10.640 --> 00:14.330 And what this effectively is, is really just a browser extension. 00:14.330 --> 00:16.910 We can get it for Chrome, Firefox or Edge. 00:16.910 --> 00:22.670 And if we visit a website built with react, we'll see the component and profiler panels. 00:23.180 --> 00:29.480 And apparently for Safari, if anybody uses that there's a react dev tools npm package. 00:29.480 --> 00:37.250 What I'd really suggest though, is that what I do personally is I use Chrome as my development browser 00:37.250 --> 00:39.380 for normal web browsing. 00:39.380 --> 00:45.470 I use a chromium based browser called brave, where I use any extensions I want to use for normal web 00:45.470 --> 00:47.660 browsing, things like ad blockers and that. 00:47.660 --> 00:53.390 But you don't really want ad blockers and other things extensions added to your development browser, 00:53.390 --> 00:55.310 because that can cause some weird errors. 00:55.310 --> 01:02.180 If the extension has a problem and you're looking at the dev tools, then that could display the errors 01:02.180 --> 01:05.240 from the extension inside Chrome dev tools. 01:05.240 --> 01:08.240 And you might think it's a problem with the application, but it isn't. 01:08.240 --> 01:10.040 It's a problem with an extension. 01:10.070 --> 01:13.640 So what I'd really suggest is keep your developer browser. 01:13.670 --> 01:15.500 Have a special developer browser. 01:15.530 --> 01:18.830 I find chromium based browsers best to develop in. 01:18.860 --> 01:25.310 Typically I use Chrome as I mentioned, but I do use brave for normal browsing because that comes with 01:25.340 --> 01:27.830 ad blocking functionality installed. 01:28.370 --> 01:29.870 But up to you of course. 01:29.870 --> 01:34.610 And we've got a warning here on the React Developer Tools page, because they're using third party cookies 01:34.610 --> 01:36.830 and Chrome is giving us that warning. 01:36.860 --> 01:42.890 So let's go ahead and take a look at installing the extension for Chrome. 01:42.890 --> 01:44.390 And we'll just open this. 01:44.390 --> 01:46.670 And this takes us to the Chrome Web Store. 01:46.670 --> 01:49.370 And we can add this to Chrome. 01:49.640 --> 01:54.050 And do we want to add this I'm going to say yep I want to add the extension. 01:54.080 --> 01:56.540 And that has now been added to my chrome. 01:56.540 --> 02:03.200 So if I go back to our application then what we should see is the advice has gone. 02:03.200 --> 02:07.040 And what we also have now is some extras inside here. 02:07.370 --> 02:09.890 So what does React DevTools actually give us then? 02:09.920 --> 02:16.410 Well on our browser tab, now that we have them installed we've got this components and it's not visible 02:16.440 --> 02:20.250 on my screen resolution, but we can see the profiler there as well. 02:20.250 --> 02:22.140 So these are the two options that it gives us. 02:22.140 --> 02:24.660 We've got components and we've got profiler. 02:25.050 --> 02:29.700 And we need to record this so it can give us some kind of performance based information. 02:29.730 --> 02:36.180 I've never really found a good use for that yet but the components one can be useful. 02:36.180 --> 02:38.700 This gives us all of the structure of our application. 02:38.700 --> 02:43.110 We can see the app component and we can see what props are being passed down to it. 02:43.140 --> 02:44.580 What hooks are being used. 02:44.580 --> 02:46.800 In this case the state hook is being used. 02:46.800 --> 02:49.080 And we can see a list of our products there. 02:49.080 --> 02:54.300 If we go down to the next component, the child of the app, we can see we've got our catalog component. 02:54.330 --> 02:59.250 We're passing the products down to that, and we can see our list of products, and we can see our product 02:59.250 --> 02:59.550 list. 02:59.550 --> 03:03.630 Again, we're passing our products down to that, and we can see that list of products. 03:03.630 --> 03:09.600 What we're doing here is referred to as prop drilling, by the way, where we have props or state contained 03:09.600 --> 03:10.770 at the highest level. 03:10.770 --> 03:14.700 And then we're passing it down to the catalog, passing that down to the product list. 03:14.700 --> 03:19.260 And then we're passing an individual product down to the product card. 03:19.350 --> 03:25.650 Now as our application grows, this system of passing props down from one child to another child to 03:25.680 --> 03:28.860 another child becomes quite burdensome. 03:28.860 --> 03:32.100 And it introduces what feels like boilerplate. 03:32.100 --> 03:36.630 We do have a solution to that, and it's not how we're going to build our application, but sometimes 03:36.630 --> 03:42.240 we will be passing props down from a parent to a child component in the same way, but we can see the 03:42.240 --> 03:46.140 props being passed down there and specifically this product. 03:46.140 --> 03:52.500 And if we click on this, we can see this highlighted in the browser about what item we have selected. 03:52.680 --> 03:58.860 And I think we should be able to make a change inside here and see it reflected in the component. 03:58.860 --> 04:05.490 So if I did make a change to the price, for instance, then we can see that being updated in the browser 04:05.490 --> 04:06.780 at the same time. 04:06.810 --> 04:08.970 Obviously this doesn't change our back end. 04:09.000 --> 04:10.830 We're not hacking anything here. 04:10.860 --> 04:16.770 It's just really a tool to allow us to make some changes and see how it affects the user interface. 04:16.770 --> 04:22.680 So we get the tree of components listed inside here, quite busy because of all the material UI components, 04:22.680 --> 04:28.010 and it's another tool in our toolbox to see what's going on as we're building our application. 04:28.010 --> 04:31.340 So it can be very useful and something to take a look at. 04:31.340 --> 04:36.590 If something's not working as expected, then it's just another tool to go and look at. 04:36.590 --> 04:39.470 But don't forget, this is one tool and you have other tools. 04:39.470 --> 04:44.690 You've got your console where you can add console log statements to see what's specifically going on 04:44.690 --> 04:45.890 inside a component. 04:45.920 --> 04:51.380 You've got your network tab, which will tell you about the API requests that are going on, and you 04:51.380 --> 04:54.350 can troubleshoot anything like that using that network tab. 04:54.350 --> 04:59.480 And now we've got another tool, the components tool from React Dev Kit. 04:59.480 --> 05:05.000 So the more tools at our disposal the better when it comes to troubleshooting because the more information 05:05.000 --> 05:08.630 we can get about a problem, the better chance we've got of solving it. 05:08.660 --> 05:13.040 If you've got a problem and you're just looking at your browser without opening up Chrome dev tools, 05:13.040 --> 05:14.990 it's very, very difficult. 05:14.990 --> 05:21.110 Impossible even to resolve any problems with your code if you don't get the full amount of information 05:21.110 --> 05:21.890 available. 05:21.890 --> 05:23.240 So let's react dev tools. 05:23.240 --> 05:29.660 And what we'll do to finish up this section really is we'll just create a navigation bar at the top 05:29.690 --> 05:31.340 instead of just having this header. 05:31.340 --> 05:33.740 And we'll take a look at that next.