Javascript Debugging - Full Course

okay you guys are here let's begin so today our topic of discussion is debugger a tool for debugging and in this video we are gonna cover debugger for javascript typescript node.js and react.js as well so there's a lot to learn ahead let's begin hey man you told me it's a tool for debugging but what the heck is debugging so for all of those who don't know let me tell you that debugging is a process to find bugs in your code yeah finding bugs in your code and also by bugs i mean logical errors okay but how exactly we debug our code what is the process what is the strategy well i want you to answer the simple question when do you say that there is a logical error in your code when do you say it i'm guessing probably when your code doesn't execute according to your logic according to your algorithm as you have expected it to be so i would say we have logical errors in our code when the flow of execution of a code gone wrong so in order to find logical errors in your code we need to examine the flow of execution of code and there we got a new definition of debugging debugging is nothing but a process to examine the flow of execution of our code and if we can examine the flow of execution or code we can easily find the logical errors so let's take an example of simple web page that has some logical errors and try to debug it let's go okay so we have a web page here what does it do it simply takes the first name and the last name of someone and greet him so if i give michael and jackson it should greet hey michael's exit now let's try oops it's not doing it the right way the first name and the last name got switched up so it's a logical error in our code so let's debug it in order to debug it we have to find the line where we are sending the alert and that's where there it is line number nine okay but it looks good i think uh look at that the fname variable and the name variable are in the right sequence as they should be that means the problem is in their value the f name and the l name variables are getting the wrong values and they're getting their values from these two variables now let's try to console log these two variables to find out what's going wrong okay so [Music] let's just console dot log element l name element and our beloved semicolon let's run it again oh before that i would like to tell you that i'm using a extension that is live server this extension is very handy at we don't need to refresh our code every time we edit it it just do it automatically for us but i'm not using this extension just for this functionality when you debug your html files with javascript files you need this extension to run your code in debugger so make sure you have it okay without further delay let's give it a test again oh uh before that open the console let me expand it for you looks good and here's our console okay and we have these two dom elements in our console the first element is a dom element with the id f name but it has the placeholder last name and as you can see in the left it's pointing towards the last name so there was a logical error in our html file and we were able to debug it so let's correct it and rerun our code okay and there we have the error f name and l name and it automatically refreshed as i told you let's try it out wow so you just did your first debugging congratulations hold on what we've just covered is debugging via console log and it's a layman's way for debugging we're gonna cover other efficient methods as well and the next method in our list is wait for it debugger keyword of javascript so let's see what is it let's talk about this interesting keyword for that i need to replace my console log with this keyword debugger and see what happens let me fill the values uh before that let me just open the console and expand it for you okay now there we go this interface you're looking at is called the chrome debugger which is the default debugger for chrome browser and here you can see that the code stops executing it has paused its execution as it reaches the keyword debugger that means we are getting the control over the flow of execution of the code but we are not getting the values of the variables like the f name and the l name that we are getting before using console.log actually let me tell you we are getting these values as well this is the beauty of debugger and for that reason i want to grab your attention towards this scope paddle in this panel you can see the current values of all the variables in your code until this point so it simply means that we don't need to console log anymore look at the value of f name and l name variables here yes they are correct we have already corrected our mistake a silly mistake in the html file also note that they are in local scope because they are a part of our current function and by current function i mean the function at which at which our execution is passed on the other hand f name element and l name element these two dom elements are in the script scope because they are defined inside a script index.js but they are outside the scope of current function that's why they reside in script scope but not in the local scope then we have the global scope and it contains all the global variables of our group now focus on to the next panel that is call stack this one it basically show you the current status of function call stack you might you guys might know what is function call strike or if you don't know in other words i would say using this panel you can keep an eye on which function is being called by which function for example when i click on this greet button it triggers a function called on click which then calls a function handle click here i have defined it which then calls our function greet which is at the top now let me tell you one thing that the current function that means the one that has been paused will be always at the top of the call stack that's why greet function is at the top of the call stack with this arrow mentioning that you have been paused on this function now the third important panel of our discussion is watch panel this is my favorite parallel you're gonna use this panel every time you debug your code using this panel you can specify variable names to watch their values to watch a variable you need to add that variable let's add fname element if name element see we got its value but wait let me show you one another trick you guys know that fname element is a input term element and these input dom elements have a property called value let's try to access that property in the watch panel and see whether we can get the value or not boom we are getting the values so that means that in the watch panel we we are not only getting the variables values but also their property values as well now to resume the execution of the script you need to press this play button the script start executing normally as it should be it will again pause at the instance where it will encounter this keyword keyword debugger but for this particular function or this particular script we just have one debugger instance and it will not encounter any other and just execute normally let's try it out yeah you can see that but if i again give some input and try to again trigger the grid function it will again pause at that instance as you can see that we just talked about our second method of debugging and that is the keyword debugger along with that we just got introduced with chrome browsers in will debugger interface but but but we still have a problem let's say you wanna pause your code at multiple instances in that case you have to write and delete this keyword again and again at multiple lines in your code and eventually it will result in this okay so i introduced the problem now let me give you the solution and the solution is breakpoint now what is this breakpoint well it is a it is a third method of debugging in chrome debugger you can set multiple breakpoints instead of writing debugger keyword let me show you how to do that so we are back with our old copy of code where we are using this keyword debugger now as i told you that you can use breakpoints instead of this keyword so let's just remove it from our code and our application got refreshed automatically and to set breakpoints what do you have to do first of all let's expand it oops expand this and open the console you have to go to the sources panel and you have this debugger interface as i show you before now go to the file where you want to set the breakpoint and we have a debugger keyword before this line this alert function so let's uh set a break point at this line okay to set up break point you have to click on this left panel where you have the line numbers uh so let's click here as you can see it shows that i have a breakpoint here what will what it will do eventually is it will just stop the execution of the code just before executing this line so this line will not get executed we will not see the alert when we reach this point this breakpoint so let me do it for you and great as you can see and if i just click on the play button it will resume the script execution and you can see the alert if you don't believe me let me set the breakpoint to the next line and it will prove that this line will get executed and this will not uh again there we go and it stops the execution here and you have all the panels with a scope panner whether watch panel everything you have here also now i want to introduce to a new panel here's the panel uh break points panel it will list all your breakpoints in your code for example if i set another breakpoint it will list that you can just remove your breakpoint from here as well so that's all about the breakpoint we just talk about breakpoints and how we can use them in chrome debugger now what if i tell you that you can use debugger within vs code and i know that's why most of you are watching this video so from now onwards we'll be debugging our code within vs code and not in chrome browser i know you guys are excited let's dive into the vs cool so we are in vs code and here you can see that our app is running on localhost 5500 port number 5500 now to debug your application within vs code in built debugger you have to set up the debugger before for that you have to click on this function it is the debugger option and here you have got the option to create a launch.json file this file is the configuration file for your debugger project okay now it will ask you to select the environment now ask yourself a simple question at this point you have to ask yourself the question the script that you're debugging is going to run in which environment let's say i want to debug this javascript file where it will run it will definitely run in a browser and if it is running in a browser you have to select the chrome environment now it has created a skeleton file for us and we can edit it we won't edit a lot of things into this file just one thing and that one thing is the url what is this url this url is basically the end point where your app is running in this case default url is set to 8080 but in our case our app is running on 5500 so let's change it okay that's all we need to do actually this is the url from where debugger start watching your script okay it will start keeping your eye on your script uh from this url okay now we have set up our launch.json file or you can say the configuration file for the debugger now what what is the next step well the next step is to set the break points right so let's close this file and set a breakpoint on line number eight how do we set a breakpoint it's pretty similar to the chrome debugger for that you have to go to the left as you can see there's a red mark just click here and as you can see it's the break point now we need to launch the debugger we have configured out we have configured our debugger we have set up the breakpoint and the third step is to launch the debugger and for that we have this play button okay let's just launch or you can just press the f5 key on your keyboard so it's it launched the debugger and let me tell you it has launched another instance of the chrome browser the previous one is still running and this one is running on localhost 5500 and that one actually they are the same thing that is not our point of discussion right now let's try to give it some values and see whether it works perfectly or not and as soon as i greet it stops the execution here and as soon as i press the play button it creates so everything is simple everything is similar to the chrome debugger we just got a new interface what else we have here we have a debug console we have call stack i've told you what is it we have the watch panel my favorite one we have the variables panel as well let's do it again to see what does this panel contain see it has local script and global scope the variables panel is basically the scope panel of chrome debugger actually this name is better than the scope one whatever it takes now just press the play button and yeah there we go so you just learn about chrome browsers in build debugger now before starting with a new topic i want you to know that if you go to the project folder you can see there's a dot vs code folder here and it contains the configuration file so in future if you want to edit your file you can just find it here that's all now continuing our discussion on vs codes debugger let me tell you something more about it a much more interesting approach of using the debugger let me just close it and we have a break point here give it some values and great it stops the execution at the break point we all know that now the next step is to press the play button it will execute the script since we do not have other break point it will just execute the script completely sure we know that but what if i tell you i want to uh execute the script line by line i want to see the status of the function status of the variables on each line for that you might say number just let uh just let multiple break points and press the play button no no we don't have to do that we have got this step into function or uh i would say step over function uh button um it's not a function i'm sorry let's press this so it executed the line number eight this one we got the alert and it shifts the cursor the debugger cursor to the next line now if i press again it does the same and then okay and here this function was called here and it uh brings the execution to the next slide so we have got a bunch of other options as well we are going to talk about these options further in the video so are you guys excited let's dive into it so here's the debugger toolbar each button you see here is a step and they are known as continue step step over step into and step out and then we are left with two other buttons which are restart and stop now we're gonna discuss each of these steps in detail but before that what does it what is this restart and this stop button do well as the name suggests the restart button restart the debugger and the stop button stop it now moving forward with our discussion let's discuss about continuous step we've used it quite a lot of time till now and you guys are very well aware of what does it do well it executes the function or script until it reaches next breakpoint or i would say it will move the debugger cursor to the next breakpoint let me show you how we're back with in our code let's uh set two breakpoints and let's start the debugger we don't need to create the configuration file again and again we have already created it once per project and it will work okay so we have two breakpoints let's start the debugger it's working give it some input and great stops the execution if i press the continue button it will jump to the next breakpoint which is on the line number eight you can see that oops let me show you this one let me just minimize it cool now as soon as i click it again uh it will execute the line number eight as well and the consecutive lines after that whoa now just let's just discuss about our next step which is step over to understand step over but button let's just set remove these two break point and set a break point at line number six and give it some input well you don't necessarily have to give it still give it some input so it stops the execution here now what if i press the step over button or i click on it it executes one line and jumps over to the next then this and then this okay moves to the next so it execute one statement at a time but here's the catch if i remove this breakpoint and set a breakpoint here where a function is being called so as the name suggests step over it will step over to the function that means it will execute the complete function at once so let's restart the debugger first of all and give it some input and great so it stops the execution here and if i press the if i click on the step over but button it will execute the greet function completely at once look at that it executed the entire function completely so it executes one statement at a time but if the statement is a function being called it will execute the entire function in one go but what but wait a second let's now set another breakpoint in the great function and restart the debugger give it some input and great again we pause the execution here and if i press the step over function it stops on the next breakpoint so what does it mean that it will definitely execute the function the grid function completely at once until then unless it doesn't encounter any breakpoint there it will definitely stops the execution on the breakpoint okay so now we know what does step over function do or what does step over button do now to understand step into we have to restart the debugger let's remove these two breakpoints and set a breakpoint again on line number six let's do this oops what's the problem wait a sec oh here's the problem yeah now we are in same state now uh set a breakpoint at line number six and give it some input again great stops the execution now the step into okay now it's working just like step over it's working the same way it executing one statement at a time but as the name suggests step into it will go into the function okay let me show you set a break point on line number 14 and restart the debugger and understand the difference what does it make great and step into not over into you just got to know the difference uh the difference is it will also execute one statement at a time but if the statement is a function being called it will go to the first line of the function but in case of step over it will just step over to the function and just execute the function at once moving on to the third step that is step out and as the name suggests itself it will step out of the current function for example now let me just set just one breakpoint here and it will make clear uh restart the debugger okay just give it some input again and greet now we are into a function now let's say the function is quite long it will uh calling other function as well and you want to execute the current running function not the one you are calling into the function but the function being running right now what is our current function the current function right now is great and you want to execute it in one go for that you have to use the step out for uh step out step out step oh it's so confusing let me show it to you okay it's executed the function and move it to the next line where the function being called so we have understood what each step of the debugger toolbar do and if you use it effectively it can save you a lot of time cool now just let us just revise what we have studied so far we've already discussed the continuous step which means it will just jump to the next breakpoint the step over will execute one statement at a time but it will execute the entire function at once if the statement is a function code and if encounter a breakpoint during execution then it will definitely pause at the break point step into do the same thing but the only difference is if the current statement is a function called then instead of executing it at once it will jump into the first line of the function definition step out execute the current function in one go move the debugger cursor to the next line from where the current function was called and it also if encounter a break point while executing then pause at the break point for sure so till now we have understood everything we need to know about the debugger and the debugging in javascript now we'll move forward our discussion with debugging in typescript react.js and non-gs okay let's do this let us discuss about debugging in typescript i have a very minimalistic typescript file here so the step one would be to compile the typescript file into the javascript file because you know that in browser typescript doesn't work we have to use the javascript file within the browser context okay how do we do that we have something called typescript compiler you guys might know if you if you're working with typescript i i have it installed on my system you guys install it in yours and uh let's do this first of all let's create a configuration file for compilation we created it and now just tsc is the command typescript compiler to generate the javascript file yeah we have it cool now we need to do one more thing go to the ts config file and search for this property source map and uncomment it and set it to true why why do we need to do this well as i told you that in your browser the file that will be running is your index.js but the file that you will be coding is index.ts or the typescript file so you want to set the breakpoints type in typescript file not in index.js so this property when you set it to true will ensure that the index.js will be running in browser and it will stop executing and will show you the debugger cursor in your typescript file and since i have modified the ts config file i need to recompile it to javascript cool and it has created a new file that that you don't need to worry about okay so what's the next step the next step is to or create a launch.json file or the configuration file for debugging let's go here and create a launch.json file it asking you for the environment since it's a simple web page it will be running in a browser so let's select chrome now the next thing we need to change is the url it should be 5500 why it it is 5500 because we'll be using live server and it will run our app on this port i can show you here go live and you can see it's running on port 5500 let's close this instance now we have a breakpoint on line number three in typescript file we have set up our configuration file we have also set this property to true and we have recompined our javascript we are good to go to use the debugger let's just launch it and also we are running on port 5500 let's launch it okay and yup as you can see we have successfully pause our script on the breakpoint now from here you can do whatever you want to do you have learned so far next step is to learn debugging in node.js let's go okay so let's begin in order to explain you what how to debug in node.js i have a very simple express app here and let's try to run it node server.js so it's working fine and if i just go to localhost 3000 it says hello world and it logging everything it's everything working fine now i want to debug this application so let me just set up two breakpoints this one here and one here let me just close this instance i don't want to run it in terminal right now i'll tell you what in order to debug you all know that we need the configuration file so let's create one now carefully select the environment now our application will be running in node.js environment and note in the browser context so you don't have to select the chrome instead select the node.js now now here you don't have to set up the url like you were doing before here you have to set up your initial file from where your script your project will start executing in my case if we look at the directory i have a file server.js so in my case it's all right let's say you have a file app.js so you have to modify it accordingly we are good to go now you don't have to explicitly write down like node server.js when you're debugging no go to the debugger we have set up our debugger with the configuration file now just launch it stops executing at the break point now let's hit the play button cool now just refresh it as soon as you refresh it oops let me just it's showing the previous output i need to yeah it's loading and it hasn't show any output yet but if you go to the debug console you can see that the it has two logs here the one is servers is running on port 3000 it came from the line number 13 and the other is get request on localhost 3000. that is javascripts line number six it has executed this line it it has stopped executing or it has paused the execution on line number seven as soon as i uh hit the play button it will continue the execution and you will see the output here three to one yeah as you can see that that's all that's all you need to know about the debugging in node.js now you can solve your problems accordingly now our next target is debugging in react let's begin now we're gonna discuss about debugging in react.js and for that i have a very minimalistic app that says hello world uh and run on localhost 3000 and when you click on this button it generates an alert so right now my app is running on localhost 3000 now in order to debug it let me just set a breakpoint here you guys know our next step would be to create the configuration file for debugging let's do this create a configuration file now just hold on for a second ask me this question which environment i need to choose whether it's a node.js environment or the chrome well most of the people think that since the react app is being running in terminal the environment should be node.js well that's not correct the react app is not running in terminal it is actually running in the browser context that's why it is a front end application that's how you you can just make the analogy so choose the chrome now in here you have to set the local host 3000 url because i told you that our app is running on that that's all that's all you need to do now all what's the next step now launch the debugger and make sure before you launch the debugger your app is running if you if it's not running then restart the app by npm start but if if it's not running it won't work so my app is actually running on port 3000 and it's working good and i have a break point here on my function which get triggered on when i click on this button so let's just okay so we have this now if i just click on this button awesome our script got paused here and when i just whoo there we go so we have just completed our discussion on debugger we learned the basics of debugger how to use it using different steps how to use in different technologies like javascript typescript node.js react jest and i'm gonna end my discussion here thank you for your time okay so just let me just tell you something about myself or this video is a freelancing project and you can if you find any doubt in the video and you want to ask something more about it you can always find me on linkedin here's my profile and if you want me to work for you and serve you as a freelancing client you can choose whether linkedin or if you prefer off work here's my offer profile as well you can choose well whatever you want to that's all from my site thanks for your time and happy coding

Channel: Scalable Scripts

Views: 2,416

Keywords: coding, programming, full stack development, scalable scripts, programming tutorials, developer, coder, software, laravel, react, vue, angular, django, python, nestjs, nextjs, nuxtjs, golang, denojs, nodejs, microservices, docker, kubernetes, rabbitmq, kafka, event driven architecture, event driven design, containers, mircorservices architecture, api, spa, single page application, c#, java, kotlin, .net core, java spring boot

Id: Dux5y8mVIMY

Length: 40min 37sec (2437 seconds)

Published: Tue Apr 05 2022