[MUSIC]
>> Hey folks, this is Burke.
In this video, we're going to take a look at
how to use some more advanced debugging features
in Visual Studio code like conditional breakpoints and watchers.
I have a project here that is broken in the debugger.
I know that this converted value right here is undefined.
That's a problem because that's what
causes the air passing undefined to this function.
But I don't know when this value is
undefined or how it's undefined,
or how many times this function is
called when this thing is undefined.
So what I really want to do is,
cause this line to break here
whenever this value is undefined and that way,
I know that the error is occurring and I can debug it.
To do that, what I want to do is,
add a conditional breakpoint.
So what I'm going to do is,
right-click next to the line 31 here.
So an ordinary breakpoint is a left-click.
To add a conditional breakpoint,
we can right-click and say "Add Conditional Breakpoint" Then here,
I'm going to check to see when is converted
value equal to undefined.
Just like this. What this will do
is the program will continue execution
until this value is undefined and then it will
stop here and that's before the error occurs.
If we run it subs,
so the error hasn't occurred yet,
but this value is undefined.
If we were to step over this line
through this function, it would occur.
So the next thing to figure out is,
which of these variables
are undefined and are causing this to be undefined.
So this value is a result of this function.
Well, let's check, value is 10.
The sourceCurrency is euros,
targetCurrency is yen, but we're getting an undefined value.
What's going on here?
So we know that maybe there's a problem
in the convertToCurrency function.
So if we go to convertToCurrency,
we can check and see what these values are.
So these are the parameters that are being passed in and then,
here's our exchange rate,
which is a result of the rates object.
Now, if we look at the rates object here,
the sourceCurrency is euro and the targetCurrency is yen.
So let's look at rates. If you look at US dollars,
there's one for euros and yen.
If we look at euros though,
there's only one for US dollar,
there isn't one for yen.
Interesting. Let's stop execution
here and let's go ahead and remove
all of our breakpoints by selecting this down here
in our breakpoint section and then at the bottom,
let's go to where we're actually setting the exchange rate.
So you can see that we're setting a rate for US dollars to
euros and we're setting one from US dollars to yen.
But we never actually set one for euros to yen,
but we shouldn't have to because the program knows how to
convert from dollars to euros and from dollars to yen.
Therefore, it should know how to convert from euros to yen.
So there's something going wrong here.
So let's set a break point here.
Let's go ahead and watch that
rates object and see if we can figure out what's happening.
To do that, we're going to add a watch here by clicking
the "Plus" and then typing "Rates". It's not available yet.
But once we start to debug,
now, we can see the rates object,
which has nothing in it.
So let's step over.
Now, after this first pass,
we have a value for euros and US dollars,
and US dollars to euros here.
Let's step over again.
Now, we have a yen.
So under our US dollars,
we have euros in yen, but under euros,
we still don't have anything,
which is why, when we go to this function here,
an error gets thrown.
So let's go to this setExchangeRate function here.
Then down here at the bottom,
you can see what it's doing
is it's just calculating the current rate.
It's not recalculating any other rates that
it now knows about because it has that information.
So in other words, it's only
calculating the direct rates we give it.
It's not calculating the indirect rates like euros to yen,
which we didn't give it, but it can still calculate.
So what we want to do is just replace this block here with
a loop that will loop over
all of the currencies that we have in rates,
and we'll calculate any new conversions
that we didn't explicitly provide,
but that the program can figure out on its own.
So with that change,
let's go ahead and run again. So let's run.
We can go ahead and remove our breakpoint,
and we'll continue on,
and the program finishes executing,
and if you remember from previous videos,
it's "Command" or "Control + Shift + Y"
gets to the debug panel and we fixed it.
There it is. The value of €10 is $11.36 and 1220 Japanese yen.
That's how you use watchers in conditional breakpoints
in Visual Studio Code to debug a node application.