WEBVTT 1 00:00:01.390 --> 00:00:03.060 line:15% Welcome back. 2 00:00:03.060 --> 00:00:05.970 line:15% So, let's now put the debugging process, 3 00:00:05.970 --> 00:00:07.873 line:15% actually into practice. 4 00:00:09.850 --> 00:00:11.760 And we're gonna start really small, 5 00:00:11.760 --> 00:00:15.890 and just fix a very simple bug, using the console. 6 00:00:15.890 --> 00:00:19.160 So let's suppose that in our Smart Thermometer, 7 00:00:19.160 --> 00:00:21.080 that we were working on before, 8 00:00:21.080 --> 00:00:25.000 we need to do some measurements in a unit called Kelvin. 9 00:00:25.000 --> 00:00:27.610 which is the absolute temperature. 10 00:00:27.610 --> 00:00:30.170 And a conversion to Kelvin is pretty easy. 11 00:00:30.170 --> 00:00:33.384 So all you have to do is to add 273, 12 00:00:33.384 --> 00:00:36.433 to the temperature in degrees Celsius. 13 00:00:37.300 --> 00:00:40.320 So let's very quickly create a function, 14 00:00:40.320 --> 00:00:42.183 which will perform this measurement, 15 00:00:44.810 --> 00:00:48.293 and this is of course, all completely fictional, 16 00:00:49.590 --> 00:00:53.073 and this function will actually take no arguments at all, 17 00:00:54.100 --> 00:00:57.840 because we will get the measurement from a command prompt. 18 00:00:57.840 --> 00:01:01.030 So we will basically pretend that the command prompt 19 00:01:01.030 --> 00:01:04.420 is like the thermometer sensor. 20 00:01:04.420 --> 00:01:07.453 And now let's actually create an object here. 21 00:01:08.650 --> 00:01:11.233 So, an object for the measurement. 22 00:01:13.160 --> 00:01:16.090 So we haven't used object in sometime, 23 00:01:16.090 --> 00:01:18.430 and so let's remember that. 24 00:01:18.430 --> 00:01:22.490 And let's just add some arbitrary properties here, 25 00:01:22.490 --> 00:01:26.480 so the type of measurement is gonna be temperature, 26 00:01:26.480 --> 00:01:30.135 and the unit will be in Celsius. 27 00:01:30.135 --> 00:01:33.560 So basically, we will measure temperature in Celsius, 28 00:01:33.560 --> 00:01:37.760 and then we return a converted, version. 29 00:01:37.760 --> 00:01:40.033 And in there somewhere will be a bug. 30 00:01:40.890 --> 00:01:44.830 And now, finally, the value of this measurement will come, 31 00:01:44.830 --> 00:01:47.863 as I just mentioned, from a prompt. 32 00:01:48.750 --> 00:01:51.987 So let's just say "degrees Celsius," 33 00:01:54.149 --> 00:01:56.793 and to that will then trigger a prompt, 34 00:01:57.740 --> 00:02:01.643 and then let's convert that to Kelvin. 35 00:02:04.150 --> 00:02:05.990 So as I said, all we need to do, 36 00:02:05.990 --> 00:02:09.340 is to take the measurement in degrees Celsius, 37 00:02:09.340 --> 00:02:12.140 and add 273. 38 00:02:12.140 --> 00:02:17.140 So, that means measurement.value, 39 00:02:17.150 --> 00:02:18.213 so this property here, 40 00:02:18.213 --> 00:02:21.653 where that value in degrees Celsius will be stored, 41 00:02:22.950 --> 00:02:25.513 plus 273. 42 00:02:26.700 --> 00:02:30.363 And now we can return, converted value. 43 00:02:31.620 --> 00:02:33.570 And then let's run the function, 44 00:02:33.570 --> 00:02:37.433 and immediately log the result to the console, 45 00:02:38.770 --> 00:02:41.620 so that's measure Kelvin. 46 00:02:41.620 --> 00:02:43.840 And now I will give it a save, 47 00:02:43.840 --> 00:02:46.250 and it will then ask me for the temperature, 48 00:02:46.250 --> 00:02:49.226 so let's say, it's 10 degrees Celsius, 49 00:02:49.226 --> 00:02:52.843 and so now let's wait for the result in Kelvin, 50 00:02:54.470 --> 00:02:59.470 and we get this number, 10,273. 51 00:03:00.160 --> 00:03:03.080 And that is not what we expected. 52 00:03:03.080 --> 00:03:06.972 We wanted 283, but not this number. 53 00:03:06.972 --> 00:03:09.929 So, there's got to be a bug somewhere, 54 00:03:09.929 --> 00:03:11.436 and so let's find it. 55 00:03:11.436 --> 00:03:12.526 and by the way, 56 00:03:12.526 --> 00:03:16.083 the first stage of the process was already this one. 57 00:03:17.200 --> 00:03:20.303 So A was to identify the bug. 58 00:03:22.160 --> 00:03:26.090 Remember, and now we're going to stage B or stage two, 59 00:03:26.090 --> 00:03:28.023 which is to find the bug. 60 00:03:28.900 --> 00:03:33.412 And so, since the bug appears in the converted value, 61 00:03:33.412 --> 00:03:35.420 which is this one, 62 00:03:35.420 --> 00:03:38.770 and this one is derived from this measurement value 63 00:03:38.770 --> 00:03:40.880 let's start by inspecting 64 00:03:40.880 --> 00:03:42.950 that measurement value in the console 65 00:03:42.950 --> 00:03:45.800 to see if something is wrong there. 66 00:03:45.800 --> 00:03:49.463 So, console.log measurement.value, 67 00:03:52.360 --> 00:03:53.203 give it a save, 68 00:03:54.060 --> 00:03:56.859 and of course now we need to input it again, 69 00:03:56.859 --> 00:04:01.500 and so it looks okay, actually, right, so it is 10, 70 00:04:01.500 --> 00:04:04.120 so that's exactly what we input it. 71 00:04:04.120 --> 00:04:06.170 So it looks kind of normal, 72 00:04:06.170 --> 00:04:08.680 I just want to show something here now to you, 73 00:04:08.680 --> 00:04:13.680 which is, that we actually do have things beside console.log 74 00:04:14.270 --> 00:04:19.270 so we also have console.warn, and console.error. 75 00:04:21.070 --> 00:04:24.000 And with this, we can basically generate warnings, 76 00:04:24.000 --> 00:04:25.883 and errors in the console. 77 00:04:27.660 --> 00:04:31.100 So 10 again, and you see that now, 78 00:04:31.100 --> 00:04:33.140 this first one looks like a warning, 79 00:04:33.140 --> 00:04:35.573 and the second one actually looks like an error. 80 00:04:36.540 --> 00:04:39.123 So that's just a matter of formatting, 81 00:04:40.050 --> 00:04:41.950 but it's still interesting I think 82 00:04:41.950 --> 00:04:44.890 but let's take them out, 83 00:04:44.890 --> 00:04:49.730 and so, yeah, right now it looks like everything is correct, 84 00:04:49.730 --> 00:04:51.680 so let's dig a little bit deeper, 85 00:04:51.680 --> 00:04:53.933 and take a look at the entire object. 86 00:04:58.330 --> 00:05:00.000 And actually if it was myself, 87 00:05:00.000 --> 00:05:02.040 I would have done that immediately, 88 00:05:02.040 --> 00:05:05.600 but I want to show you the complete thought process here. 89 00:05:05.600 --> 00:05:08.910 So anyway, let's say, measurement, 90 00:05:08.910 --> 00:05:11.853 so that's the entire object, and not just the value. 91 00:05:12.700 --> 00:05:16.803 Let's turn off this one as well give it a save, 10, 92 00:05:18.010 --> 00:05:23.010 and let's open up, and now we actually see the problem. 93 00:05:23.690 --> 00:05:27.830 You see, the value is a string, and that's because, 94 00:05:27.830 --> 00:05:31.810 as I told you in the last lecture, the prompt function here, 95 00:05:31.810 --> 00:05:33.870 always returns a string. 96 00:05:33.870 --> 00:05:36.710 No matter what we input into that prompt window, 97 00:05:36.710 --> 00:05:38.720 it will always just be a string. 98 00:05:38.720 --> 00:05:42.450 And so that's why we get this end result here, 99 00:05:42.450 --> 00:05:44.840 because as you remember, the + operator, 100 00:05:44.840 --> 00:05:46.480 when it sees a string, 101 00:05:46.480 --> 00:05:49.000 it will convert both operands to a string, 102 00:05:49.000 --> 00:05:50.713 and then concatenate the strings. 103 00:05:52.420 --> 00:05:55.020 Just as another curiosity here, 104 00:05:55.020 --> 00:05:59.210 there is also another way of showing objects in the console, 105 00:05:59.210 --> 00:06:01.540 which is really handy sometimes 106 00:06:02.570 --> 00:06:07.570 so measurement, and so again 10, 107 00:06:08.150 --> 00:06:12.173 and so console.table, gives us this nicely formatted table. 108 00:06:13.140 --> 00:06:15.810 And especially for bigger objects, 109 00:06:15.810 --> 00:06:17.493 that can be quite helpful. 110 00:06:18.800 --> 00:06:23.400 And let's actually leave that here, so that you can see it. 111 00:06:23.400 --> 00:06:27.280 So with this, we completed the second phase, 112 00:06:27.280 --> 00:06:30.460 and that was to find the bug. 113 00:06:30.460 --> 00:06:33.290 And now all we need to do is to fix the bug. 114 00:06:33.290 --> 00:06:37.070 So we need to do that right here where it actually occurs. 115 00:06:37.070 --> 00:06:41.127 Yeah, so up here, so let's see, "cfix." 116 00:06:42.480 --> 00:06:45.900 And so the solution to this is to convert this string 117 00:06:45.900 --> 00:06:48.250 that is returned to a number. 118 00:06:48.250 --> 00:06:50.883 So, let's use the number function. 119 00:06:52.900 --> 00:06:57.063 So we already learned about this one, and the last section, 120 00:06:58.240 --> 00:07:00.933 and so now, we actually expect this to work. 121 00:07:02.600 --> 00:07:05.690 And indeed, now we get 283, 122 00:07:05.690 --> 00:07:08.313 which is exactly what we were looking for. 123 00:07:09.270 --> 00:07:11.860 Great, so this was a very simple example, 124 00:07:11.860 --> 00:07:16.150 of just using the console, in order to hunt down a bug, 125 00:07:16.150 --> 00:07:18.010 and then fix it. 126 00:07:18.010 --> 00:07:20.080 But now let's take it to the next level, 127 00:07:20.080 --> 00:07:23.573 and learn how to use a debugger, in Google Chrome. 128 00:07:28.210 --> 00:07:30.280 And let me quickly show that to you, 129 00:07:30.280 --> 00:07:33.060 with this current function, and for that, 130 00:07:33.060 --> 00:07:36.010 we actually need to make this a little bit bigger, 131 00:07:36.010 --> 00:07:39.000 and now we go here into "Sources," 132 00:07:39.000 --> 00:07:41.610 so for the first time, we're using the Sources tab, 133 00:07:41.610 --> 00:07:44.540 and then click here on script.Js, 134 00:07:44.540 --> 00:07:46.973 which is our current script. 135 00:07:48.560 --> 00:07:51.793 Okay, then as we move down, we have our code here, 136 00:07:53.130 --> 00:07:54.880 and now here in the debugger, 137 00:07:54.880 --> 00:07:57.650 which is basically these two panels here, 138 00:07:57.650 --> 00:08:00.690 we can set something called breakpoints. 139 00:08:00.690 --> 00:08:04.750 So let's put a breakpoint here in this line of code, 140 00:08:04.750 --> 00:08:06.800 so here, and we set a breakpoint 141 00:08:06.800 --> 00:08:08.853 by clicking here in this left bar, 142 00:08:09.710 --> 00:08:11.750 and so this will set this red point, 143 00:08:11.750 --> 00:08:14.420 which means that there is a breakpoint. 144 00:08:14.420 --> 00:08:16.610 And now when we reload the page, 145 00:08:16.610 --> 00:08:20.710 then the execution will stop exactly at this point. 146 00:08:20.710 --> 00:08:23.351 So basically, execution will freeze in time, 147 00:08:23.351 --> 00:08:26.900 and show us exactly what the execution looks like, 148 00:08:26.900 --> 00:08:31.040 at that moment in time, and that includes all the values, 149 00:08:31.040 --> 00:08:33.550 of all the defined variables. 150 00:08:33.550 --> 00:08:35.743 So let's do that, let's reload, 151 00:08:38.290 --> 00:08:40.680 and so you see, now we are in this function, 152 00:08:40.680 --> 00:08:42.370 and now I can click this button here, 153 00:08:42.370 --> 00:08:44.513 to resume the script execution, 154 00:08:45.510 --> 00:08:48.410 and it will then start going over all these lines, 155 00:08:48.410 --> 00:08:52.910 but now it can only continue if I input a value here. 156 00:08:52.910 --> 00:08:57.480 So that's coming from this prompt, so again, I put 10 here, 157 00:08:57.480 --> 00:09:00.720 hit Enter, then it does all of these lines here, 158 00:09:00.720 --> 00:09:04.330 and finally, we reached the line where I set the breakpoint. 159 00:09:04.330 --> 00:09:07.260 And so that's this one here marked in green now, 160 00:09:07.260 --> 00:09:10.980 and again, at this point, we can then see all the variables. 161 00:09:10.980 --> 00:09:12.960 So Kelvin is still undefined, 162 00:09:12.960 --> 00:09:16.052 because the computation has not yet been done, 163 00:09:16.052 --> 00:09:18.333 but we can take a look at measurement here. 164 00:09:20.310 --> 00:09:23.793 So the value is 10, as we just input it, 165 00:09:25.050 --> 00:09:28.520 and, yeah, this can be very helpful, 166 00:09:28.520 --> 00:09:30.750 in case if you don't want to mess around 167 00:09:30.750 --> 00:09:34.533 with a lot of console.logs, or other stuff like that. 168 00:09:36.850 --> 00:09:39.260 Can also hover these here, 169 00:09:39.260 --> 00:09:41.440 so here we can see the whole object, 170 00:09:41.440 --> 00:09:44.640 here we then can see just the property value, 171 00:09:44.640 --> 00:09:47.520 and now we can execute the rest of the function, 172 00:09:47.520 --> 00:09:50.640 simply by hitting this "Step" button here. 173 00:09:50.640 --> 00:09:53.490 So basically, this will then go to the next line of code, 174 00:09:54.790 --> 00:09:56.823 so now we have Kelvin set at 283, 175 00:09:57.750 --> 00:10:01.090 because now the previous line, just execute, 176 00:10:01.090 --> 00:10:03.010 And here we are in the last line, 177 00:10:03.010 --> 00:10:07.778 and so now we can see here return value will be 283. 178 00:10:07.778 --> 00:10:11.750 So with this one here, we can execute one line at a time. 179 00:10:11.750 --> 00:10:14.580 And for now just ignore these three buttons here, 180 00:10:14.580 --> 00:10:16.580 you can explore them a little bit later. 181 00:10:17.740 --> 00:10:20.690 Okay, so we're almost done, let's just click one more time, 182 00:10:21.600 --> 00:10:23.450 and so we're out of the function now, 183 00:10:24.960 --> 00:10:27.290 and now processing this next line of code, 184 00:10:27.290 --> 00:10:30.490 let's just continue, and so now, 185 00:10:30.490 --> 00:10:32.040 we went into some other stuff here, 186 00:10:32.040 --> 00:10:34.860 and that's actually coming from the live server, 187 00:10:34.860 --> 00:10:37.660 so nevermind, we can just close this, 188 00:10:37.660 --> 00:10:41.410 and now click here on "Resume Script Execution," 189 00:10:41.410 --> 00:10:42.723 and now we're done. 190 00:10:43.750 --> 00:10:47.410 So this is not all super intuitive, I would say 191 00:10:47.410 --> 00:10:49.790 so just experiment around a little bit, 192 00:10:49.790 --> 00:10:51.323 with these different buttons. 193 00:10:52.460 --> 00:10:56.210 Okay, now, we just need to get rid of this breakpoint here, 194 00:10:56.210 --> 00:10:59.640 otherwise the execution will always stop here in the future. 195 00:10:59.640 --> 00:11:02.300 So just click this red dot here again, 196 00:11:02.300 --> 00:11:03.920 and then it's gone. 197 00:11:03.920 --> 00:11:05.270 And that's how we launch, 198 00:11:05.270 --> 00:11:08.250 and use the debugger in Google Chrome. 199 00:11:08.250 --> 00:11:13.240 Now let's quickly introduce a bigger bug here in our code, 200 00:11:13.240 --> 00:11:16.350 and then fix it using the debugger. 201 00:11:16.350 --> 00:11:17.183 And for that, 202 00:11:17.183 --> 00:11:19.120 I'm simply going to go back, 203 00:11:19.120 --> 00:11:21.193 to this function that we created before, 204 00:11:23.040 --> 00:11:24.633 so, this one here, 205 00:11:27.970 --> 00:11:32.130 and let's call this one here, "bug." 206 00:11:32.130 --> 00:11:34.893 So I'll replace all the news with bug, 207 00:11:36.100 --> 00:11:39.150 so we have here "calcTempAplitudeBug," 208 00:11:39.150 --> 00:11:40.470 and here we code that, 209 00:11:40.470 --> 00:11:43.703 and then we code the "AmplitudeBug" into here as well, bug. 210 00:11:46.290 --> 00:11:48.453 Cancel that one, and actually, 211 00:11:51.260 --> 00:11:55.650 let's come here, and comment out this piece of code, 212 00:11:55.650 --> 00:11:57.890 so that it doesn't annoy us all the time, 213 00:11:57.890 --> 00:12:02.230 and we can just set the value here manually, to 10 Wrong. 214 00:12:02.230 --> 00:12:06.060 Okay, this way we preserve the code that we have, 215 00:12:06.060 --> 00:12:10.883 and also keep it running, or actually keep it working. 216 00:12:12.010 --> 00:12:16.053 So here, let's just say, using a debugger. 217 00:12:17.940 --> 00:12:20.587 Then down here, we are codling this function, 218 00:12:20.587 --> 00:12:23.700 and here, let's just change this to something else 219 00:12:23.700 --> 00:12:28.700 let's say four, okay, let's just run this now quickly, 220 00:12:29.690 --> 00:12:31.260 and so we see that at the output 221 00:12:31.260 --> 00:12:32.690 at this point is still correct 222 00:12:32.690 --> 00:12:35.680 'cause we didn't introduce any bug yet. 223 00:12:35.680 --> 00:12:38.253 So the max is nine, the min is one, 224 00:12:38.253 --> 00:12:41.760 and therefore the amplitude is eight. 225 00:12:41.760 --> 00:12:44.590 But now let's say that we did a mistake. 226 00:12:44.590 --> 00:12:46.970 And we might have thought intuitively, 227 00:12:46.970 --> 00:12:49.440 that the max and min values, 228 00:12:49.440 --> 00:12:52.603 would be good to have a starting point of zero. 229 00:12:53.720 --> 00:12:57.410 I think you can maybe see why that would make sense. 230 00:12:57.410 --> 00:13:00.850 So for example, we started the sum at zero before, 231 00:13:00.850 --> 00:13:05.240 so why not start the max and the minimum at zero too, right? 232 00:13:05.240 --> 00:13:08.330 It would have been quite reasonable to think that. 233 00:13:08.330 --> 00:13:11.320 And so let's pretend that we did think that, 234 00:13:11.320 --> 00:13:14.140 but this will actually introduce a bug 235 00:13:14.140 --> 00:13:16.960 because with this, this will not work. 236 00:13:16.960 --> 00:13:19.000 So as you see, now, 237 00:13:19.000 --> 00:13:22.880 here it says that the minimum value is zero, right? 238 00:13:22.880 --> 00:13:25.620 So that's coming from from this console.log here, 239 00:13:25.620 --> 00:13:27.920 which says now that minimum is zero, 240 00:13:27.920 --> 00:13:32.450 entered aptitude therefore, is nine minus zero, 241 00:13:32.450 --> 00:13:33.920 which is nine. 242 00:13:33.920 --> 00:13:37.430 So, we identified debug here, okay, 243 00:13:37.430 --> 00:13:41.920 let's again write that, "IDENTIFY" 244 00:13:41.920 --> 00:13:44.360 and so, let's now go back here to Chrome, 245 00:13:44.360 --> 00:13:48.198 and to the debugger to try to find that bug. 246 00:13:48.198 --> 00:13:51.000 And the debugger is actually especially useful 247 00:13:51.000 --> 00:13:52.480 inside of a loop. 248 00:13:52.480 --> 00:13:54.843 And so that situation that we have right now, 249 00:13:56.240 --> 00:13:57.980 so we are in a loop. 250 00:13:57.980 --> 00:13:59.380 And so let's see here, now, 251 00:13:59.380 --> 00:14:01.530 why the maximum and minimum values, 252 00:14:01.530 --> 00:14:03.910 are not being correctly set. 253 00:14:03.910 --> 00:14:05.770 Or actually, it's just the minimum. 254 00:14:05.770 --> 00:14:07.290 The maximum is fine, 255 00:14:07.290 --> 00:14:09.763 but still we need to analyze both of them. 256 00:14:10.730 --> 00:14:12.170 So, what I'm gonna do here, 257 00:14:12.170 --> 00:14:16.670 is to set a breakpoint right here. 258 00:14:16.670 --> 00:14:19.350 Because that's where the maximum and the minimum, 259 00:14:19.350 --> 00:14:21.770 are being computed, okay? 260 00:14:21.770 --> 00:14:25.240 So let's reload, and right away, 261 00:14:25.240 --> 00:14:27.973 we get to this point in the execution. 262 00:14:28.815 --> 00:14:30.400 So at this point, 263 00:14:30.400 --> 00:14:33.460 the temps variable has already been computed, 264 00:14:33.460 --> 00:14:36.150 so it's already this complete array, 265 00:14:36.150 --> 00:14:40.033 max and min are at zero, and so now we are doing this. 266 00:14:40.890 --> 00:14:44.150 So we see that the current temperature is three, 267 00:14:44.150 --> 00:14:48.873 that the maximum is zero, and so next step will end up here, 268 00:14:52.850 --> 00:14:55.390 or let's actually continue, and indeed, 269 00:14:55.390 --> 00:14:59.890 now we see that max is three, and that makes sense, right? 270 00:14:59.890 --> 00:15:03.040 According to the rules that we described earlier. 271 00:15:03.040 --> 00:15:08.040 Okay, moving on here, and we already moved on right 272 00:15:08.480 --> 00:15:10.210 to the next loop iteration, 273 00:15:10.210 --> 00:15:12.510 and that's because we don't have a breakpoint here. 274 00:15:12.510 --> 00:15:14.010 So let's just put another one, 275 00:15:16.260 --> 00:15:18.750 and so now we're in the second iteration. 276 00:15:18.750 --> 00:15:21.263 And so now I is one as you can see here. 277 00:15:23.510 --> 00:15:27.820 Okay, so the current temperature is five, 278 00:15:27.820 --> 00:15:32.093 max is three, and so now the new max should become five, 279 00:15:35.378 --> 00:15:38.737 and again, we jumped over this one, 280 00:15:38.737 --> 00:15:40.483 but let's just keep going, 281 00:15:43.010 --> 00:15:47.440 all right, so now the current temperature is one, 282 00:15:47.440 --> 00:15:51.043 max is five, and so this one will now not get executed, 283 00:15:52.290 --> 00:15:55.840 so now we can see this one, current temperature is one, 284 00:15:55.840 --> 00:15:58.190 which is less than zero, and so, 285 00:15:58.190 --> 00:16:00.290 nothing is going to happen, right? 286 00:16:00.290 --> 00:16:04.550 Now, so here, we actually have the bug itself. 287 00:16:04.550 --> 00:16:05.787 So we know intuitively, 288 00:16:05.787 --> 00:16:09.175 that one here is supposed to be our lowest number. 289 00:16:09.175 --> 00:16:12.760 But the problem is that zero is even lower. 290 00:16:12.760 --> 00:16:16.190 And so it's impossible for any of these numbers here, 291 00:16:16.190 --> 00:16:17.840 to be set as the minimum. 292 00:16:17.840 --> 00:16:20.540 Again, because the initial value that we set, 293 00:16:20.540 --> 00:16:21.920 is already lower, 294 00:16:21.920 --> 00:16:24.570 than any of the values that we have in the array, 295 00:16:24.570 --> 00:16:28.600 and so now, by analyzing this one by one in the debugger, 296 00:16:28.600 --> 00:16:31.630 we can really understand that is what happens. 297 00:16:31.630 --> 00:16:33.540 So again, in this situation, 298 00:16:33.540 --> 00:16:37.060 is where we would like for this one to be set at a minimum. 299 00:16:37.060 --> 00:16:38.420 But it's not gonna happen, 300 00:16:38.420 --> 00:16:41.793 because one is not less than zero here. 301 00:16:43.862 --> 00:16:47.040 And so now, there's not even a point to keep going, 302 00:16:47.040 --> 00:16:48.340 well, we can still do that 303 00:16:49.560 --> 00:16:52.800 so now the current temperature is four, which is this one 304 00:16:55.320 --> 00:16:58.940 and just one more, so I is five, 305 00:16:58.940 --> 00:17:00.919 so we're in the last iteration, 306 00:17:00.919 --> 00:17:03.523 and we see that the maximum is already correct, 307 00:17:07.150 --> 00:17:10.726 and now here, we can actually also see the loop finishing, 308 00:17:10.726 --> 00:17:14.690 because we see that temps.length is six, 309 00:17:14.690 --> 00:17:17.650 and I right now is also six. 310 00:17:17.650 --> 00:17:20.540 So six is not less than six, of course, 311 00:17:20.540 --> 00:17:22.523 and so the loop will now finish. 312 00:17:23.780 --> 00:17:26.450 So you see, now we jumped over the loop, 313 00:17:26.450 --> 00:17:29.700 and we are finally here in this next line of code, 314 00:17:29.700 --> 00:17:34.450 let's go to the next one, and the value to return is nine, 315 00:17:34.450 --> 00:17:37.793 as we already know, because of our bug in the min. 316 00:17:39.930 --> 00:17:41.720 Okay, and that's it. 317 00:17:41.720 --> 00:17:45.920 Now, we stepped over this entire function logic, 318 00:17:45.920 --> 00:17:48.730 and saw exactly what happened line by line. 319 00:17:48.730 --> 00:17:51.800 And again, we're in the in the live server here, 320 00:17:51.800 --> 00:17:53.203 let's just remove this, 321 00:17:54.130 --> 00:17:56.883 and resume the script execution. 322 00:17:58.750 --> 00:18:02.090 Okay, great, so I hope that got you an idea 323 00:18:02.090 --> 00:18:04.440 of how we can use the debugger, 324 00:18:04.440 --> 00:18:08.291 just wanted to tell you that instead of going through 325 00:18:08.291 --> 00:18:10.130 the Sources tab here, 326 00:18:10.130 --> 00:18:14.100 we can actually also call the debugger right from our code. 327 00:18:14.100 --> 00:18:16.100 And all we have to do for that 328 00:18:16.100 --> 00:18:19.113 is to write debugger right here. 329 00:18:20.115 --> 00:18:23.350 So JavaScript has this debugger statement, 330 00:18:23.350 --> 00:18:26.200 and then when the browser sees this debugger, 331 00:18:26.200 --> 00:18:30.100 it will automatically open up the debugger tool. 332 00:18:30.100 --> 00:18:32.040 So when I give it a save now, 333 00:18:32.040 --> 00:18:35.560 you see, that we are right at this point. 334 00:18:35.560 --> 00:18:38.810 So it's like it put a breakpoint here in this point, 335 00:18:38.810 --> 00:18:41.983 and then we can do everything, as we just saw before. 336 00:18:44.420 --> 00:18:47.113 So let's click here on Continue, 337 00:18:48.650 --> 00:18:52.230 or actually, let's just get rid of this here, 338 00:18:52.230 --> 00:18:53.183 give it a save, 339 00:18:54.390 --> 00:18:57.690 or stop this and reload, and yeah, 340 00:18:57.690 --> 00:19:00.450 then we exited that debugger. 341 00:19:00.450 --> 00:19:03.280 Now, this was, of course, just a small example, 342 00:19:03.280 --> 00:19:05.910 but again, this is an extremely powerful tool, 343 00:19:05.910 --> 00:19:08.970 that you can now use whenever you run into a problem, 344 00:19:08.970 --> 00:19:10.210 in the future. 345 00:19:10.210 --> 00:19:13.660 So take a moment now to go through the steps again maybe, 346 00:19:13.660 --> 00:19:15.940 by yourself, and that will then help you, 347 00:19:15.940 --> 00:19:17.760 make you a better developer. 348 00:19:17.760 --> 00:19:20.950 because debugging really is an intrinsic part 349 00:19:20.950 --> 00:19:22.773 of the development process.