How to debug #Angular Code in VS Code Properly - Stop using Console Log

hey how's it going everybody this is waze back with another video on the channel in this video i'm going to be quickly showing you how to do debugging efficiently in vs code for your angular application in my experience a lot of people still do console log for debugging even in vs code now what's the point of doing console log when you have this debugging capabilities in this code so this is for those people who are still stuck with console.log and i'll show you how you can set up debugging in this code for your angular code so i'm gonna go and open a terminal and create a new project quickly our project is initialized i'm going to open that in bs code let's go and start our project so i'm going to do npn run start if you're on your project for the first time it's going to ask you if you would like to share anonymous usage data to google i'll just always say no now the project is building so at this stage our project is running if i go to chrome and i go to localhost 4200 i can see the angular default application is up and running right now if i go back to vs code and try to do a breakpoint so i go to app component.ts file and i'm going to do a breakpoint here okay and i'll go back to chrome and refresh and you can see the breakpoint actually don't trigger in vs code so to be able to trigger this breakpoint what you need to do is go to this debug tab go here click on add configuration here you would like to select chrome launch and for your url change that port to 4200 okay once done then you're gonna go into the list and select launch chrome you can rename this if you want to say debug angular application it's up to you you can rename that that's not a problem once you select that in the list click on this play button what it will do it will create a new instance of chrome and it will look for all the breakpoints so now let me just put put them side by side and you can see before we application load you can see the debugging happening in your code so click on this resume button and then your project loads now to demonstrate that a little bit better we'll just create a function here say log to console and i'm going to say console.log hello debugging okay so it refreshes it is going to just um stop at that debug point so i'll just get a click here to run the code i'm going to disable this and i'm going to call this function from one of the ui so let's open app.ts file and somewhere in our html let's go down here i'm going to simply create a button so let's go and create a button there and i'll just use a click event and say log to the console not sure what was the name of the function to log to console okay and we should have a button now i'm gonna actually cut this and remove this tubish from here i'll save project and you'll see we don't have anything now so we'll just paste the button there so we can do a log so now if i click on this console log to console you will see if i do a breakpoint here it will log to the console but before you do that just click on the log to console nothing happens i'm going to open the chrome debugging and i'll click it says hello debugging hello debugging right so if i do a breakpoint there you will see if i click now it will point you back to vs code and stop the code execution right at the breakpoint you can see the values of what you're doing in the left so here you got this locked console i'm going to just click on that and then you see the value currently value is debugging for this title property now let's do one more thing i'm going to just say value okay and that can be a string so from here i'm gonna just log the value and let the code run this time and we go back to app component.ts file and we're passing hello debugging let's save that and now if i go ahead and click unlock to console you'll see it'll stop there and if you want to know what is the current value in your code for value you can hover over and you can see you're getting hello debugging you can also take a look at the values on this sidebar a couple of buttons that i would like to talk about here which is this one which resumes the code next one i'll just hover over to this it will tell you what exactly it does it steps over it stepped into its step out so what is the difference between this so let's say we copy this bit okay and i'll create another function let's say second function and we are just doing console.log from second function okay and then what i'll do is i will call this function within log to console so let's say second to function and then we can just call it i'm gonna do a breakpoint here and i'm gonna do a breakpoint here and let's resume the code now we got three breakpoints i'm going to click on log to console and you hit the first break line now this button will resume the code which means it's gonna go to the next breakpoint let's click on that now let's say you want to actually go ahead and then execute the next block of code instead of going to the next breakpoint what you can do is you can click on this step into which will which will take you inside that function now if i click on step into it's gonna go inside that function and then we'll log what values available in that function so you see the difference here now i'm just gonna let it run and next time when i click i'm going to resume and then this time i'm going to step out click and now you see what happens it actually didn't get inside this function it just executed it instead of just getting inside that so step out is basically it's gonna just keep you within the scope of the function instead of taking it to the next function so let's resume now let's say i'll do a breakpoint here and i will stop this breakdown let's click on log to console and the first break one hit next it's gonna go inside that function right because there was a break one and this button takes you to the next break one let's click again and then there's the next breakdown that it hits now for example you would like to run every single line of code and you want to pause on every single one so what you can do is i'm just going to [Music] remove the rest of the breakpoints except this one and i'll click on log to console and this time i want to go to the next line so what i'll do i'll just click on this step over let's go to the next line click on this it goes to next line now because this is another function which has its own scope if you want to get inside that you need to click on a step into click and that goes inside that function then you click on step into that still stays there but execute the next line you click on step out which will take you back to the main function where you had this breakpoint now let's click on step out and now you see it is taking you to the main function that we'll call this because there's no other break point but if you kept going with this step into it will execute the next line or you know step over will execute the next line as well i'll just click on continue to finish the break one so there was a quick tutorial about how do you do debugging properly in angular code using vs code and after watching this video i hope you stop doing this console log to see the current values because that's just a time waster you can do a breakpoint directly in your code and make the code stop there for you to look at the current values hope you liked the video if you did subscribe to the channel and give this video a thumbs up and i'll speak to you guys in the next one cheers

Channel: Awais Mirza

Views: 72,871

Keywords: Angular Debugging, Angular Tutorial, Angular Vs Code, Debugging, Vs Code Javascript debugging, console.log, Visual Studio code, vscode, how to debug in vscode

Id: XHEnQM_NieU

Length: 9min 37sec (577 seconds)

Published: Wed Mar 23 2022