[MUSIC]
>> Hey folks, this is Burke.
In this video, we're going to take a look at how to use
the debugger in Visual Studio Code to
do things like set break-points,
and step into and step over,
and use the general debugging functionality
built into Visual Studio code.
Now, here in this project,
I have a file here called Currency JS that calculates currencies,
but it also throws an error, currently.
Let's assume for a second I didn't write this code,
so I'm not exactly sure where the error is.
Now, to go ahead and run this,
we have a launch configuration that we can
run by just clicking on the "Play" button here.
Now this will start the program,
and then the program will terminate because there was an error,
and so the program stops.
Now where do we see the output for this program?
If we press "Control" or "Command" back tick,
this opens the terminal,
but we don't see anything here,
because we didn't run the app from the terminal.
If we want to see the output from the debug process,
what we need to do is press "Command" or "Control Shift Y",
and that opens the debug console.
You can also access it from these three little dots here.
Here we can see that
there's a couple of different things going on.
So the first one is that we're printing out the value of
10 Euros and we're not truncating to do two decimal places.
That's not right, that needs to be fixed.
Then down here we have this actual error that's being thrown.
Let's go ahead and start to debug this using a break-point.
But where to start?
Where should we put a break-point?
Let's take a look at our code here.
If we look at the code that we're working with,
starting from the top and moving down,
there's quite a few functions,
but we get down here towards the end.
There's a print foreign values function that
looks like a good candidate for break-point.
So what we can do is set a break-point here
and just see if we even get this far.
That's a really good way to debug,
is just set a break-point and see if you get to the break-point,
and if you did, that means the error has not been thrown yet.
Let's go ahead and run and it breaks.
So debuggers attached.
Currently, we haven't thrown an error yet.
Let's go ahead and step into this function to
figure out what's happening inside the function.
To do that, we're going to use this arrow here,
which is the "Step Into" function,
and then what we can do is begin to step over
these lines to figure out what their values are.
So the first thing we want to do is make sure that
these parameters have values,
and we can mouse over them to see that,
or you can see them in the side panel here.
As new variables are added,
they automatically show up.
Let's step over and we'll step over the
four which puts us inside of the "if statement",
and if we step over again,
that puts us now inside of the "if statement" itself,
the body of the "if statement".
We can see that these converted value and
display value have now been added.
We can step over and see our converted value.
That's that 11.3636, repeating, that we saw.
Then display value gets set right here.
So let's step over that,
and the program is still running.
There hasn't been an error, we're good.
So display value is correct and this is what we actually
want to show people in the program's output.
The next line is actually going to log that out,
and you can see here it's going to log
out converted value, target currency.
Do you see the problem?
I see the problem. The problem is that we're using
converted value and we really want to use display value.
Let's go ahead and stop this and
change this to display value here,
and then the other thing we want to do is just remove
any break-points that we have in our program.
We can do that by going into
the break-points variable view here rather,
and unchecking this "Currency JS",
which removes the break-points that are currently in our program,
then we can run again, and of course, we don't see any output,
but remember its "Command" or "Control Shift Y",
which will open the Debug panel,
and we are now at $11.36 truncated, perfect.
We fixed the first of two errors.
But in the next video, we're going to
take a look at this thing right here,
which is called a "stack trace".
We're going to learn how to use
it to figure out where the error is,
and then how to do something called
rewinding the "stack trace" to further debug.