Full React Tutorial #9 - Intro to React Dev Tools

Key Takeaways

alright and gang so before we go any further i just wanted to take a quick side step and let you know about an extension for chrome and firefox called react developer tools and you can find it for chrome on the chrome store right here just click on the install button mine says remove because it's already installed and you can also get it for firefox by going to the firefox add-ons library and installing it right here so i'll leave the link to both of these pages down below so you can install whichever one you need so what react developer tools do for us is integrate with the browser development tools and give us extra features that we can use on any website created with react so if we take a look over here we can see two extra tabs we have components and profiler now the one i use the most is components right here and this basically gives us a component diagram or component tree of our current application so if we're just taking nosy at these things if we hover over one of these different components we get some extra information about that component down below so this first one right here this is to do with props now we're not covered props yet so this isn't going to make much sense at the minute so we'll move on for now and down here we can see the source file we also get some tabs over on the right as well or rather icons now if we click on this one this is to do with suspense which is kind of beyond the scope of this tutorial this one right here we can click on this to find whatever dom element this represents in the elements tab so if i click on this then it grabs us this div with the class of app and remember that is the root element inside the app component right here so it finds us that element now if i did that for a different component for example to navbar if i click on this it grabs us the nav bar okay okay so this one right here this logs all of the data about the components to the console so if i was to click on this then go to the console we can see all of this information about the app component including any props the dom nodes the location of the file etc so let's go back to components and then finally this thing right here we can view the source file so the javascript file of this component in the dev tools as well okay so if we click on the home component this is going to be a bit more interesting because we have data inside the home component remember we have this thing right here we have these two pieces of state and they change when we click on this button so if i now come down here we can see this property called hooks and we have a state hook remember this is a hook use state so it says we have a state for luigi and one for this value 30. now if i was to click on this button well let's refresh first because they're not the initial values i'm going to refresh and then click on home we can see now this is the state mario and 25 if i click on this we can see hopefully the state change down here as well so this tracks whatever the state of this component is so if we want to find that out quickly we can do by going to this components tab and looking at the hooks and the state okay so what about if we click on this thing right here log this component to the console so if we click on that and then go to the console and expand this information now we can see this property as well hooks and this is an array of data each one an object and each object represents the piece of state that we have so we have right here the value luigi and each one has an id as well and it says whether the state is editable which it is we can change it if we want to awesome so that's some extra information that we have about each component so that's just a brief introduction to react dev tools i did want to let you know about this tool which can be really helpful when you're developing testing or debugging your react applications now the best way to become familiar with this is to just dive in and play around with it and maybe we'll be jumping in from time to time too especially when we learn about props so we can see this value right here