Inspect and Debug React Components for beginners - React Developer Tools Chrome Extension

hello everyone this is Mao and welcome to my channel in today's video I'll be going over ways to debug your react components and react application and this is something I do when use to debug my personal and professional projects ok the first thing you want to do is here I'm using Google Chrome and looking at my Google Chrome extensions I have a react developer tools extension installed and we'll see how we can use this to debug or react applications okay here I'm looking at most school this is a free react learning platform I built to help others learn react quickly and for free so once you got that extension installed you can inspect the page like you would do with any webpage looking at the code behind the scene looking at the Dom tree doesn't really tell us much in terms of react and the components so as you see here on the right I have a new tab called components this is straight from the extension we just installed and as you see here I can go over my components and highlight them and read the names of them much easier then I would do with just looking at the elements the Dom elements ok so I want to look at them this get started button real quickly so I've inspected click on the components and here it is so this is the main component then that's being rendered here clicking on it we can see and inspect the props in real time so here I'm passing an href to point somewhere so this is linked to the router and I'm passing it a text so here we can change this there you go and you can change these props in real time and see things change and here you can see the the hooks involved in this component as well passing styling to this component and I'm passing it a themed object that's great and this section below you can see where this is being rendered and if you want to know where it's located then there you go this is a very super helpful tool that I use on daily basis to debug my react components and it's super easy another thing you want to look at is if you want to see what this component looks like when it's suspended then we just click this full clock watch icon and there it is this is what the component looks like when is suspended there's just a loading State you can inspect the element and you can log this component to the console let's check that out and there it is you can see the props being passed to it the nodes in the location file me very cool another cool thing about this extension is this little icon up here in the top right looks like the react icon on a red background so this is telling us this is in a development since I'm using my localhost this is only the development version of this app inspecting this in the live application so this is going to most cool calm right click and inspecting now we see that our components are named anonymous and we can't really tell what those components are but we still can't figure out the props being passed to them if we look at back at that icon you can tell is telling us that this page is using production build of react very cool and super helpful another tab that comes with this developer tools is the profiler so this allows you to see the performance of your application all you need to do is click start profiling refresh the page and stop it and you get your results very nice another useful scenario to debug is if you have an array of items and you want to inspect each item within that array so getting started here we have a list of questions here let's inspect that real quickly looking at the list of components let's see if I can find that there it is this is the question list is the list of questions we have as you can tell it's beam it's passed all this information like an oath user a match points and a URL and this is the array of questions so looking at one of these items I can simply change the props within that to see what that looks like there it is as you can see that changed the title for this question very useful if you're using the material UI library or any other library to style your components then you can alter those props in real time to see what they look like without having to change much code okay so let's look at that real quickly so here I'm using material UI grid components to style my grids so looking down here at the list of props I can see we have sizes for different screen sizes so for example for the large screen I'm giving it a 6 basically 6 out of 12 in a grid so if I want to spend this across the whole screen I'll just need to change this to a 12 and there you go now spends the whole screen so this is useful to lay out your styling in a real time without having to jump back and forth to your coding okay guys so this concludes my very basic video about debugging react components using the reactive all upper tools extension for Chrome in a future video I'll be looking at exploring different methods to debug a more complex react application until then this is Moe and thank you for watching [Music]

Channel: Code With Mo

Views: 9,930

Rating: 4.9444447 out of 5

Keywords: learn react, developer tools, devtools, inspect, debug, debugging react components, components, material-ui, javascript, MoSkool, learn react for free, courses, lessons, tutorial, beginner, free coding, debugging application, props, chrome extensions, React DevTools, profiler, front-end development, front-end courses, react front-end, learn react web development

Id: mf-b70SQGRI

Length: 6min 41sec (401 seconds)

Published: Sun Jun 07 2020