Tips and Tricks for Debugging JavaScript

uh why is this javascript not working all right let me just use console.log so i can try to debug this thing you know there's a lot more you can use to help debug than just console.log in javascript right wait really tell me more let me show you a few things what's up everyone my name is james quick and i do weekly videos about web development related topics and if you watch the intro and it resonated with you then you're in the right place so as javascript developers we are all guilty of using console.log for everything that we do in terms of trying to debug our code but there are lots of other tools that you have at your disposal disposable at your disposal that you can use to make that process even easier so we'll talk about some of the extra functions on the console object that you can use then we'll talk about debugging inside of chrome and then debugging inside of vs code as well so let's go ahead and get into it all right so i've got open one of the projects from the advent of js series that my podcast co-host amy and i created last december even though it started last december you can still access these at any time so you can go and check it out at advent of js you can get the challenges for free and then pay for the solutions and the challenge that i have open is this password generator which should display a password based on the link that we defined here and also show you the length which is not updating and then uh be able to choose whether or not we want symbols and numbers and lowercase and etc cetera so how do we first figure out what's going on well well the first thing that you probably know of is inside of your browser go to inspect and then open up your console and you can start to see any errors that are in here now as you see these errors you'll get better at this the more javascript you write but these errors are actually typically much more specific than most people give them credit for so learning how to focus on what the error is actually implying to you and go address the problem from there is actually crucial so it says uh one of them is uncaught reference error inputs with two s's is not defined not only does it say that but it also gives me the line number so now go back to line 30 which is here sorry my line numbers are a little odd because i'm using the vim extension in vs code if you'd like to know more about that how i'm enjoying it let me know in the comments but if we look at this line here we can see that inputs has two s's which is probably not what we want so it told us exactly where to go saying that that thing is not defined now the other other problem is one uh let's go ahead and fix this is one that is not being updated here is the uh this dot it looks like it's printing like a dom element to the screen here and uh we don't really know why that is so let's go and look at this so right now we're getting length from this length input input element as you can probably imagine this is a dom element so we can start by logging this just to see what this is so we have to do one of these to trigger this update so we're saying we're getting the input and not its actual value one cool thing that you can do that you may not have known is you can take uh length and then call console.deer instead of log so console.deer is better for formatting printing of dom elements so see now we actually get this dom element as an object that we can go through and look through all of its properties so depending on how you want to look at that thing you have that at your disposal now let's go back to our console.log and talk about a couple of tricks that we can use for this so if we are sticking with our console log and we trigger this notice we just get kind of this dom element string displayed on the screen we don't necessarily know what variable that was associated with so one of the things i will often do is say length is and then a comma and say the second object here so you can comma separate your things that you want to log to now associate let's see if we can get this to re-trigger hey this is the variable length and this is the value of that length variable now there's one way that makes this even easier where you don't have to type out the name of that variable directly instead you can just surround your object or your property your thing that you want to log out your variable in an object syntax which will then inherently log it out as an object where it has the key of the variable and then the value of the thing that we're looking at so this is a good way to get a little bit more information about the thing that you're actually looking at all right so there's another function on the console object that we can use for better formatting or readability of arrays and objects so if we look inside of this character codes map this is just looking at the code associated with each character that we care about in this application if we were to log this out let's do a console log of character codes go ahead and save that you can see it's going to print this out and it's a little hard to digest it's just kind of all in line but if we use the console.table function instead of log this will actually give us a little bit better representation of this as a table so you see the keys and then the values associated with them kind of broken out here so you can use this for both arrays and objects arrays are actually objects behind the scenes but for this conversation it helps to print out for both so another function on the console object is the assert and so let's give an example here of we have our generate password and we either forgot or someone commented out the returning of that actual password value well we see that everything is kind of looking correct but it's saying that it's undefined even though these things are being updated it's recalculating the password but it's coming back as undefined so one of the things we might check here is we could log out the password we could certainly do that or we could also add an assertion here so we could assert that our password is not equal to undefined we might want to check this to make sure and this function if it is undefined we want to spit out a message to say this shouldn't be undefined all right so now let's go back and check and it's actually triggering the assertion here which kind of logs out as an error so we any condition that we want to check for and then print out an associated message we can do that here another thing that we can do similarly is instead of console.log we can use console.air and say this should not be undefined if we were to do this just like the assert we'd have to wrap this inside of an if condition to check if password is undefined so the assert saves us a little bit of time but just to show you a few more of these console air will now air this out in a red color and then we also have the console warn that we can use to log out in a yellow color so this is how you get those different types of colored messages inside of your console now this can be really useful while you're debugging because as you're scrolling through you can see your errors not just logged out in regular console log but you can see them in bright red or yellow to make sure it's things that you need to pay attention to now you probably don't want to actually include those console statements inside of your production application so this is especially useful for local testing or your back-end apps where other people where your customers are not going to be able to see your log statements but you can use them to inspect the things that are going on all right so let's go and get rid of those and then let's update our generate password and this stuff should be running all right so if we change the link it should update great that's working and let's say we want to figure out how long this actual actual password process takes to run well we can do a console.time so this will start a timer and then at the end of this we can do a console.time end so just in case we want to see how long this process takes for each one so the first one is uh 0.0229 something something something milliseconds and then if we go up it should be something in the same range there so if you're debugging something that is taking a long time or you're trying to figure out what part of your application is taking the longest you could do a couple of time and time ends to be able to track exactly how long that stuff takes all right now let's get into the really fun stuff that's a little more sophisticated but it's not that difficult let's look into actual debugging so a lot of us think about debugging in javascript myself included as just hey let me write this console log statement but there are actually tools around debugging that can really help make this easier so let's go back to again let's comment out the return password in here and we'll go back to the same problem of we're going to have undefined inside of our function so one of the things that we can do is let's say we're wondering if the password is coming back correctly so we can run a debugger statement in here which means when this runs in the browser it's going to actually you see it did it here it's going to start a debugging process inside of in this case google chrome it says this is paused in the debugger and then we can go and actually look at what's going on inside of the application so what kind of stuff can we look at we can go and see the code here if we wanted to we can also see the values of our scope so we can see password variable here is undefined which honestly obviously it should not be undefined so this is a good red flag for us to know hey when we're generating this password something's not happening correctly so we also have a couple of additional tools in here we can step through the code line by line so if we click this one it'll go line by line and kind of show us what line of code we're at we can also skip to the next function call and we can also just continue to let the application continue to do what it's doing so this is a great way to stop your code at a specific point now the debugger and the tools inside of google chrome work really well but i much prefer a different option for this which is to use debugging inside of vs code so instead of running the debugger command there what we can do inside of vs co to set our own break points to have a true debugging experience right inside of our editor so the way we can set this up is if we go to run and debug we'll need to create a a launch json file which vs code will help do us do for us and we'll say we're going to run this environment inside of chrome so it'll go ahead and stub out our debugging configuration for running in chrome and then we can say this is running not at port 8080 but at 5500 so we know this thing is running at 5500 in my machine because one you can see it up here in the url and i'm using the live server extension in vs code to be able to do that so vs code live server extension nvs code starts with port 5500 by default so if we save this now we have our launch configuration so on the bottom there's a launch chrome against localhost solution it just kind of shows us what the different configurations are that we have uh configured we could also do the command palette and go to debug and scroll down to start debugging and we can also run the function f5 for this and it's going to run that configuration notice that it opened up a new browser here's my desktop in case you've ever been curious looks like chrome didn't shut down that's fine so here's our application and it's running against localhost 5500 here but the browser is now connected to vs code where that debugging experience i have right inside of my editor so you can see it stops at this breakpoint that i set remember we toggled that on and off so inside of here i can do all the same things that i looked at inside of google chrome i can look at my variables here's the password here's the checkbox values here's the link all these different things i can look at i can also go step by step let's see step over we'll go to the next line the step into will go into a function call if we're calling a function here and then we can continue here so we can set this debugging break point leave it there then go ahead and run to our return password save this which will then trigger a rerun of this application and now we're back envious code again at the same spot where now we can verify that this password has actually been set which is really really nice a couple of additional things we could do sometimes you have a lot of data up uh there that's hard to look at so if we just set password as a variable we want to watch we could specifically look for password inside of this watch which will see if there's a password variable inside of the scope that we're in which is this function and then show us that value so i don't have to go dig through some of the potentially nested values so lots of really cool things that you can do inside of vs code to debug your code with the tools that it has built in so to sum up a couple of tips for just mentally debugging one is to take your time step away from the computer at times go take a walk if you need to but pay really close attention to the error messages that you're getting pay attention to what line number they're calling out and what exactly that error message is telling you because usually they are fairly specific and if you don't make it anywhere from there you can go ask on stack overflow from there you've got lots of different functions on side of the console or on side inside of the console object that you can use in addition to log there's warrant and error and table and time and time in and deer assert there's a count there's lots of ones that you can use to customize your debugging experience next you have the debugger command which will trigger debugging inside of your browser but my personal preference is to use debugging right inside of vs code because it integrates directly with your code and now i can be inside of the editor that i'm used to being in while i was writing the code so those are my tips for debugging javascript let me know if you think there's anything i missed what other features or functionality or extensions or tips do you have for people that are debugging i hope you enjoyed the video and i'll catch you next time

Channel: James Q Quick

Views: 406,449

Keywords: javascript debugging, debugging google chrome, vs code debugging, console log javascript, javascript console functions, javascript tutorial for beginners, web development, beginner debugging, debugging tutorial, debugging tricks, debugging js in browser, how to debug for beginners, vscode tutorial, javascript debugging in chrome

Id: _QtUGdaCb1c

Length: 13min 3sec (783 seconds)

Published: Tue Mar 01 2022