All right, everyone, welcome back to the last section of this course.
In this section, we will see one of the key
features of Vsco, and that is its great debugging support.
Right.
So one of the basic and the rudimentary method of debugging something
which is broken inside your code is to simply print that
variable or whatever is broken under your console to suppose.
And this program my player one score is not changing at all
and I can see I can find that something is broken here.
So one of the basic thing that one of or maybe all of the programmers
also always do is to simply just write in a console.log
log statement and train the values and see what's going wrong.
Now these things look for small pieces of code,
and as your codes become large and larger and more complex trending, something to
the console is going to be very difficult and it is going to be a headache, right?
So in order to overcome all of these challenges,
we have the power of debugging that is present inside our base code menu
that's debugging, which is mostly padding in the ideas.
But we as code is not an idea, it is a code editor.
So in this section we will see how to debug something inside of a score.
And in this lecture we will be debugging our frontend
part of our JavaScript using voice code.
So let's start right.
So the first thing you need to do is you need to go to that debugging panel.
You can find it.
Here it is the play icon along with a bug sign.
So simply click here or you can use the hotkey as well.
It is controlled by your command of D.
Now we need to create a JSON file
for the debugging, so just simply click here and after that,
basically we are debugging on the front inside of all website frontend
script site, so I will be creating a chrome configuration.
So click here.
Now this will create a launch audition file and under here
the major thing that you need to change is you need to change the
you are off your program.
So let me go to my next door just for a stable file.
And if I right click over here and if I open it as a live server,
let's see the port which it is currently running with.
So you can see the port is 5500.
Now let me copy this board here and let's paste this same port in my
you are also localhost and the port is 5500.
Right.
So now let me do one thing.
Let me close this ping pong project.
I don't need it anymore.
Now this is done.
Just simply save this file and simply close it.
Now we are ready to debug our code so I will be on my script audio
this file and let's see, I want to
I want to check the speed and score
whether it is changing or not or whether something is wrong with APL B1 score.
Right?
So here we are changing, we are setting the value of P and score
and first of all, I need to add a breakpoint
to pause my execution of the program.
So in order to add a breakpoint, you can see this
small empty area present inside your editor.
So this is nothing but the gutter area.
And inside here
you can click on any of the line where you want to add a breakpoint.
Then you can see a red mark is enabled.
And inside this you can also see the breakpoint.
I can add as many big point as I want,
and I can remove it by simply clicking on it again.
Or also I can just simply disable them as well.
So do disable them.
Just simply click on these checkboxes and this will disable them.
So you can see the line of the breakpoint inside here.
And according to the line number, you can disable it.
This is nothing but just simply commenting the breakpoint.
So let me do it once more.
Let me remove all of them
and let me go with the Python scope breakpoint.
Now I have set my breakpoint and now I will be launching
my program inside my chrome.
So click on this launch program.
I start debugging option.
This will open up your chrome and this will launch our program.
Now, once I click on Increase clearance, go by one, see what happens.
It is showing me all this highlighting that the school is making some change.
So see, nothing is change here right now.
But inside my debugging panel I can see some changes.
First of all, let me just decrease the size of this, a terminal
or the debugging console and let me make it a more larger
so that you can clearly see what is going on, right?
So you can see some variables, some void, and the call stack is added
also in the in the section here, you can see some commands
either or guns that I can execute.
So this first command is to continue the execution of program.
And the second one is step over.
This is step into and this is a step out and we will see what all means.
So first of all, we have in the script file, we have the variables.
Let me just minimize this.
What I don't need any more force for now.
So we will see.
We can see in the script file we have the variables
as it is game or what is our baby variable.
The player and score is a variable.
These are the variables and some other constants as well.
And now let's do one thing.
Let me just minimize the call stick as well
and let me increase the size of my variables.
All right?
So so that you can see them properly.
So here is our breakpoint.
And I need to continue the execution of program
so I can either click on this continue or I can click on this
a step or an and step and do so if I click on this step and do this
will execute the program sequence really in a manner it is supposed to execute.
And if I click on this step over, this will execute the program line by line.
So suppose there's a function call here.
This is school function call is here.
So if I click on this step over,
it will not show me that it has gone to this escape
set school function and it has returned the value of the school.
But as I do, it will jump on to the next statement.
So let me just show you, if I click on this, you can see
it has jumped on to this new line on here.
Also, you can see the player and score is now increased from 0 to 1.
And if I go to my ping pong project, it is not completed yet.
That debugging is paused.
Once this is complete, my player and school will increase here.
Right?
So now I can simply continue using this step over
and you can see this if Lopez not valid because my winning score is set
as fine also.
Now if I just again click on this now after that
my debugging is completed,
my one of the loops is completed, my action is completed.
Now, if I go to my browser, then I can see my player scored quarters now increased.
Now if I click on again, open on this player one score and then same,
this will open up the same.
Nothing is increased here and inside my debugging panel.
Currently my player one score is one player to score is zero.
Now if I use this step into option land, let's see what happens.
So in the step in, the option will take me to the function all sequentially, right?
So inside we are inside this accepts side score function
and here you can see it is checking whether the game is over or not
and currently is game over is false.
So it will go inside this loop.
Not about again click.
Basically there are the hotkeys for these as well.
So this is for F11 for this one,
this F10 step or F10 and F11 is for step do.
Now let us do once again
it is checking whether the score is equal to winning score or not.
You can see the score values is increased from 1 to 2.
Now let's do it once again
so it will add a written statement here or the return value here.
So now you can see a return value of two
is being returned from this function.
And again, if I do this, it will go to this line
and you can see the P1 score is now increased to two.
It will check this, whether this statement is correct or not.
Now, again, click on this.
This statement is false and now it will update the text content.
And once this is done, once our execution is finished,
you can see now a player score is changed to two.
So this is how to
basically use debugger inside of your score.
Now, there are a couple of things that we have left to talk about.
So this is the stop command.
If you want to stop the debugging, you can just simply click on this
stop icon and your browser window will now be gone.
It will be closed and the debugging will be stop, right?
So also the step out will take you out from the current function.
So now we have to talk about the board and we have to talk about the call stacks
and we will talk about it in the later part of this section.
But for now, in the next in the next lecture we will see
the server side, that is the Node.js side debugging using the escort aid.
So see you in the next lecture.