Debugging JavaScript in Visual Studio Code and Google Chrome

hey everybody this is James quick from learn build teach and I want to welcome you guys back to another video and in this one we're gonna take a look at debugging javascript in both the chrome developer tools and in Visual Studio code something I'm really excited about so let's go ahead and dive on in all right so the application that I'm going to walk through debugging here is quick chat which is the the end result from a series that I had a few videos back which was called design and build a chat application with socket IO and the the link for this is below you can clone the code from github and bring it down to your computer run it and do exactly what I'm doing if you want to otherwise you can use any application that you want and use that to work with and these debugging concepts are going to apply regardless of what project you're working on so what's going on now is I've got a little little bug here that when I log in on I type James when I actually do login it gives me undefined join the chat so something's going wrong and I don't really know what so I'm looking at this login button event handler and I don't really know exactly what's going on so I know the username input is the let's come back here the input that the user types into so maybe I would want to take a look at user name input and I might print this out with a console log and this is this is the very easiest earliest rudimentary way of debugging is console log and if you're anything like me you use it all the time and probably a little too much and you probably want to start taking advantage of the actual debugging techniques that I'm going to show you here as you get a little more sophisticated and I think that's one of the differences you know as you become a better developer and a better web developers you really start to take advantage of all the tools that are already out there it's not just about writing the code it's about the ecosystem that you live in when you develop and this is this is one of those big things is doing debugging so if I if I go ahead and trigger this and do a James here in chat and I can see the input the input Dom object gets printed it looks okay now I can check the value and reload here and write it again and it's printing out the value so it looks right now I'm starting to wonder you know I don't really know what's going on I don't know why and maybe I kind of come down here and notice oh I've got text instead of value so there's a small little bug here that you know I can kind of play around with by by printing out something with a console log but it's not the best way to do this and I want to show you what is so in addition to doing this console log I'm gonna type in a statement here called debugger and what this is going to do we'll see in a second it's gonna activate the debugger within Google Chrome and it's gonna pop open the the debugging tools that we can work with the help help us figure out what this situation is that's going on so let's say this let's go ahead and refresh this application and just so you guys know this application it's an ode app that's serving the JavaScript file that I'm looking at here and it's auto reloading because I've started it with no daman so no daman will auto reload my node server anytime I save one of the files which is why you see some stuff printed out down here so let's go ahead and do this again let's login with James and press Enter and basically what's happened this is probably if you've never seen this before this might be a lot of information basically what this debugger statement does here is it tells Google Google Chrome to pause your application pause the execution of execution of your application until you see fit to go forward so everything it's in the the exact state that you want it to be in or that you that you want to inspect and now your job is to just go in and inspect so the first thing you'll notice is it kind of grayed out the application a little bit it popped up with the paused in debugger with a play button here and then another one next to it so this is continue I think it's a resume and then a step over next function call which we'll talk about it in a second and then on the right you'll see the sources tab is now open so if you've used the developer tools before you've probably seen elements and network and console maybe for performance and you may not have looked at the sources tab and this is where we can first of all in this top right corner this is the code that that google chrome is actually loading so this is the code that's actually running as this website in google chrome so you can come in you can see you can see this code actually maps up to what we have in our apps yes over here and you can see it's it's blue right on this debugger line that's because that's the breakpoint that Google Chrome understood where to pause the execute execution of our application and we'll talk more about break points but break points are basically just a way to tell chrome or tell your IDE or tell your environment to stop your application or a pause it so that you can do some inspection so we've got it pause here and this is the code in the top right we'll look at a few things in the bottom left as we move on but I want to look at the scope in the bottom right and this is where you can start to inspect the things that are going on in your application and you'll see first we've got the local scope so this is scope that's local to this callback it's an es6 fat error function we've got the e the mouse event this is a local parameter to this function right this is a local parameter to this function this mouse event and you can actually go in you can look and inspect what E is so typically you you could console.log this but it's not really that convenient because as you need more things you need to look at or you kind of forget to do a console log it's hard to go back and find them this way you can find basically anything that you want to look at so there are those things then we have a global section this is just everything you've got on the window object which shows tons of stuff in it and lastly we've got our script so these are things that are coming from this fjs and user name input is one of them so if I open that up that's the the Dom element I scroll down and maybe I'm trying to see what text is right because I think it's text or off type text and I come down and I say hey it doesn't actually have a text property here well then I start to think maybe I was wrong about that maybe if I come down just a bit lower I'll see that value is the property that I'm actually looking for so being able to come into your scope and being able to inspect all the different elements and variables and things that you've got going on in your project super super useful and again way more practical than doing just a console log statement because you can actually pause you can take time you can look at the elements you can look at the variables you can look at all those things and not have to do 20 different console log statements to get all the information that you're looking for so to make things even a little bit easier here you had to go through and kind of look at look for your different things you can also I've done this here let's see right here how do I delete this so yeah delete and delete so you can open up your watch section you can tell it I want to look for user name input and anytime you have it just tell me what it is so regardless of where I am in the application and it'll tell me what the value of user name input is which is actually pretty handy because I could say hey just watch this and I could do different break points every time I pause it'll tell me exactly what the value of that is so for instance there's there's an array at the top called messages that keeps the the messages right it's it's an array of message objects that keeps the messages as we send in and receive messages so I could keep this here and any time I want to look at what's in that array I could just come to this watch see what's in that array and see if things look good or not so that's our scope and our watch tab in the bottom right then and the left this is this gets back to some of the debugging specifics and one of the most important things here is your breakpoints so debugger is not necessarily considered a breakpoint exactly but it basically acts like a breakpoint so I can actually set a breakpoint and this is pretty common and whatever editor you're using is you can click basically right to the left to the left of your line number and set a breakpoint and now so if we look at debugger here this is where we're cut we're currently paused and if I do a continue it will then hit this next breakpoint and pause there so that's what an actual breakpoint looks like is when you come into this gutter over here this little space next to the lines and do a breakpoint by clicking here to create one so you can see if I as I create more of these you can see them all listed in my breakpoints tab and I don't necessarily want all those right now so I'm gonna get rid of them but it's just to show you that it's there one of the additional things that's super super useful is your call SEC so as you have one function calls another function calls another function you can see how all those different functions are called and if we do let's come up to let's let's actually redo this whole thing so let's restart let's type in James let's trigger the debugger so now it's paused here and I'm gonna add another well actually let's see it's gonna call the send message function and if I put a breakpoint in here and press Continue inside the send message you can see the call set you're inside of send message here and log in button event handler was the one who called it so as you call more and more messages you'll see that this starts keeping track of all the different functions that you've called so you can kind of go through your code and know where you've been and what's going on then they've got other kinds of breakpoints down here you've got an xhr and fetch breakpoint so as you do fetch commands or HTTP requests you can see you can you can basically pause on any of those or you can pause on a certain you URL request so if the URL contains a certain string you it'll go ahead and pause just the same way we use the debugger or the actual breakpoint in the GUI here and there's then there's some other event listeners I think for the purposes of this video we're just gonna stick with talking about just the break points and the debugger that we've looked at so far but know that there's other things you can look into to do a little bit more in the future so we've gone ahead and refresh your application here and let's say I want to comment out this debugger statement I can actually comment this out in the code I can save it now this is not gonna save the code that I've got over here right my code this is the code that the browser is running itself so the browser has its own copy of this code that it uses to render everything and to do the JavaScript and now that I've got to comment it out and I've saved its version I can type in James and I can you chat and notice that we're not gonna hit that that debugger it's not gonna trigger a breakpoint in chrome developer tools so this is something pretty interesting that you can go in and you can just kind of edit your code on the fly but the way that I just done this this does not persist to the code that I've got over in Visual Studio code which can be kind of confusing so one thing that you can do if you're interested in kind of tying those two a little bit closer together is you can tell it what what folder you're working with what if you're working on local stuff you can tell it which ones you're working on so if I tell it where my files are and I had to go through another step of saying that I had permission to do this and I tell it where my files are I can actually load those files in the browser here and if I scroll down in the app just let me make this a little bit bigger scroll down in the code to my login function and comment this out so I haven't saved it yet but notice over here it's it's uncommented over here it's commented and then I save it it's gonna actually update what's in Visual Studio code over here so if you connect your folder workspace to your debug session or your sources tab inside of google chrome you can actually edit your code right here in Google Chrome now this is kind of cool but I think something that's even cooler is to have Visual Studio code go ahead and and allow you to do the debugging for you so what we're gonna do let's go ahead and move this back over a little bit let's come over to Visual Studio code let's make this a little bigger for the time being and to do what we're about to do to really get into debugging in vs code you're gonna need to install the what is it chrome debugger for Chrome so this is a simple extension with ton eight million five hundred thousand downloads that you can go ahead and install install that and BS code and you can come down to the debug tab here so you open up that d-back debug tab and you'll see something that looks similar to what we just saw in chrome right we've got our variables that we can look at we've got a watch section we've got a call stack and breakpoints these are all things we saw in chrome just a few minutes ago but now if we look at sesno configurations and let's say we want to debug this with chrome let's add a configuration and they've got a couple of different presets so if you're doing client-side JavaScript you can select Chrome as your environment and let's say we want to do a chrome launch and let's get rid of the secondary configuration looks like it created two for us so we've got a configuration here to launch Chrome and a debug mode alright so we will let's say this is gonna be localhost 3000 and save this if we go ahead and do it launch here so see our our configuration is popped up launch Chrome and this comes from the name so if I change this launch or debug let's say debug and chrome save that it's going to update what gets displayed in this drop-down so we've got our configuration mostly done and we just need to do one thing so right now it's saying the web root is at our workspace folder this is the folder that we're in the folder that this launch JSON file folder is in is this parent folder and we actually want to look in our public folder which is where our HTML CSS and JavaScript are so we can type in here the N public and we can come into our app or actually we can come back to our debug here and let's go ahead and run this and this should open up a tab in Google Chrome and kind of a debug mode here in a second we'll see it pop up and so now we've got the application open and now instead of let's slide this these debug tools over a little bit instead of triggering a pause by the debugger statement we can go ahead and create a breakpoint in vs code by clicking in the gutter next to the lines here so just the same way that we looked at in the chrome developer tools and if I go ahead and run this and say James and try to login notice it's gonna open back up visual studio code we are pause on this breakpoint which you can see here you can look at your local variables you can look at your script variables you can look at your global you can do a watch here and say I want to watch for user name input and messages and you can see the call stack you can see your breakpoints all the things that we saw in Google Chrome you can see right inside of vs code and do all of your debugging in here which to me personally I think is amazing I think this stuff over here looks a little bit better than what Chrome gives you I think staying inside a visual visual studio code is just awesome as a whole I love the functionality that it gives you and I think this way you get to kind of stay closer to your code so as you walk through not only you know if you looked in chrome let's we can go ahead and play this so let's go back to our our other tab that we were using it looks like I closed it but if we if I were to open up the the source tab here again to kind of look at the view that we had before and I looked at one of these files it's still just it's not it's not the same right I could make changes in here and I could save them and they could have that effect but it's not the same as being right inside of the the editor that you use to write all of your code in the first place so again all in all I just I think debugging and visuals to your code it's a little bit easier it's nice to stay in this really fantastic editor the stuff in chrome is great for what it gives you but it's just not quite as you know appealing and put together and consistent as what you get with staying inside of es code because again you get access to all the things that you looked at or most of the things there might be some stuff that I'm not thinking about and they're almost certainly is but there's your variables your watches your call sec your breakpoints there's other things that you can look at as well you can continue the execution of your app you can do what's called a step over a step into and a step out so if you're inside of a function you want to finish that function you can step out of it you can step into a function call you can step over the next line or you can go ahead and continue then you've got a restart button here if you want to just restart your debug session or if you want to close that you can do that as well and then you can also see you've got your debug console here at the bottom so this is gonna have the same output that your console would have in the chrome developer tools so this console log here with user name input dot value will go ahead and print James here as well so one thing that I think is worth noting as well you can do conditional breakpoints so I want to let's say I want to edit this breakpoint and I only want to break on this if user name input dot value equals and let's say I want to see it equals James so if it equals James then I want to go ahead and trigger this conditional breakpoint and once I do that let's let's say this let's refresh our debugging and looks like we're up and running here so if I type in something random that's not James we shouldn't hit that breakpoint but if i refresh here and type in James this time now we've got this this breakpoint hitting so if I if I didn't input something and I want to see this user name input value equals undefined if I wanted to check for undefined which is pretty common that would make sense something to check for go ahead and save that and let's refresh our debug configuration here as well it looks like we're good so if I didn't hit anything if I didn't type in anything I think this would go ahead I let's refresh this page just to make sure don't type anything and press chat all right so it looks like instead of undefined we're actually looking for an empty string here so let's check that so if they don't add an input let's save one more time let's refresh debugging and we'll refresh our page so if we don't put anything and press check we should hit that breakpoint okay so now we know they've hit that break point we could go through and make sure we're handling it correctly let's go ahead and continue this and then let's try it one more time as James and it should let us go through and we still got this bug here that we never fix so instead of looking for the text we're actually looking for the value so I hope you guys enjoyed this video this is like I said this is kind of the next level if you if you're kind of a beginner to intermediate web developer or developer in general debugging and really understanding how to debug and what the what the tools are that are available and how to use them it's just it's gonna make you infinitely a better developer it's really kind of a next-level kind of stage for you as I hope you're developing I hope you see this and you see the value in it this is it's gonna go miles beyond just your console.log statements and again they have their place I use them a ton I probably use them more than I should and I part of the reason for me recording this video is to make sure that I'm reinforcing all this debugging stuff that I talked about so to make sure that I use it as well instead of just kind of defaulting to console statements so I hope you guys enjoyed this I can't stress enough this is gonna be something that you're definitely gonna use you're definitely going to appreciate the more you get used to it and the more bugs you come across and the more tricky things you come across this is going to save your butt at times so again I hope you guys enjoyed it if you guys like what you saw like subscribe comment on the video let me know what you thought find me on Twitter at James Q quick let me know how you're doing what you're working on things you want to see all that good stuff I really appreciate you being here and I will see you guys in the next video

Channel: James Q Quick

Views: 208,974

Rating: 4.875 out of 5

Keywords: Debugging Visual Studio Code, Debugging VS Code, Debugging JavaScript, Debugging Google Chrome, Chrome Develoepr Tools Debugging, Debugging JavaScript Visual Studio Code, Debugging JavaSCcript in Chrome Dev Tools, javascript debugging, vscode debugging tutorial, web development, vs code, vs code tutorial for beginners, chrome debugging, debugger for chrome visual studio code, debugger for chrome extension

Id: AX7uybwukkk

Length: 19min 42sec (1182 seconds)

Published: Tue Jun 19 2018