All language subtitles for 009 Debugging with the Console and Breakpoints

Welcome back.

So, let's now put the debugging process,

actually into practice.

And we're gonna start really small,

and just fix a very simple bug, using the console.

So let's suppose that in our Smart Thermometer,

that we were working on before,

we need to do some measurements in a unit called Kelvin.

which is the absolute temperature.

And a conversion to Kelvin is pretty easy.

So all you have to do is to add 273,

to the temperature in degrees Celsius.

So let's very quickly create a function,

which will perform this measurement,

and this is of course, all completely fictional,

and this function will actually take no arguments at all,

because we will get the measurement from a command prompt.

So we will basically pretend that the command prompt

is like the thermometer sensor.

And now let's actually create an object here.

So, an object for the measurement.

So we haven't used object in sometime,

and so let's remember that.

And let's just add some arbitrary properties here,

so the type of measurement is gonna be temperature,

and the unit will be in Celsius.

So basically, we will measure temperature in Celsius,

and then we return a converted, version.

And in there somewhere will be a bug.

And now, finally, the value of this measurement will come,

as I just mentioned, from a prompt.

So let's just say "degrees Celsius,"

and to that will then trigger a prompt,

and then let's convert that to Kelvin.

So as I said, all we need to do,

is to take the measurement in degrees Celsius,

and add 273.

So, that means measurement.value,

so this property here,

where that value in degrees Celsius will be stored,

plus 273.

And now we can return, converted value.

And then let's run the function,

and immediately log the result to the console,

so that's measure Kelvin.

And now I will give it a save,

and it will then ask me for the temperature,

so let's say, it's 10 degrees Celsius,

and so now let's wait for the result in Kelvin,

and we get this number, 10,273.

And that is not what we expected.

We wanted 283, but not this number.

So, there's got to be a bug somewhere,

and so let's find it.

and by the way,

the first stage of the process was already this one.

So A was to identify the bug.

Remember, and now we're going to stage B or stage two,

which is to find the bug.

And so, since the bug appears in the converted value,

which is this one,

and this one is derived from this measurement value

let's start by inspecting

that measurement value in the console

to see if something is wrong there.

So, console.log measurement.value,

give it a save,

and of course now we need to input it again,

and so it looks okay, actually, right, so it is 10,

so that's exactly what we input it.

So it looks kind of normal,

I just want to show something here now to you,

which is, that we actually do have things beside console.log

so we also have console.warn, and console.error.

And with this, we can basically generate warnings,

and errors in the console.

So 10 again, and you see that now,

this first one looks like a warning,

and the second one actually looks like an error.

So that's just a matter of formatting,

but it's still interesting I think

but let's take them out,

and so, yeah, right now it looks like everything is correct,

so let's dig a little bit deeper,

and take a look at the entire object.

And actually if it was myself,

I would have done that immediately,

but I want to show you the complete thought process here.

So anyway, let's say, measurement,

so that's the entire object, and not just the value.

Let's turn off this one as well give it a save, 10,

and let's open up, and now we actually see the problem.

You see, the value is a string, and that's because,

as I told you in the last lecture, the prompt function here,

always returns a string.

No matter what we input into that prompt window,

it will always just be a string.

And so that's why we get this end result here,

because as you remember, the + operator,

when it sees a string,

it will convert both operands to a string,

and then concatenate the strings.

Just as another curiosity here,

there is also another way of showing objects in the console,

which is really handy sometimes

so measurement, and so again 10,

and so console.table, gives us this nicely formatted table.

And especially for bigger objects,

that can be quite helpful.

And let's actually leave that here, so that you can see it.

So with this, we completed the second phase,

and that was to find the bug.

And now all we need to do is to fix the bug.

So we need to do that right here where it actually occurs.

Yeah, so up here, so let's see, "cfix."

And so the solution to this is to convert this string

that is returned to a number.

So, let's use the number function.

So we already learned about this one, and the last section,

and so now, we actually expect this to work.

And indeed, now we get 283,

which is exactly what we were looking for.

Great, so this was a very simple example,

of just using the console, in order to hunt down a bug,

and then fix it.

But now let's take it to the next level,

and learn how to use a debugger, in Google Chrome.

And let me quickly show that to you,

with this current function, and for that,

we actually need to make this a little bit bigger,

and now we go here into "Sources,"

so for the first time, we're using the Sources tab,

and then click here on script.Js,

which is our current script.

Okay, then as we move down, we have our code here,

and now here in the debugger,

which is basically these two panels here,

we can set something called breakpoints.

So let's put a breakpoint here in this line of code,

so here, and we set a breakpoint

by clicking here in this left bar,

and so this will set this red point,

which means that there is a breakpoint.

And now when we reload the page,

then the execution will stop exactly at this point.

So basically, execution will freeze in time,

and show us exactly what the execution looks like,

at that moment in time, and that includes all the values,

of all the defined variables.

So let's do that, let's reload,

and so you see, now we are in this function,

and now I can click this button here,

to resume the script execution,

and it will then start going over all these lines,

but now it can only continue if I input a value here.

So that's coming from this prompt, so again, I put 10 here,

hit Enter, then it does all of these lines here,

and finally, we reached the line where I set the breakpoint.

And so that's this one here marked in green now,

and again, at this point, we can then see all the variables.

So Kelvin is still undefined,

because the computation has not yet been done,

but we can take a look at measurement here.

So the value is 10, as we just input it,

and, yeah, this can be very helpful,

in case if you don't want to mess around

with a lot of console.logs, or other stuff like that.

Can also hover these here,

so here we can see the whole object,

here we then can see just the property value,

and now we can execute the rest of the function,

simply by hitting this "Step" button here.

So basically, this will then go to the next line of code,

so now we have Kelvin set at 283,

