‫As web developers, we rely a lot
‫on Developer Tools.
‫So things like the Console
‫or the Element Inspect panel in our browser.
‫And so since tools are so helpful for developers
‫the React team built dev tools specific for React
‫which can be extremely helpful when working with State.
‫And so since we're working with State now,
‫let's go check them out.
‫And actually since the beginning, we got this message here
‫in our Console telling us to download these dev tools.
‫So you can open up your Console
‫and then here you will find the link
‫to the place in the React documentation where
‫we then can find the link to the dev tools.
‫So here is the link
‫for the Chrome Web Store and then for the other browsers.
‫But since we're using Google Chrome
‫this is the one that we want.
‫And if for some reason this link here didn't appear
‫in your Console, you can just Google,
‫"chrome react dev tools".
‫So yeah, that's going to be this first one.
‫And so then once you're on this page or on this one
‫which is the same, you can just download this extension
‫and install it in your Google Chrome.
‫Now, I cannot do this because I'm on a Guest window
‫so let me quickly fix that.
‫And so now here in this window I can actually
‫use these dev tools, as well.
‫So hopefully you installed the tool.
‫So just like any other Chrome extension.
‫And then once you did, down here
‫once you have these developer tools here already open,
‫you'll see one tab which appears here
‫or actually two which are coming from the React dev tools.
‫So that's this Component tab and this Profiler tab.
‫And since we're going to use this all the time
‫we can even drag, well actually not.
‫Now we can like drag it here to the beginning where
‫it will then stay.
‫Now here it says loading React Element Tree,
‫which should be fast.
‫So let's try that again.
‫And actually it only worked for me after closing
‫and reopening my browser.
‫So if you see the same error message that I had previously
‫down here, then please go ahead and do the same now.
‫But so now everything is working.
‫And so let's take a look at these dev tools and
‫in particular of this Component part of the dev tools.
‫Because again, there's another part which is this Profiler
‫but we will come back to that a bit later.
‫So Components, basically, as the name says, is
‫for showing a component tree.
‫Now, right now we only have one component, so only
‫the app component, and so then this
‫is the only one that we can see here.
‫But if we had more, then all of them
‫would be showing up down here
‫and we could see our entire component tree.
‫So I will show you this again once we have that.
‫The point here now is that we can take a look
‫at all the State that is inside each component.
‫To make this even a bit bigger here so you can actually see.
‫Well, that's maybe too big,
‫or I can also make the entire window bigger.
‫So just like this.
‫So you see here that first, we have this props
‫which is for all the props that the component
‫that is currently selected is receiving.
‫And in this case, we, of course,
‫are receiving no props, so nothing there.
‫But then here is the interesting part.
‫So here we then have a list of all the hooks.
‫And so here we have these two entries
‫one for each State hook that we used.
‫So remember that we created the State with use State
‫and these use functions are hooks;
‫therefore, they are here in the list of hooks.
‫But anyway, what's interesting is that we can now
‫manipulate these values down here to experiment with them.
‫For example, when we have a bullion value
‫we here get this checkbox, and so then we can toggle it
‫which will then also toggle the value here.
‫So from true to false.
‫So basically we can do the same thing as in the UI
‫but here with the dev tools.
‫So that's very useful and it's a bit similar
‫to what we also can do with CSS here in the Element tab.
‫So here we can do similar things.
‫So this was inspired by that.
‫And then of course here we can also change this date.
‫So we can go from one to three directly, or of course
‫we can also try
‫with values that we usually cannot access from the UI.
‫So by clicking these buttons, we cannot set the state to 10,
‫for example, but maybe for some reason we need
‫to see what the UI looks like with 10.
‫And so then we can come here to the dev tools
‫and set it to this.
‫Now, again, this is just a small demo example.
‫So here that wouldn't be important.
‫But in bigger and large scale applications
‫this might be necessary from time to time.
‫And so this is very, very important to keep in
‫mind that you can use the dev tools for this kind of thing.
‫So that's one thing.
‫And as I mentioned earlier
‫it's also very useful to be able to see the
‫entire component tree right here because
‫when we have many, many files in a project and dozens
‫or even hundreds of components in our app maybe,
‫then it can become quickly out of hand
‫and we can lose sight which components are where.
‫And so then a component tree can become very handy.
‫So instead of drawing that manually
‫we just come here and there it is.
‫Okay, and that's for now all I had to tell you
‫about these dev tools.
‫Very handy.
‫Make sure that you install them and we will come
‫back to them in future lectures, for sure.