Are you debugging JavaScript in VSCode? | YOU SHOULD!

visual studio code has a new feature where you can actually debug code running in a browser right inside visual studio code instead of having to open developer tools in the browser and go through all that so yeah right in your code base you can debug let me show you by the way this is the article announcing that it's on the microsoft blog site i'll link to it down below it says if you're debugging javascript and visual studio code you probably have used either the chrome debugger or microsoft edge debugger by the way i'm going to show chrome here i don't have edge on this machine but same thing can be done in edge except edge has one more feature that you might want to check out and if you read this post you'll see that edge has this extra feature where you can actually inspect the dom right inside vs code as well that's pretty cool but let's take a look at vs code and chrome now so i'm gonna do this in a couple of projects one is just gonna be a plain basic html page with javascript vanilla javascript then i'm gonna take a look at react and finally we'll take a look at an angular with typescript project so here's an empty folder nothing in here i'm going to create an index.html file i'm going to use emmett here so i'm going to do a bang and it's going to complete for me the entire structure of a basic document pretty cool huh so here's our body hi there and uh let's say i want to run this i can press ctrl backtick and i have a little tool called live server installed you can just install using npm global install live server and i run it just like this in this folder and it's going to bring up the browser running my application how simple is that it's a little small so i'm going to blow it up here to 400 percent and it says hi there and if i want to update my index.html file with hi there 2 it'll automatically detect the change and update the running application nice okay now we need some javascript in here so let's go with script.js and we're going to do a very basic thing where we print to the console hi there yes this is valid javascript but because i'm not waiting for a body load event i need to put this javascript reference at the end of the body tag and we're going to do it like this script source equals and there's copilot trying to help me out loading jquery but we need this localscript.js file and there we go so we've loaded that and if we take a look at the running application i do want to open up the console here just so i can see the console printing out hi there and there it is now i'm going to move my windows apart just a little bit so we can have both of these open now the next step if you want to debug this javascript in visual studio code is we're going to go to the debugger tab right here and we're going to click on run and debug this will give you a few options these weren't available before but here are the options you can have chrome edge and so on i'm going to select chrome because that's the browser i want to use right now to debug this code so i'm going to select that option and it's going to create a new file take a look at the folder structure you have this new dot vs code folder with a launch.json file inside which looks like this so this tells you what port we're going to open and live server happens to open the same port as the launch configuration shows which is 8080. that's not always the case as you'll see with react and angular so you'll need to manually change that port here but this will give you the name of the task that it's gonna run configuration i should say tasks or something else so why don't we just go ahead and try it we already have this live server running and i'm to go back to the debug tab and up here we have a little play button and from the drop down we can select launch chrome against localhost so that's the name of this configuration launch chrome against localhost if we press play here nothing's going to happen because we don't have a break point in our script so we need to put a break point right there and i'm going to click launch and it's going to start up a new instance of the browser run the application and attach the debugger to it so right now the browser is waiting for the debugger it says paused in debugger and it's waiting for us to debug the application right here we can step over continue or stop debugging if i go ahead and continue it's going to run the rest of the application so that's pretty nifty and very simple now if we want to do this with react all i had to do is create a new react application using create react app this is what it looks like if we pop open source you'll see that it is a javascript project and we have our app component right there you can put breakpoints in here because this is even though it looks like html it's jsx so it is javascript so i can put my breakpoint right there on that return line and that's the line i want to debug so let's add a configuration i'm going to go to my debugger tab click run and debug select chrome it's going to create that launch.json file again and you'll notice that the port is the same however the way we run this react application is by issuing the command npm start so let's let's go ahead and do that it's going to open it up in a different port not the port that we're expecting so npm start there's our development server and you'll see that it actually starts up on port 3000 localhost 3000 so we need to go back to our launch.json configuration here and just change this from 8080 to 3000. once we do that we have the app running we can go back to the debugger tab and click on the play button it'll attach to our debugger the debugger will attach to our running application in chrome and pause on that break point how cool is that i like it now you can drill into some deep down react code if you're really curious to find out what's going on behind the scenes inside that javascript online 15034 i'm actually not so i'm going to continue and continue and there's react debugging in vs code very cool now these are all javascript files and angular is another framework that we can use that one by default uses typescript so here i've created a brand new angular application using the angular cli and i can do the exact same thing here go to the debugger tab run and debug and then select chrome here and if you take a look at the source code you'll see that instead of javascript we now have typescript code in here so let's go to app component maybe i want to put a breakpoint right here on line 9 where the title is being set inside the app component or initialized and there's one other thing here if we run this application using ng serve that's the way to run it using the angular cli it needs to get built and there we go now the server is listening on port 4200 so yet a different port so make sure you take 4200 and you go to launch.json and instead of 8080 here you put 4200 there and now you'll be able to debug now first we need to open up this in a browser and there's the application and let's go back to the debug tab we're going to hit play again and this should pause on our break point right there on tight so now we can debug this as well just like that so hopefully this was helpful to you i find this very convenient i like not leaving my environment when debugging there are some benefits to debugging inside chrome as well but this provides the convenience of doing it right on your code base if you like this video give it a thumbs up appreciate it subscribe for more content like this i'll see you next time you

Channel: Alex Ziskind

Views: 137,395

Keywords: angular, app development, code editor, debugging javascript, ide, javascript, javascript in visual studio code, javascript in vscode, productivity, react, text editor, typescript, visual studio code, vs code, vs code lesson, vsc, vscode, vscode debugging, vscode overview, vscode tutorial, webdev

Id: 68wO-sl5vXg

Length: 7min 5sec (425 seconds)

Published: Tue Aug 03 2021