1 00:00:01,390 --> 00:00:03,060 Welcome back. 2 00:00:03,060 --> 00:00:05,970 So, let's now put the debugging process, 3 00:00:05,970 --> 00:00:07,873 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.