Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

hi everyone in this video we're going to learn how to become a professional reacts debugger so in this video all particularly going to be learning is how to debug your react application and more particularly your javascript application using the chrome dev tools so i'm going to just go from zero to hero into debugging and using actually the developer of dev tools or the chrome dev tools what it's kind of like shortcuts and how to use it properly to debug your react applications your html kind of like websites and how to debug it of course with the javascript and the v8 engine and all that kind of stuff so if you're stuck with this and if you work with reacts and all that sort of stuff you're going to find a lot of kind of awesome and professional tips in this video to be able to actually debunk your application the right way and of course to be able to use the devtools from scratch so if you're absolute beginners if you just like know a thing or two or nothing about the dev tools and how to use it this video is kind of like for you just to level up your skills from zero to hero to know about the dev tools in an hour and been able to actually catch all of those in a really really quick way and of course just to professionally use this with debugging on a react application of course you're going to be learning all of that you're also going to have like some extensions you can be using and custom react libraries and setups to be able to properly debug your rack application and know the performance pitfalls and everything you need to do to make it better and of course approve it so without further ado guys let's go ahead and get started [Music] so this is the projects we're going to be just like putting into the test and this is what going to be using as like a sample project to debug with and pretty much just look to scrape through this project and make sure to know exactly how depth tools work and how to debug this reacts application this is just basically an anime kind of like list that all it does just like shows the hot anime right now and for this basically all there is actually we created these projects in i guess the video uh before the last one so yeah it was like a pro react thing so you're gonna find the link in description below and all that's gonna happen all we did in that particular video is actually explain how to master reacts from zero to hero and how to become like an advanced developer and react so what it takes what technologies you use and how to use them all together for example with typescript graphql redox and react and all that kind of stuff in a professional level so make sure to watch this video if you're really interested in that then you can come back here with the same project and you can just go in and pick it up and you can continue with the course to know how to debug it as a pro so this is kind of the approach and this is why i chose this particular project to go with in particular so this is as i said before it's a pretty simple anime list it all it does it fetches an api from a graphql and it like displays this list of huge animes that are hot right now they're not like really hot but you know you've got the point um like for this particular point in here what i'm going to be doing this is kind of like pitfalls in design and css and layouts and i also got like the project a little bit kind of set up where it has some wrong kind of requests done to it like non-existent servers or to be able to debug guests throughout this video so this is all intentional and everything going to be seen in his intentional so i'm just going to make it intentional for you guys to be able to follow up and exactly see why we need debugging and why dev tools and how to use them together with react projects and all that kind of stuff around the corner so without further ado let's go ahead and open up depth tools this is pretty much the most sophisticated easiest way uh for this i love to use devtools mainly in the bottom in here if you watch my live videos but for this particular video i would go with like you know left side in here just for you guys to know exactly what i'm doing so devtools is basically uh for those of you who doesn't know what like why chrome dev tools is so powerful and why you need to consider use it uh either today or tomorrow you're probably just going to turn into this because it's a really really powerful set of tools combined together by huge like google developers and the whole community to give you such an awesome result so just google to like google developer tools or dev tools with white's name uh just basically like a set of tools before put together in this like google chrome or chromium project and it just like allows you to debug your application see the code running behind the scenes see everything of how your web application or your website interacts with the outside world with the network and what it kind of like renders behind the scenes from html javascript css like how he interacts with it you can do with the about debugging you can do like auditing or performance testing and you can see how well it does as closely this is pretty much the devtools if you're not familiar with it if you're like absolutely beginner so this is basically what you see if you like go ahead and do this backstory just like f12 control of 12 you're gonna find um this one so you might also have it in the live theme but of course as developers i always love the dark theme and thank god they kind of like provide that theme here and there you go so it looks absolutely amazing so first things first let's get started with the most basic one so you as a developer obviously you're going to just stumble upon kind of like roblox that just going to prevent you from you know doing everything fine to get like hit this roadblocks and you have to debug your application to to see exactly what is going on behind the scenes in the application what is preventing something from going the expected way or for example you've got like really real confusing error going on and you don't know what is causing this error so such something like this something like the devtools can be really really helpful so just to figure out in a couple of minutes just like two a day rather than just spending like a lot of a lot of days and a lot of times trying to figure out how it's going on just by looking at the code so that's that's the main existence and why devtools pretty much exists and the first most easiest and i'm pretty sure a lot of you guys know about this tab it's actually the elements tab and the elements tab is pretty basic tab all it does it has like you know a couple of like sides a couple of like sub tabs if you want to call that here and the most obvious one it is like you know the left one and this is where you basically see all your code and this is just like an html code so if you're familiar with html and you know how web pages work and how web pages interact with each other it's basically just like a full skeleton of xml and this is what an html is and it just basically renders all of that and it tells you exactly what elements is being rendered please in here we got this one and like we got a dev and inside of it a bunch of divs which are that are anime list each one represents an anime and it's being like procedurally generated throughout the network in a full loop so that's basically what he's doing so you can tell exactly what's going on there and likely for us with the new version of chrome i like i think version 90 i brought this new awesome change a new awesome kind of feature which is flexbox kind of layouts elements inspecting which is closing here if you see this little flex kind of thingy uh down here let me just zoom in and i'm pretty sure this is going to be really good so you see these flags kind of label it tells you that this container is a flux container or is a flex item so we weather just like works in a flexbox uh kind of like layout so it tells you that and if you just go over over it so you see there's some like layout kind of changes using this in magenta if you if you can clearly see it so it happens here happens there um it tells you exactly what other containers for example this is the container and it has a bunch of flex items uh or flex you know kind of like children and seriously each one is is kind of marks with a layout if you click on it it just stays there on the web page so you can debug it better so you see like what kind of layout is and how it works um and it's pretty pretty good it's curious in here this is this is what's kind of taken and you can clearly notice that this one if i just go ahead and and kind of like um toggle this one screw see how it does it's not really perfectly centered i want this image and this kind of like title to be centered horizontally and vertically and horizontally it's for standard of course but vertically not really it's not centered so this design is kind of like not really that good plus the text is not centered i believe horizontally if i see it correct there i'm not sure for this one but yes you see some design flaws in here and it's not not working absolutely fine so you can do you can go to the elements or the styles tab which is the most important tab in here always if you're like web developer you will need design and you can use that likely for css flexbox you can go and check out the layout from this kind of tab which is kind of a new but what's the most sophisticated thing you can just go ahead and add your custom style into it to make it look better so for example this one is kind of a container if you open onto it you're going to find the first container which is basically going to be an image and the second one is h6 which is obviously going to be like that title and it is an h5 so for example this async if i just hover over this i'm going to see some kind of margin and this is how how kind of like inspecting works if you see you see some margin on top which is just a tiny bit and there is margin on the bottom which is a lot and to see that in a better way you can go to the computer here you select the elements you see whenever you select an analytic changes and now the currently selected element this is kind of like the whole box layout and how it looks like on that element so the the kind of like blue one here represents the actual width and height of that particular elements whether it's text or image or something then there is padding then there is border and there is margin of course for different boxes if you're familiar with css padding might be like inside of the actual element itself most of the time so for now it's outside that there is border comes and there's margin of course and here's where you see margin bottom is at 34 pixels and on the top what is eight which is making it look really really ugly so if we hover over this as clearly it makes it pretty pretty simple and easy just go ahead and then mark that and see it in action and how it goes so just to fix this pretty simple right i'm going ahead like select h6 i say oh margin i want to i don't want to set margin i already set margin top so i wanna like remove margin to zero then set margins up and now if i go back to computed this clearly margin top stays but margin bottom is gone and it looks better so there is no margin on bottom and just only margin down you go to h5 there's an h5 element indeed and this one is has like an average score of this enemy of how hot it is that's basically what it does so this one is kind of like not visible because it goes out of the boundaries of that particular flexbox and to fix this as clearly there is merging all over the place so all i want to do uh i want to just go into styles again and make sure to h5 say margin to be zero and probably just do like margin um desktop to like two pixels to three pixels something like this and that should kind of like chuck give it a push seriously this one is fixed because we only changed it for the optical image so whenever you do a change on that this kind of changes goes into that particular element this this kind of like a basic stuff but yeah this this all of kind of things all the elements in here whenever you change something on this if you select an image if you don't put it inside of a class or implement in here in that particular case which you can't because those are all css selectors so if you put inside of a css structure it might be applied to all the selectors in the web page but here i'm just saying element.style which is going to be applied to that particular image indeed if you take a look in here there's this title attribute being assigned all the styles we have put in here so this is kind of like an element kind of you know specific to that particular element and this is this is kind of all that happens to make this apply of course this is not this is not a permanent change because whenever you like reload that this is kind of gone and this is just like temporarily just to test and debug it and this is why i'm saying just like this is all about debugging so whenever you finish with that all you've got to do is you're going to copy this go to source code whenever you're actually putting that for example i'm putting it here that is this anime item container there is anime title and i believe this h5 kind of here so i can go ahead and put like style on this and and just go ahead and fix that uh i believe or i believe i can just go and put the style in an object's way so i can just gonna say margin to be zero and margin [Music] top to be um like three pixels right so this is kind of like all we want in that particular case uh for h6 i kind of like reload but i'm i'm not sure yeah i should go ahead and copy this you can copy the whole thing but this is the kind of change i did so make sure to only copy like the change that you need to apply for example from anime title i wanna just gonna put that change uh indeed this one should go on top i don't want to just put margin and all that kind of stuff and if we just go ahead and refresh this page just to make it take effect uh there you go indeed this is already working so every score is being appearing to all the kind of animes and it looks pretty pretty good so far with all that it just like shows the average score and now it's way much much better than it was before pretty cool so how easy is that using these kind of like elements tab and inspecting all that and applying all that kind of stuff and you can even apply like some custom force element state so for example you can force if you select for a particular element using this useful kind of element selector you go to the web page you click on that it selects you this image and you say oh i want this image to be on focus mode and this is going to force it for you or you want it to be a target or you want it to be over which is pretty useful sometimes when you try to apply a css and you want to test it over and over and how it behaves so all of that kind of stuff is kind of really really important for you and probably a lot of you guys already know about that but this is kind of like oriented what you can do with it and this is applies to weather reacting like kind of a project or not there's all this kind of stuff applies to you so this is this is more like a kind of elements kind of friendly thing or beginner friendly stuff that you should know and every single developer should know web developer more particularly should be familiar with so this is more about like how elements tab kind of behave and there's more on the elements tab but this is basically all you need to know about that now the second most important part of all of these and mostly what a lot of people know is actually the console so the console in here is the most important piece of the puzzle and it's kind of like what makes this this kind of dev tools really really useful and helpful in the first place and if you already like work some other kind of like you know development environments for example for android or ios or just embedded system or cuc plus plus everything has a console right so everything has something to log into to debunk and stuff like that and this is the console more related into javascript and and the whole kind of like web page and where your website is going to be running so the console is actually the truth place and the first place you want is like you go ahead and look at when we have like an issue stumble upon a roadblock and anything kind of like that and always always make sure to go this way and right now like my console here has plenty of stuff going on and it's it's just like you know attention when i did those because i wanted to trigger some errors i wanted to like go ahead and cancel stuff to see how beneficial it is now for the console kind of layout it's pretty basic to get started with uh here you can go ahead and see like just a filter kind of quick filter so for example you want to see only warnings or warning info which is pretty pretty useful if you if you kind of like have a pretty kind of messed up console with all this kind of mixed content so this might be able to clear it out and you can go ahead and just like debug it with ease without a headache so this this one is pretty good you can clear the console using this one it clears it right away uh here it tells you like what kind of console you want like what particular context you want to go through but mostly one at the top you want the current web page which is localhost 3000. um there is this one like an expression and you can write an expression in here it's going to be evaluated for you so you can write like a rejects regular expression and whenever you write this one whenever he finds the match of the console is going to be like you know highlighting it for you so you can you can easily debug something it's more like a search but it's more sophisticated um there's a filter in here which is just a search bar kind of like if you search up or you search something i want to go to all messages i want to say like um hello or something go find data only and it's just going to give you data only then you can see what is being logged out into data only and all that sort of stuff so it's kind of useful as well there is uh default levels in here which i already unlocked using but if i just go ahead and get rid of this this default level always like this default so there's verbos uh it's kind of like always disabled so if you want robots there is some some verbosity kind of messages appears in here and there uh sometimes and it's really useful so i really recommend going with this or you can go with default or sometimes you only want to see ears so you want to just like toggle uh everything by errors so you want to just like select errors and all of those go there but what do we recommend just going to use this this kind of like sidebar it makes it much easier to toggle between both here and there now for issues in here sometimes there's some detected issues and kind of like this dev tools kind of give you this um you know insights and what kind of tips you want to just take over here to able to fix these issues it's kind of like pro tips to do and nothing more nothing less and yeah that's that's basically what the interface last one is some kind of like settings in here whether you log xml http requests every single time and this kind of features is kind of really really important i can hide network preserve log and this one it doesn't clearly log seriously or not do not clear the log on page reload or navigation so the log is always preserved uh only just you know it's cleared whenever you force it to clear whenever you click this button or something or you close the dev tools and this is the only way to clear the line and which is pretty useful because if you really like refresh the page log is gone and it's going to be regenerated whenever the new log is appearing and pretty cool so this is this is all the login here happens in the console and mainly this is the console like what is used for r and the other one what the console is really really good at is actually executing javascript on the v8 engine so if you're not familiar with vh engine is basically what javascript runs on is actually the engine that runs on and that allows javascript to run and execute and chrome it uses that engine it's like the v8 engine that runs right here so whenever you put the code in here it's going to be running on like an es kind of pretty sure 5 or something right here running on your browser so you can evaluate any like inline expressions in javascript or even multi-line extractions so you can put functions all sort of stuff so you can do console a lot i don't know why i'm doing console line even the console but you say hello they're still using the console for example we say cons a equals one and if you say a what is a a is one uh you can you can do all the sorts like stuff you can do in javascript and this could be really useful for you if you want to test something real quick for example you just stumble upon something like you want to know how to convert a date object into an iso format and you don't know the exact kind of like method to do it and you want to just go ahead and google that out and you want to just like test it in like you know ready-made javascript environment before copying it into your production ready code to do that pretty simple just go and do new dates and you pass in whatever object for example you do like oh i'm gonna look into this and it gives you this really awesome list within two license and everything so you want it to an iso string sweet you click enter and it gives you the iso string now we know the exact format you need to run and what your returns and all that sort of stuff and it makes it much much easier to work with and with this one if like react developer you know so refresh that it has a plenty of stuff going on in here in the console for example i'm like fetching some photos from like an api and logging all of those photos so whenever the photos comes back i know exactly like the photos are coming and i know i can debug those uh here and there for example i got some requests going on so there's a 404 in here i know that this get request didn't pass in and you take a look on the stack trace and it tells me exactly from where this request has started before and where the end and and where the error exactly happened all that sort of stuff that i really do need so it's curious in here happens uh this has been dispatched from axios which indeed i'm using and uh for example here you got some warnings going on with reacts because react has this kind of black warning engine and like where you should use key prop for example if you use redux which is in case this app uses redox i'm using redox logger by the way here and this being log in every single stage change which is pretty useful as well to debug for example you did a set change or you did a dispatch for redox and for some reason redox didn't understand that dispatch so if you don't see that what kind of login here it means the dispatch never did happen which means the data has never been payloaded and never been sent and you know that makes sense right so you know exactly what's what's going to look for in your code and to fix it's pretty straightforward so all of that kind of stuff really really help you to get it the right way especially with reacts and all that kind of happens right here with that code so all i'm doing is actually doing these console logs in here and and that pretty pretty making it really really smooth uh with all the console logs and of course the interfacing here makes it pretty easy to go through filters your live expressions and all that and yeah what could i say this is not super sweet to be able to access something like this the other most important tab of all of these is actually the network tab and then that's work tab is it's pretty self-explanatory from the name you know that this is kind of like where you see the network calls and everything that happens behind the scenes or the application in terms of networking or like what kind of like http request is being sent and received in terms of http requests to websock requests or all stuff that goes into the network so this is where you actually debug your app in terms of that and you see every single request is being you know going through your application outside of your application and coming through uh into like api restful apis into your server and what is going on exactly and what is being loaded and what is being not loaded and the errors and all that sort of stuff so the network tab in here makes it pretty pretty easy to look what's going on [Music] so the interface is pretty straightforward you see for example your filter so you're just going to look for something if you want to look for look for only graphql you get that list uh you can hide data urls but really not that useful and here you select exactly what type of like network call you want to see for example or or xhr which is just like a normal http request that's going to require some json data so this is what it is here if you want only javascript bundles being loaded or css files or images here got plenty of this anime images or media in here including like videos document fonts websocket connection which is having some in here with websockets just like a development server um yeah all sorts of stuff in here you can see but you want to see oh you got the point right here and for the actual timeline that you can you can take a look on this is what the timeline is and actually when he started working with that he didn't know exactly why the timeline is used and why it doesn't even exist but just like going through this you know all the time and working with it i come to realize that how important the timeline is and why you actually need to use the timeline actually the timeline tells you how performance and what the kind of the sequential order the network tabs have been fired on so for example you you start actually your application the first step you do you go fetch some anime list then you go fetch the images for example then you go fetch i don't know the titles or something like that then you can do another call so this is the sequential order it tells it like which one started first and which one ended last and you know the sequential order and how many kind of like seconds or milliseconds generally millisecond took to do this kind of like network call so for example if you refresh that screw see there is this is kind of like you know lines going through in here uh telling us exactly what's going on it's and he's jumped all of this to like a thousand millisecond to ten thousand milliseconds twelve thousand fourteen thousand all of these just because of like we got plenty of images being loaded in here we got more than 50 and all of these images are pretty huge so that's why you're taking all of that in here like 20 000 ml can be just like uh you know put a lot like you know this five seconds and second going up and down and you can select just a portion excuse me this selects the portion it tells you like on this portion what kind of requests have been started going through and if you take a look on the waterfall for example here for like loading let's say go loading this graphql empty list um so if you view that pretty sure uh so yeah preview that this is where we get the anime kind of list so if we go back for example for this one you take a look on the uh like the actual water flow there and what you get is actually tells you exactly how the request is started so we queued at four five four milliseconds then it stalled for this kind of like 0 64 millisecond then when the request is started and sends is 0.16 milliseconds this is the duration it took to actually send the request then works into time to first bite which is just like the first bike being received from the server like the first bind of response from the server this is where it happens it shows exactly the time and you can easily understand how this request is being done and if you've got like for example a performance issue or something you can go ahead and come back in here take a look like request one by one and you know exactly which request is taking more time than you should you see oh the the ttfp or the time to first buy from the server is taking longer than expected so that should be a problem for the server right and this is what happened actually sometime with a production application was running on with some like an enterprise it was working on and yeah i just been able to figure it out just from this network tab and he knew it exactly that the server had to fix such an issue and it did go fixed on the server and it works absolutely perfect just oh with the help of this network tab and it made it super super easy and of course you can take a look on all the sort of stuff in here for example like what hitters general requests uh response haters being sent and received like here the actual response here i received from this kind of request and here what the request here is are being sent and this mainly because the graphql so there's some custom hitters and here you see like the general stuff like the ip address of that particular remote server and what is the server is actually like requesting for example right now we are requesting a png image so the accept range should be a binds and the response should be like a kind of a type of bias the preview is going to preview the image uh the response in here is going to be like a binary response that's why you can't see it but it's basically just an image and of course you can see the timing the waterfall and the initiator in here there is uh there is an initiator because the image didn't just like finish up i guess but uh yeah if you select something else you can take a look on the initiator as clearly see like from where the requests start in the stock trays and for cookies if this one has a cookie is being returned it's set on your you know on your local machine in here it tells you that too response cookies and it tells you like takes uh expires for 12 hours and it's being from graphqlist.com or co it tells you all the details you know and you can debug all that sort of stuff the network tab it's kind of like very very powerful in that terms and you can see exactly everything going on behind the scenes on your application in terms of like networking so yeah uh if you don't use something like this i would really recommend uh because you know you got all that sort of stuff in here plus you can throw this and you can test it on different network connections and you can test your application in this kind of like throwing way where you throttle the network for example slow 3g and see how your application behaves in that if it kind of like times out if it does it does it display errors or does it just like fall back to something or something like that you know all that kind of test that should go through and stress testing and all that so it looks looks amazing to work with with something like this especially the network tab so for example here let's try to debug something i already like did a request here and this is kind of like a wrong domain so let me go and select this so this graphql in antelis.com has a status of 404 which is not found and i'm doing an xhr request which is basically an http request so we take a look on this headers i'm sending a get request to this to this particular domain name or to this api url this is a remote address i'm sending this couple of like requests headers and all of that and it responded back with 404 so let's say why does this is responding with 404 you can just go ahead if the server is friendly enough and he's smart enough he knows that and he tells you oh not found or something like this but you still don't really know exactly why and here it's telling you why because you use post requests to access graphql subdomain and you only accept post requests in here because it's used as kind of like graphql but let's say it's kind of like a different scenario a kind of different domain or something why this is returning a 404 so if we go back to our code we go index in here where the actual kind of like request is being initiated we've got here for example slow fetch and this is like fetching images you can go and see like this is wrong fetch and this one is method it's kind of like particular about fetching this kind of like wrong edges i'm doing a get request to that particularly and get request doesn't exist so you can come back oh a get request doesn't exist that's that's pretty weird and it tells you that because it's 404 and status means not found and all that sort of stuff so you know immediately that this kind of demean or this kind of routes on the api doesn't exist so you can just either get rid of this or change it or you can if you change this to like a post with a proper kind of like body it will work with you but i think on that that should be that should be fixed in one way or another so that's that's a cool thing that the network tab is talking about other than that if you didn't have a network tab it didn't take a look on it you wouldn't know that and we just like down in and there is no documentation you're still doubting it's still google stuff and all kind of like rubbish right so this one is really really important another case if you take a look on the photos take a look on the timing the photos the content dialogue is taking forever so the full kind of time took to download or get the full list of photos which is like kind of like 5 000 photo is kind of like tremendous right if you take a look on it we got almost 500 milliseconds which is kind of like um you know 0.5 seconds like a half second to load us it might be more in some cases if if the filters are so large or if we got more than like a thousand or pretty much 10 000 or million or something like that so why all of that is happening if take a look on it you can easily know dns lookup took 75 this is not our problem ssl not our problem so what we can fix pretty much is the content download and server and pretty much sometimes the queue in that could be like saved by us in the front end card in our server code and mainly we can change the server because this one is not controlled by us but screw c taking forever to download this and the ttfp is taking like 82 milliseconds which is kind of decent but downloading the content is not decent at all and indeed this one is slow fetch it's pretty much doing this you're getting requests and waiting for that then it prints in all the photos they're just like doing a console log for this so you see you can easily debug what is going on behind the scenes internet workshop i just want to show you like what is going on in here and why you can use this and how you can pretty much use it in a real world example just go ahead and debug this and make it work the right way so yeah what you see in here looks amazing so we can get rid of that but i mean yeah so you know exactly what's going on here and why i did use all of that just to make you exactly guys uh like explain what is going on behind the scenes and how to use the network tab properly the other awesome tab is the sources tab and from its name you know that this is more related to your projects and and you see actually files in in development is all that kind of stuff so here you can see the source code of your whole foreign application how it's running and i mean this because this one is running development so it doesn't have any angular vocation or going on or minification so it doesn't have any code scrambling and all that the code is is you know that sample is the same as we i'm having it here it's being get sent out to the server in here it's being like you know served throughout this port so yeah you can you can go and just like static to that so for example this line held uh so the context which is the current context of running on localhost so you can go for example slamping with and this is going to give you the full path to your kind of folder where the project it is source or tutorials and you can get for example reacts project then src and this is this is pretty much where it is so for example we can go go ahead and check out um up tsx for example so let me just go and close all of this and yeah so yeah this is pretty much the file we got here it's pretty much the same one we got right here so you can clearly see it and the most important part of all these you can go ahead and put breakpoints and you can you can actually break and what do you mean by breakpoints it's actually like a point uh or a line on a code like a marker in the code for example you mark this uh for example five or whatever line in here and whenever the code is being executed by the v8 engine by the javascript engine whenever you find this kind of line it stops working and it kind of like goes into debugging mode then it's like you know you've been you will be able to take a look on the call stack the scope uh you'll be able to like navigate see like what what kind of function you stopped in and how the call stack is is proceeding the current actually local scope so what are like the variables that are including the scope and you can debug like what the values exist in these variables and it's pretty pretty useful pretty much like the most useful thing you can find in debugging nowadays it's pretty much breakpoint so it never dies always makes you feel satisfied and it always does the job perfectly so you can put like breakpoints in here you can reload or something and if you break points to a function that always like you know going to be executed by a button for example this one we've got this reload button which is bound to a particular function that is going to be running whenever you click on this so it reloads everything it goes fetch it from the api so if i break point inside of that function and click on this and whatever it finds that line is just going to stop so you can put it in here on the sources but luckily for us with vs code with reacts with all the kind of technologies and and need to kind of improve this stuff you can do this from vs code and of course from build cps code we all love it we can go to the run and debug tab in here and you can go ahead and debug this by creating a script so like firstly you're gonna gonna find the scripts you can do an ad configuration but you can go and create one afterwards you can go ahead and like it's gonna pop you with this kind of launch.json that is you know configuration telling you how to launch each application so basically all you need to do just like keep everything the same here or you have to screen configure you have to like make this request to be launched in order to be able to launch a brand new instance of google chrome and you need to put the url in here correctly of your application my application is currently running on 3000 so make sure you do it right and you can like go ahead and point it to the web browsing here but it's really not that necessary so after doing all of that just click on this green icon and it's going to launch a new instance of google chrome's qc and this one is going to be a debugging session so this one is going to all run in the debugging section you can go to inspection you can do all sorts of stuff but this one is actually the session is started on vs code and you can do the same thing as you would do on kind of like the sources tab so the same thing that could be going inside of like uh what is the sources tab in here and in terms of debugging and all that sort of stuff you can do with the same thing right here and this is this is pretty much your sources tab you can see variables you can see the watch here uh there for example i don't need i don't need those um i mean i'll remove those yeah so you can go and just see the watch the cool stack the breakpoint you can see the breakpoints inside of your application so let's say how go ahead into for example we got fetch all in here and retro is going to be cold like some time for example i want to fetch anime page then i want to break points on the wrong kind of fetch right seriously this is the breakpoint on line 58 and it just like preserves the line and if take a look on brick point there's a single breakpoint here on index.tsx tells you a path of it and you can go ahead and uncut exceptions so whenever there's an uncalled exception by some another module or something that it's not by your code but it's happening on the current running scope of your program so if anything happen you can go ahead and take this and whatever there's an end card exception that is you know in cards it's going to be like you know it's going to stop the debugger off your application it's going to tell you oh there's an expand code except change this is where it happens it's mostly not really good but if you really want to face um kind of an encode bots and and performance issues in your application i really recommend going and taking this and start debugging and digging why this kind of encode exceptions are happening in the first place so i only want this breakpoint and let's go ahead and run you remember this function is going to be running every single time i'm clicking on this particular button so to do that whenever i reload as you see i it just immediately got me into this brick point because it reached this big point if you take a look on the browser the browser is still the same right there's no changes but the browser is in debugging mode which means everything is being called out into debugging screws in here for the variables it tells us all the variables that exist which is absolutely amazing so take a look on local there's fetch so the current this is undefined there's uh closures all the stuff for example let's move this this kind of um breakpoint here i want to put it inside of like the slow fetch i want to put it like here into the console log right i don't remove this i want to go ahead and continue which is going to continue and stumble upon the next breakpoint which is this one you know logically this is what is going to happen and for the variables local variables the current local variable on this function that this breakpoint is going to exist on is actually photos so photos this is what it has it has a response headers request which is basically an axios response for closures which is the current closure so this is a function it's not a function which means a closure so we've got this kind of brick point tones that's what closure has and this closure has all this function fetch all face anime exclusive anime page set anime all that sort of stuff global which is just a bare window it tells us all the functions and and kind of like methods and variables exist in that particular kind of context you see through this in here it gives you everything that you need to debug your application the right way so whether reacts or normal javascript it tells you exactly what's going on and with the call stack you got everything you need to be able to trace it back to the source of truth if there any errors happen or something like that so either ways you can use the sources kind of tab which i do kind of recommend and then kind of like recommend more using vs code whenever you have the chance to because it's more sophisticated and you have everything in a single place to be able to control it the way you want to be so yeah absolutely amazing to use something like this uh with kind of like debugging especially google chrome and just one thing that you totally forgot about mentioning if this is doesn't work with you on vs code make sure you go and install the extension which is called chrome debugger so debugger for chrome i believe this one uh make sure to install this and so it will work and will make vs code work uh with chrome and being able to debug it so yeah looks looks absolutely amazing so far and for react particularly there is like kind of chrome extensions anything exists for firefox too and this kind of extensions that allows you to expand the kind of chrome devtools and add ability to you know be able to like add kind of like react dev tools to be able to debug and inspect all the reactive system and how everything is working inside of like react application it's kind of like really sophisticated it makes it work absolutely amazing something like the react dev tools seriously this one is extension i'm using it's called like react dev tools just like react devtools from google chrome and this one makes it really really amazing so this extensions basically just like tells you uh right now it kind of like here if you click on it it tells you whether you're running a development build of reacts or a production-ready build just tells you about that but as soon as you open your dev tools you're gonna see new tabs being added for you from that so there's basically two new tabs in here there's three but the the actual kind of like extension it does adds this two new tab so the components tab this one it basically gives you the whole tree of components that is being rendered on the current page only on the current page just like the page in here it doesn't render the whole app because you might have like a multi-page application of like react application so it only gives you the like the roots and the whole render tree here to inspect and this is more sophisticated than the elements in kind of tab because this one is more particularly into react this kind of gives you like what what props this component is going to receive the actual components name rather than the like bare minimum html elements or html tags so for example this root app that is inside of a provider which is um you know our state provider there is redux provider a polar provider and a polar context and there is the actual up which is the exact name in here it matches our components so take a look on it up in here it has like this components name so it gives you more ways and it just gives you the potential to be able to debug it exactly the way it looks here without just like you know controversy and just like look twice and here it tells you exactly what is being rendered in the style there is a home page component and for the up in here it tells you exactly what props he receives for now there's none because we have nothing and this one is rendered by the root application and it gives you like the react-dom version and like the line this is being actually created and rendered on and create legacy route like which switch functions stack is being called by this uh if you take a look on the homepage as well they've got a couple of stuff so what hooks is being used and this one is more like functional components hooks so it tells you they use an up dispatch hook and there is a dispatch and he access the store free docs so you know what's going on and it gives you much of much of details all that now for example for the hot anime and props because i'm using redux so you won't find a lot of props for the hooks you're going to find a lot because i'm using a selector i'm selecting from a particular stage so it's telling me that here and tell me i'm selecting i'm having selector and having an anime page and the anime page lecture states on the redox store has all of this data and it has the full media list it has a full array so i can know oh the states and the redox store is being populated with dia so if i have an issue of data not being displayed or rendered correctly i might not be considering that the issue would be on the on the redux store but rather something else not rendering properly or a normal version or anything kind of like that so this one really useful screw c and you can dig deeper on the full tree and see it i can go even use the selection element so it selects particular elements and it tells you exactly what aim is selected and it still gives you all that and also there's the profiler and the profiler in here is more like kind of an advanced usage you still can use that but it's really more like you know how to kind of like test the performance of react of your particular react application working together so you can stop profiling here you can start doing a couple of stuff in the application and you see how performant that is and you know you see the ranks compared to other applications all that sort of stuff so yeah this is more like auditing and the depth tools so this this kind of extension brings all of that and most of the times for me when i'm working with react application i go with this kind of like components tab because it really makes a lot of sense to use here other than just using the elements tab because it's it's much easier to go ahead and debug using the real name you're actually having your components on your code rather than just you know going to bare minimum kind of like devs and all that it doesn't really make that much sense but yeah makes makes a lot of cool way to debunk this the second extension which you have already probably noticed which is reacts redux so the redux dev tools uh it's more like you know an extension that gives you a particular special dev tools to debug redux so you can open up chrome devtools as well you go access redox tab and you're going to find all this kind of like huge and tremendous kind of interface to work with so this one is basically going to give you the full stores uh it's going to tell you like what kind of reducers and actions you have for example for the actions of having home page set anime page which is a you know two actions i'm here and this kind of like gives you the inspection like when those actions have been called so for example after like 0.002 then this one happened 0 1.14 seconds so it tells you exactly when did that happen and here for example on the tree like the current store tree tells you that this anime page already did have no but right now it does have this this media types thingy take a look on a railway tells you the full data so it tells you exactly how to do that if you want to just go ahead and see the state just the states or you don't care about actually the difference so you can take a look at the media immediately and see what's going on about tracing as well you can run you can run a couple of tests in here you can just like a use actually just in here with with testing you can test the redox stored immediately here on the console without going into the code uh take a look on actions and what kind of payloads are going to be carrying around even take a look on charts and you know i exactly know what kind of like child is being called by what and what is the type name and all that of that and especially if you have graphql in particular in this case we have graphql it's clearly see graphql sometimes has a lot of stuff going on behind the scenes and this kind of way clears you all the way makes it pretty simple and really really straight to the point to just go ahead and learn about that and plenty of stuff going on i'm pretty sure a lot of you might be able to just go ahead and like you know just go through this but i'm telling you if you know redox if you know you use redux logs if you want to use the redux devs tool it doesn't really make a lot of sense just like how you use redux so make sure you go ahead and use this because it really really is that important and really is that that's kind of awesome to work with and for reacts as well there's other kind of like custom libraries built only for debugging which kind of like tells you um how you can you know make your application more performance and how what you can optimize your application and what's kind of like pitfalls going on behind this in your application so for example there's a really awesome library that i really enjoy using i usually i use it a lot because most of the deox application especially the big reacts project has this kind of problem where there's multiple rerenders that doesn't make any sense because a rerender only happens whenever you update the stage or the kind of component like receives a new props right uh and i'm not speaking about pure components if you're familiar with that but yeah this kind of problem happens a lot with react application where you find the components where it shouldn't actually do a re-render but it's doing a couple free renders like two three four sometimes a lot which is going to make it really bad and it's really bad practice you're going to follow up this and the performance is going to be like drowning and you don't want to do that in a really big uh production-ready application so there's some kind of like libraries something like this it's called um let me just gonna put that i don't think i can put it there uh but anyway so this one is called why did you render it's it's currently being um like supported and maintained by well done software there's a couple of other forks but this one is is the currently being supported and this one it tells you exactly why that component did render and whenever a component did re-render which is this one is going to like console logins and it tells you why it did read render and should it re-render or not if if it's a normal re-render if the state did update and everything that's good right but if it's not intentional re-render it so it's gonna just like console log in and tell you oh there's a read rendering make sure to go in and look into this why this is happening and try to fix it so this library is really useful so from the stars you can clearly notice that but uh the main actually way to use this is just like you know hook it up into your application it's to immediately start texting or pretty much like detecting if there's any re-renders on your application it's going to console log it into the pretty much the the devtools console so to install this you can go ahead and use yarn and all that sort of stuff which i already added by the way but let me just go ahead and show you exactly how to do it so you just go ahead and paste that you add white dd re-render here and this one is kind of like have a special way to be able to integrate it with your application for us for my particular case and i'm i'm saying from my particular case in here i'm using create react up or the cra cli like the gen the project generated by that cli so what's happened this one is kind of like easy but it totally depends on how you are pretty much setting up your project so you have webpack you got a different different way to hook this up but for me cra so this kind of like there is this kind of guide which i already got here somewhere so the guide in here has some kind of configuration so a spare of these comments in here what it tells you how to install crayco and craco is more like a configuration override for cra this is awesome tool as well so you have to go and install kureco and you put it critical configuration and that's it so to install qriko it's pretty simple so you just go here you do yarn and craco for slash graco and this one is going to install you craco core and curriculus as before it's kind of like a replacement for react script if you're familiar with that what like create react app comes with bundled so it tells you where also to override webpack configuration with this on the fly so you go back to the pack.json and remember before what we did have i already did change those but before there was like something like this so the ax script starts so to be able to use grey code just change all of these from react script to craco and make sure to only change it for three of these because ejects is completely different topic so just don't change this change all of these to craco and well done that's that's basically all you need to do for that just to make sure cracker works and for the configuration to be able to integrate why did you render so just to integrate that you have this specific configuration so you go back to this thread you go here you copy it and you can paste it all in there and that's it so just start basically copy paste it just put the configuration inside like copy.create or craco.config.js and boom hallelujah you've got this working and absolutely amazingly just doing the magic sweet so we got critical configured and everything make sure to rerun the application make sure you just like stop the server and run it using quaker which i already did of course and now to make sure that you use this one so if you go back into this there's a couple stuff so you have to create this why did you like re-render or why did you like render for the same thing so you create this file you put this one in here make sure to import it first before any other importing application and that's it well done so i already did those as well why did you re-render what did you render whatever you kind of call it so you just put in this one i'm putting this reference in here for typescript because i'm using typescript on my projects and that is all so go back into the main entry point of your application which is my case index.tsx and you put it on top just right on top even before anything otherwise it won't work with you so just on top and there and boom that's it so whenever we run into something this is going to work and essentially if you see me in here i'm having two kind of calls to the react render so if i remove this which is usually i should only do react on render one and that's it and that should work perfectly now if i go back into my application which is um which is just right here so if you take a look on this we refresh that the application should work fine if we go back in the console i'm not gonna see anything kind of like intentional or something i'm gonna see everything absolutely fine right so yeah there's no re-rendering nothing like that and if i go back in here for example go to the application let's say this particular component what i want to do i want to test if this particular component has any unintentional re-renders which means what i mean by intentional re-render is actually this application did not or this particular up component did not receive a new perhaps neither did it like update the state so we shouldn't re-render that's that's right of course so this is how the actual logic reacts so you shouldn't re-render if none of these did happen none of the states updated another new props have been received so why would you re-render so i'm just adding this static one so you do app.y did you re-render or why did you render equals to true if you're having a class component you can add it as a static one and that's it and this one this component is going to be tracked so whenever you want to track a particular component make sure to add this into it and that should work for you so if we go back now let's go ahead and intentionally render two times which means i'm gonna render the dom i'm gonna do the same react component in here twice and this should be problematic because it's gonna like cause a render first then a re-render which is bad so we go ahead and refresh that it's clear to see if take a look on the up and this is being like being notified from like why like did you render if i'm spelling that right so this is here having issues so on up function which is our up component we render it because the props object itself changes but its values are equal so it's doing a shallow equal and all the values are equal so this could have been avoided by making the component pure or by preventing its father from re-rendering more info you can just take a professional info and this is kind of like you know an expectation of what the previous props and the next props equals and rendered by the roots app and this is actually the appearance of this up so this root up is kind of like responsible for re-rendering this and of course we know exactly what's going on because we are attentionally doing this but in another application you're going to see a lot of kind of logs and why did that happen if you've got a lot of props a lot of state to manage you know exactly what's going on and even works with redox so that is kind of like really sweet to be able to work with something like this and being able to actually debug something like this this way in this advanced and last but not least what pretty much every single developer should run whether you're running a react application or normal javascript website or even an html website so this kind of like audit test that comes with the chrome dev tools is really really great so all you have to click on the escape key or you can just like you know have it from here then you go ahead and access the lighthouse so the lighthouse is kind of like an auditing way of of pretty much generating reports and testing your up website of how it works and like you know categories i'm going to test performance progressive web application or pwa best practices there is accessibility and there is seo so i'm going to test my application in all these kind of fields and tell how well it does in this kind of particular fields and tell it like you know what i need to improve and it's pretty much going to give you a lot of advices and kind of like a lot of professional links just going to follow to fix you know programmatic issues or middle links or you know broken links or you know performance issues and all of that so make sure it's like desktop if you want mobile you can select it and you can go ahead and generate a report and likely for us because my website is just a single page and it's pretty straightforward so we're gonna just like have this lighthouse gather information real quickly but if you have a really big application this is gonna take a couple of time and indeed a couple of minutes to go ahead and go gather the whole application so um almost done in huge we rendering the application is generating the kind of reports and there you go so we already got the report in here so for example we got performance 70 percent um best practice you got 93 and all those are like from zero to 100 so seo is 91 which is we're good good and here matrix it gives you exactly what's going on for example speed index and largest conscious for pain so this is actually when the first byte with when the first color is being painted on the browser uh there is like time to interact which is good total blocking time 90 millisecond so that's good as well and if you go back a little bit see there's like an opportunity here why you need to improve and you know diagnostics in here tells you exactly what is going on and what you need to avoid for example avoid numbers network payloads for example in this one we got huge network payloads all because the images were loaded in and because the images are super huge and also because the javascripts in here it's not minified because you were running a development kind of version but if you run this in production this wouldn't be a problem because most of the times it's going to be minified and it's going to be way much less than that so we also got image elements do not have an explicit width and height so you have to set that and you can go through all of these and and it's kind of really really important for example accessibility in here tells you what you need to know and what you need to like improve in your application in order to be able to make it more accessible to people in terms of seo and search engine optimization and and people or user experience friendly and all that sort of stuff so it gives you a lot of stuff and even gives you like runtime settings that is currently being running on and what could a web server be able to like detect so you know hero lighthouse and you can go ahead and generate this i believe to a pdf or something you can save an html json so i mean this one this is pretty well made up so i actually as a developer in my own advice so whenever i work on like a production application most of the time if i code a feature or add some kind of you know kind of huge something into the application what i do just straight through go to the lighthouse run the lighthouse and see what kind of changes they did and if any kind of back practices if any kind of black bad practices sorry are introduced in the application i go straight through and try to fix them that can make my chance so yeah that would make it absolutely more kind of like self-explanatory to make it work that way so hope you guys enjoyed this one this kind of like i'm pretty sure uh there should be a full kind of master thing of debugging with chrome dev tools and reacts and you know custom extensions and custom libraries to make it work the right way and how to debunk your react application like a professional so i hope you guys enjoyed this one hope you guys really really like this kind of like content and now hope you guys be like a real pro debuggers and be able to debug your application without any kind of hassles so anyway thank you guys for watching this before hope you guys enjoyed it and catch you all hopefully in the next ones [Music] [Music] you

Channel: CoderOne

Views: 7,565

Keywords: React, Javascript, Pro React, Master React, Debug React, Debug React apps, React app debugging, Debug like a pro, Javascript debugging, Debugging tools, Debugging techniques, Find bugs, Web dev debugging, Master Debugging beginners, Debugging beginners, React for beginners, Master React from scratch, Pro React to advanced, Advanced React, React full app, Chrome devTools, developer tools, devTools debugging, Why debugging, understand bugs, find bugs, why bugs, fix errors

Id: _rnxOD9NKAs

Length: 61min 52sec (3712 seconds)

Published: Sun May 16 2021