because now the previous line, just execute,

And here we are in the last line,

and so now we can see here return value will be 283.

So with this one here, we can execute one line at a time.

And for now just ignore these three buttons here,

you can explore them a little bit later.

Okay, so we're almost done, let's just click one more time,

and so we're out of the function now,

and now processing this next line of code,

let's just continue, and so now,

we went into some other stuff here,

and that's actually coming from the live server,

so nevermind, we can just close this,

and now click here on "Resume Script Execution,"

and now we're done.

So this is not all super intuitive, I would say

so just experiment around a little bit,

with these different buttons.

Okay, now, we just need to get rid of this breakpoint here,

otherwise the execution will always stop here in the future.

So just click this red dot here again,

and then it's gone.

And that's how we launch,

and use the debugger in Google Chrome.

Now let's quickly introduce a bigger bug here in our code,

and then fix it using the debugger.

And for that,

I'm simply going to go back,

to this function that we created before,

so, this one here,

and let's call this one here, "bug."

So I'll replace all the news with bug,

so we have here "calcTempAplitudeBug,"

and here we code that,

and then we code the "AmplitudeBug" into here as well, bug.

Cancel that one, and actually,

let's come here, and comment out this piece of code,

so that it doesn't annoy us all the time,

and we can just set the value here manually, to 10 Wrong.

Okay, this way we preserve the code that we have,

and also keep it running, or actually keep it working.

So here, let's just say, using a debugger.

Then down here, we are codling this function,

and here, let's just change this to something else

let's say four, okay, let's just run this now quickly,

and so we see that at the output

at this point is still correct

'cause we didn't introduce any bug yet.

So the max is nine, the min is one,

and therefore the amplitude is eight.

But now let's say that we did a mistake.

And we might have thought intuitively,

that the max and min values,

would be good to have a starting point of zero.

I think you can maybe see why that would make sense.

So for example, we started the sum at zero before,

so why not start the max and the minimum at zero too, right?

It would have been quite reasonable to think that.

And so let's pretend that we did think that,

but this will actually introduce a bug

because with this, this will not work.

So as you see, now,

here it says that the minimum value is zero, right?

So that's coming from from this console.log here,

which says now that minimum is zero,

entered aptitude therefore, is nine minus zero,

which is nine.

So, we identified debug here, okay,

let's again write that, "IDENTIFY"

and so, let's now go back here to Chrome,

and to the debugger to try to find that bug.

And the debugger is actually especially useful

inside of a loop.

And so that situation that we have right now,

so we are in a loop.

And so let's see here, now,

why the maximum and minimum values,

are not being correctly set.

Or actually, it's just the minimum.

The maximum is fine,

but still we need to analyze both of them.

So, what I'm gonna do here,

is to set a breakpoint right here.

Because that's where the maximum and the minimum,

are being computed, okay?

So let's reload, and right away,

we get to this point in the execution.

So at this point,

the temps variable has already been computed,

so it's already this complete array,

max and min are at zero, and so now we are doing this.

So we see that the current temperature is three,

that the maximum is zero, and so next step will end up here,

or let's actually continue, and indeed,

now we see that max is three, and that makes sense, right?

According to the rules that we described earlier.

Okay, moving on here, and we already moved on right

to the next loop iteration,

and that's because we don't have a breakpoint here.

So let's just put another one,

and so now we're in the second iteration.

And so now I is one as you can see here.

Okay, so the current temperature is five,

max is three, and so now the new max should become five,

and again, we jumped over this one,

but let's just keep going,

all right, so now the current temperature is one,

max is five, and so this one will now not get executed,

so now we can see this one, current temperature is one,

which is less than zero, and so,

nothing is going to happen, right?

Now, so here, we actually have the bug itself.

So we know intuitively,

that one here is supposed to be our lowest number.

But the problem is that zero is even lower.

And so it's impossible for any of these numbers here,

to be set as the minimum.

Again, because the initial value that we set,

is already lower,

than any of the values that we have in the array,

and so now, by analyzing this one by one in the debugger,

we can really understand that is what happens.

So again, in this situation,

is where we would like for this one to be set at a minimum.

But it's not gonna happen,

because one is not less than zero here.

And so now, there's not even a point to keep going,

well, we can still do that

so now the current temperature is four, which is this one

and just one more, so I is five,

so we're in the last iteration,

and we see that the maximum is already correct,

and now here, we can actually also see the loop finishing,

because we see that temps.length is six,

and I right now is also six.

So six is not less than six, of course,

and so the loop will now finish.

So you see, now we jumped over the loop,

and we are finally here in this next line of code,

let's go to the next one, and the value to return is nine,

as we already know, because of our bug in the min.

Okay, and that's it.

Now, we stepped over this entire function logic,

and saw exactly what happened line by line.

And again, we're in the in the live server here,

let's just remove this,

and resume the script execution.

Okay, great, so I hope that got you an idea

of how we can use the debugger,

just wanted to tell you that instead of going through

the Sources tab here,

we can actually also call the debugger right from our code.

And all we have to do for that

is to write debugger right here.

So JavaScript has this debugger statement,

and then when the browser sees this debugger,

it will automatically open up the debugger tool.

So when I give it a save now,

you see, that we are right at this point.

So it's like it put a breakpoint here in this point,

and then we can do everything, as we just saw before.

So let's click here on Continue,

or actually, let's just get rid of this here,

give it a save,

or stop this and reload, and yeah,

then we exited that debugger.

Now, this was, of course, just a small example,

but again, this is an extremely powerful tool,

that you can now use whenever you run into a problem,

in the future.

So take a moment now to go through the steps again maybe,

by yourself, and that will then help you,

make you a better developer.

because debugging really is an intrinsic part

of the development process.