Okay.
Now let's take a look at what these react dev tools are.
Let's just click on this link and see where it takes us.
And it takes us to react developer tools documentation in react.
And what this effectively is, is really just a browser extension.
We can get it for Chrome, Firefox or Edge.
And if we visit a website built with react, we'll see the component and profiler panels.
And apparently for Safari, if anybody uses that there's a react dev tools npm package.
What I'd really suggest though, is that what I do personally is I use Chrome as my development browser
for normal web browsing.
I use a chromium based browser called brave, where I use any extensions I want to use for normal web
browsing, things like ad blockers and that.
But you don't really want ad blockers and other things extensions added to your development browser,
because that can cause some weird errors.
If the extension has a problem and you're looking at the dev tools, then that could display the errors
from the extension inside Chrome dev tools.
And you might think it's a problem with the application, but it isn't.
It's a problem with an extension.
So what I'd really suggest is keep your developer browser.
Have a special developer browser.
I find chromium based browsers best to develop in.
Typically I use Chrome as I mentioned, but I do use brave for normal browsing because that comes with
ad blocking functionality installed.
But up to you of course.
And we've got a warning here on the React Developer Tools page, because they're using third party cookies
and Chrome is giving us that warning.
So let's go ahead and take a look at installing the extension for Chrome.
And we'll just open this.
And this takes us to the Chrome Web Store.
And we can add this to Chrome.
And do we want to add this I'm going to say yep I want to add the extension.
And that has now been added to my chrome.
So if I go back to our application then what we should see is the advice has gone.
And what we also have now is some extras inside here.
So what does React DevTools actually give us then?
Well on our browser tab, now that we have them installed we've got this components and it's not visible
on my screen resolution, but we can see the profiler there as well.
So these are the two options that it gives us.
We've got components and we've got profiler.
And we need to record this so it can give us some kind of performance based information.
I've never really found a good use for that yet but the components one can be useful.
This gives us all of the structure of our application.
We can see the app component and we can see what props are being passed down to it.
What hooks are being used.
In this case the state hook is being used.
And we can see a list of our products there.
If we go down to the next component, the child of the app, we can see we've got our catalog component.
We're passing the products down to that, and we can see our list of products, and we can see our product
list.
Again, we're passing our products down to that, and we can see that list of products.
What we're doing here is referred to as prop drilling, by the way, where we have props or state contained
at the highest level.
And then we're passing it down to the catalog, passing that down to the product list.
And then we're passing an individual product down to the product card.
Now as our application grows, this system of passing props down from one child to another child to
another child becomes quite burdensome.
And it introduces what feels like boilerplate.
We do have a solution to that, and it's not how we're going to build our application, but sometimes
we will be passing props down from a parent to a child component in the same way, but we can see the
props being passed down there and specifically this product.
And if we click on this, we can see this highlighted in the browser about what item we have selected.
And I think we should be able to make a change inside here and see it reflected in the component.
So if I did make a change to the price, for instance, then we can see that being updated in the browser
at the same time.
Obviously this doesn't change our back end.
We're not hacking anything here.
It's just really a tool to allow us to make some changes and see how it affects the user interface.
So we get the tree of components listed inside here, quite busy because of all the material UI components,
and it's another tool in our toolbox to see what's going on as we're building our application.
So it can be very useful and something to take a look at.
If something's not working as expected, then it's just another tool to go and look at.
But don't forget, this is one tool and you have other tools.
You've got your console where you can add console log statements to see what's specifically going on
inside a component.
You've got your network tab, which will tell you about the API requests that are going on, and you
can troubleshoot anything like that using that network tab.
And now we've got another tool, the components tool from React Dev Kit.
So the more tools at our disposal the better when it comes to troubleshooting because the more information
we can get about a problem, the better chance we've got of solving it.
If you've got a problem and you're just looking at your browser without opening up Chrome dev tools,
it's very, very difficult.
Impossible even to resolve any problems with your code if you don't get the full amount of information
available.
So let's react dev tools.
And what we'll do to finish up this section really is we'll just create a navigation bar at the top
instead of just having this header.
And we'll take a look at that next.