The New Way To Debug JavaScript in VS Code - No Extension Required

did you know you can debug JavaScript and vs code without having to install a separate extension well let me show you how what's up everyone my name is James Q Quick and I do weekly videos on web development related topics and if you followed this Channel at all you know I've done a ton of videos on vs code it's my favorite text editor I love the features I love the customization I love the extensions that come along with it so you know how if you're setting up debugging for JavaScript in vs code wait you actually do debugging more than just console log well yeah occasionally I do but if you were to set that up previously you would have to install a separate extension the debugger for Chrome extension so that you can do your debugging for your JavaScript applications inside of Chrome or have it connect to your application running inside of chrome and then do the debugging right inside of vs code anyways you don't have to do that anymore so let's take a quick walkthrough of how you would set that up now before we do I want to say that this video is sponsored by Ben Q they sent me a screen bar plus light which hooks on top of your monitor and I've gotten to use that for a few months now now I have had some troubles with my eyes of eye strain just looking at monitors every day and having that extra source of light in the right direction on the monitor has actually been really helpful so I've got a couple of links below for you to check that out if you're interested you can find that and get one yourself now let's dive into vs code all right so I've got open a demo for a video that's coming out actually right after this one if it's published after it's published I'll put a card up here for you to check it out but that video is working with a form in vanilla HTML CSS and JavaScript specifically working with a platform Called Quest forms which makes it really easy for you to handle form submissions on your sites anyway uh what I want to do is just show you really quickly how I would go and debug this application so previously I would have to have installed the debugger for Chrome D bugger for Chrome extension which I actually still have installed here but I want to get rid of that so this is what I used to would have had to install that sounds weird so I can go to settings and I can uninstall this completely and get rid of that and then for people who this may be your first time doing actual debugging inside of vs code again console log works most of the time but if you head over to the little bug icon with the play button that is your debug tab now because this is built into vs code we can go right from here and do like a a run and debug here so the one thing we'll need to do is actually have our application running on some sort of local server so we can use the live server extension I've got a video about the live server extension if you need to know how to set it up but once you have it set up you can click go live what that's going to do is start your application on Port 5 5000 I've always said 50 50. it's 5500 and then it'll have that as a live reloading server for you so here's the demo this will look a lot different by the time the video comes out so with that in place I can do a run and debug and then it's going to ask me what kind of environment am I looking at while I'm looking at Chrome let me know if you're using Edge if you do or what kind of browser you use when you do your web development I use Chrome so I'll choose Chrome here and then it's going to basically give me this little configuration file this Json file that stays inside of my project so if I look in my DOT vs code folder here's that launch.json file which is now the debug configuration file for this application and then all I want to do in here is say hey instead of looking at port 8080 I want you to look at Port 5500 all right so now I can save this and then I can hit the little play button in the top left to go ahead and Trigger the debugging instance now what this is going to do is not only set up debugging it's also going to launch that so this is going to launch the application or launch a page inside of chrome at Port 5500 and then it'll be connected to it via the debugger all right so we see that thing come up now this thing again is connected to our vs code instance so what do we do how do we actually debug well the first thing we would do is create a break point inside of vs code to be able to do this debugging and I actually just had a little bit of issue adding break points a second ago so what I did was restart vs code I quit it and open it back up and now my break points are here because they kind of disappeared which was a little odd I'm assuming this will be a bug that will get figured out over the next uh I mean usually they're really good in the next a couple of weeks I would imagine so hopefully you don't see this but if you do give it a restart especially after you uninstall the debugger for Chrome extension but now that I have my breakpoints available to me I can set a break point right at the start here the first couple lines so that when the JavaScript loads it should hit this break point so let's go over to our debug button again let's uh run this I kill the debug setup with this Square here and then just restart it with that play button so this actually opened while I was talking this opened uh the application in the browser and then it also then hit this break point and so the beauty of this Beyond just console.log is you can go in and you can look at your variable so you could look at there's a ton of stuff inside of global let's all right here's a couple of our variables so our meme input it and then our preview image fast forward to the video coming out in a couple weeks or a couple days we'll show you how to create memes to make fun of me which will be fun so you can inspect your variables here especially as they change and you can also go like line by line inside of your code so if I look over uh the hover options in the debug options I can step over which will basically take me to the next line and now if you look at preview image over here now you see this actually is representing a Dom element whereas before it hadn't ran that line of code yet or it hadn't ran this part of the code so it didn't actually have a value all right so that's really cool and then what we can also do is maybe go ahead and play this so if we go ahead and hit play this will continue in the application and then what it's looking for or what the Callback function that I just set the breakpoint in is if this input changes so if I go to me and I upload an image of hey me for example this should now hit that break point it will take me from chrome back to vs code and I can go in and inspect this again now I can look to see if I had some some sort of logic to say I want to know is that file actually being picked up the way I'm trying to get it here well I can actually go and see hey this thing actually is a file then I could go step by step again to do the rest of my debugging this is a huge Advantage although it is slightly it's not even tricky it just takes a minimal amount of time to set up there's a huge advantage of using true debugging in vs code over just console log in your browser now that's not to say that I don't use console log most of the time myself but this can be really really handy if you're getting into a trickier situation with debugging inside of vs code so now this is as easy as it could get you don't have to install a separate extension and then you can create your configuration right inside of vs code they guide you through it you can update that launch.json to match the port that your application is on and then you'll be good to go so I'm curious how much time do you spend actually debugging versus console log what does debugging mean for you does it mean a true debugging experience with break points or does it mean console log let me know that in the comments below thanks as always for checking out the video and I will catch you next time

Channel: James Q Quick

Views: 142,393

Keywords: vs code debugging, javascript debugging, debug javascript in vs code, debugger for chrome extension, visual studio code, javascript, web development, vscode tutorial, vs code extensions, how to setup debugging in vs code, visual studio code tutorial, vscode setup, vscode, how to debug javascript

Id: tC91t9OvVHA

Length: 7min 20sec (440 seconds)

Published: Tue Jul 27 2021