Debug a React app with Visual Studio Code

debugging a react app is not an easy task if you do not use the tools you already have for free and today we're going to see one that is the visual studio code debugger let's start by setting up the debugger but I promise it will be just three clicks the first one head over the run and debug tab you will find it probably empty with this create a lunch. Json file this is the second click and actually if you want to use the arrows here it will just just two clicks but if you want to use your mouse click on web app Chrome this will generate a launch. JM file that is pretty much ready just make sure to fix the port here because it defaults on 8080 if you're using Creator act app it will be probably 3,000 in my case I'm using VD so 5173 hit save and now if you press F5 in your keyboard you see that debugger has started but where is your application well you also need to make sure that the application is running so mpm runev we go back here in the application and there it is but is the debugger actually attached to our application let's find out I can add a break point for example here and now if I go back to the application and I start playing there it is the execution stopped exactly in my debugger so I know that the debugger is attached to my application but what can I do now first of all you can find the variables panel here this will basically show all the variables you can access in this specific point in the execution but is it read only well it is not you can actually write something here for example I can set that on the first Square I you want the letter a and now if I go back in my application it's not there yet but the reason is quite simple I stopped the execution here so react is not actually rendering live because well the application is posted but as soon as I resume my application well then you can find the x that is where I clicked and the letter A which I set manually from the debugger but that's not everything you can do with variables for example if I go back here and stop the execution you can find that there's a watch tab what does watch mean well if you add one it says expression to watch so you can basically write JavaScript here that will evaluate real time let me show you squares in position one is it null and it says true but that's not everything if I change this live with I don't know the number one it now says false if I get back to now it updates real time as you can see so let's continue the execution let me bring this back to n and the application is now running fine so what are those button I was just using well the first one just let's you pause and resume the application but there are many more and let's find their usage so the second one is step over this basically let you step over the next line and in case it's a function cool it steps over which means it execute the function and goes on the next line then we have step into this is similar to step over goes to the next line but if there's a function it just goes inside the function and step out well you may guess it goes outside your function on the first line right after let me show you an example if I remove this debugger here and I set one more there I continue the execution and well first of all you can see this variables is no longer accessible so it throws an error let's close it for now we can continue our demo with the co stack panel here you can clearly see that we're currently in game. TSX at line 11 it's written here and here and you also notice that the handle play function has been called by handle click which has been called by on Square click so if I'm inside this function and I want to get out of it I can use the Step Up button what is going to happen I might expect I will go on handle click that is the function which called this one on the line right after on play why it was on play well that's because this function has been passed and it's handle play you can find it here okay so one play is handle play but if it's confusing again we're now inside handle click which was called by on Square click so if I step out I'm inside on Square click which call this function right here but there are still more to see and well we can head over the break points tab let me resume for a second so we have a clean State and here you can see that there's currently a break point here on game. TS6 and if I add one more when it was previously well all the break points are listed here if you want to remove a breako but you want to keep track of it you can just disable it from here this way you will still have the breakpoint written there but the execution will not stop and this is quite useful if you have some break points which you want to keep track off but you don't want the code to pose there and actually you can do something even better you see this pencil icon right here if I enable again this breakpoint but they still want to only pose under some circumstances well by clicking this icon you can write an expression and only if the expression evaluates to true then the breakpoint will take action otherwise it will be ignored for example I want to stop here only if I which is the index of the clicked cell equals to I don't know two let's see if it works I go back on the application I click on the cell with index zero nothing happened index one nothing happens and now that I click where the index is two well there you have it the debugger stopped on this execution because the condition which I said was I equals to two is actually true and you can also verify it on the watch tab just add a new one here and there you have it this is actually really useful especially in Loops where you don't want to stop at each single execution but you only want to stop if a condition is met for example this one anyway in case you're using Chrome as your browser well you now have two free debuggers the one we just seen on vs code and a debugger on Chrome which you can find a video here where I go through all the features which are similar to vs code but in case you're interested you might want to have a look here and with that said if you like my content you might consider subscribing to my channel what is going to happen is that YouTube will show my videos in your homepage and with that said thanks for watching and see you soon bye

Channel: Dev Leonardo

Views: 17,373

Keywords: development, 2022, tips, tricks, tutorial, howto, opensource, open source, web, javascript, typescript, vscode, Visual Studio Code, github, git, dev, 2023, oss, open source software, react, reactjs, javascrip, js, ts, javascript debug, debug, bug, debugger, javascript debugger, typescript debugger, angular debugger, vue debugger, react debug, vscode debug, vscode debugger, visual studio code debug, debugger visual studio code, vsc

Id: FOXNlZFkbPk

Length: 7min 27sec (447 seconds)

Published: Thu Nov 16 2023