1 00:00:02,330 --> 00:00:09,440 Now what are breakpoints? Breakpoints allow you to tell the browser to stop code execution when a certain 2 00:00:09,440 --> 00:00:11,650 part in the code is reached. 3 00:00:11,660 --> 00:00:17,030 So for example here we can go to the add function and place a breakpoint right here 4 00:00:17,060 --> 00:00:23,510 so that we stop code execution when we reach this line, so that we can then look into our code and its 5 00:00:23,510 --> 00:00:26,240 current state during execution and 6 00:00:26,240 --> 00:00:29,360 that's what we'll be able to do. Now to place a breakpoint, 7 00:00:29,360 --> 00:00:34,760 you just need to click on a line number here and you see this mark, you can also place multiple breakpoints 8 00:00:34,760 --> 00:00:36,200 by the way. 9 00:00:36,200 --> 00:00:42,880 Now if you placed that, what will happen is that if you now run your code, in this case when I add 10, 10 00:00:42,880 --> 00:00:48,970 you see now this gets frozen, you see this message here paused in debugger, you can resume by clicking 11 00:00:48,970 --> 00:00:49,860 this play button 12 00:00:49,870 --> 00:00:51,520 but let's not do that now 13 00:00:51,770 --> 00:00:57,280 and here on the right, you see this line now gets highlighted in blue which means this is where the code 14 00:00:57,280 --> 00:01:05,800 execution stopped and now you can for example hover over things to see their current values, for example 15 00:01:05,890 --> 00:01:11,530 since code execution always stops before this line where you placed the breakpoint is executed, 16 00:01:11,620 --> 00:01:14,240 you see that entered number is currently undefined. 17 00:01:14,350 --> 00:01:18,120 Makes sense because as I mentioned, it stops before this is executed 18 00:01:18,130 --> 00:01:20,530 so this is all undefined. 19 00:01:20,590 --> 00:01:24,660 Now you can step through your code with these controls down there, 20 00:01:24,760 --> 00:01:29,410 you can always resume which means that it will continue running until it hits the next breakpoint if 21 00:01:29,410 --> 00:01:30,390 there is any. 22 00:01:30,670 --> 00:01:36,560 You can step over the next function call which basically means you move to the next line, 23 00:01:36,560 --> 00:01:38,080 I'll show this later, 24 00:01:38,230 --> 00:01:44,920 you can also step into a function call, that would be nice here because here we are calling a function 25 00:01:45,070 --> 00:01:51,040 and by stepping into it, you see we now jump to that code which is executed in that function 26 00:01:51,040 --> 00:01:56,920 and now here again I can hover over this, here since user input refers to an element in my HTML page, I even 27 00:01:56,920 --> 00:02:01,720 get it highlighted on the left which is another convenience feature and here since user input is 28 00:02:01,720 --> 00:02:07,390 a quite complex object, I can even find all the properties of this object and get the value that's in 29 00:02:07,390 --> 00:02:07,900 there, 30 00:02:07,900 --> 00:02:11,960 also by hovering over a value and we see this is a string, 10. 31 00:02:12,270 --> 00:02:15,030 This might already allow us to fix this error at this point 32 00:02:15,400 --> 00:02:17,340 but let's say we haven't fixed it yet. 33 00:02:17,350 --> 00:02:18,850 So we see that's a string, 34 00:02:18,850 --> 00:02:19,550 okay, 35 00:02:19,630 --> 00:02:24,700 we're now done, we can now step out of the current function back to the code where we had our breakpoint 36 00:02:25,060 --> 00:02:26,370 and we're now in the next line 37 00:02:26,410 --> 00:02:33,910 and we now see entered number is that string. Now we're not interested in this line so we can just go 38 00:02:33,910 --> 00:02:37,850 to the next line with step over next function call or this button, 39 00:02:37,930 --> 00:02:42,330 the difference is that this will always step over the next line 40 00:02:42,340 --> 00:02:48,220 and if a function is executed there, it will not go into that function but just call that function and 41 00:02:48,250 --> 00:02:53,230 go to the next line with the result of that function call available. This on the other hand will always 42 00:02:53,230 --> 00:02:58,190 go to the next step and if that's inside of a function, it will go into that function, 43 00:02:58,420 --> 00:03:05,060 so it kind of combines that this button and this button and we can go through our code with these buttons 44 00:03:05,060 --> 00:03:10,720 therefore. You also see I got this nice the output shown by the developer tools here which shows 45 00:03:10,720 --> 00:03:15,010 me the values of entered number and the initial result even without hovering over them 46 00:03:15,310 --> 00:03:21,400 and that for example should already allow us to kind of fix the problem here because now we see this 47 00:03:21,490 --> 00:03:27,730 is a string and this might allow us to see that that might be the problem with our addition, 48 00:03:27,730 --> 00:03:30,190 that we're working with a string here. 49 00:03:30,190 --> 00:03:35,350 If I go over this line, we see current result is this concatenated string and now it should definitely 50 00:03:35,350 --> 00:03:39,180 be clear that the problem is that we're kind of working with strings here, 51 00:03:39,190 --> 00:03:42,740 this would probably allow us to fix the error. 52 00:03:42,910 --> 00:03:48,970 Now before we fix it though, let me show you what else we got here in the debugging view. At the bottom 53 00:03:48,970 --> 00:03:51,130 for example, I haven't really talked about that, 54 00:03:51,160 --> 00:03:57,160 besides these buttons, you see your call stack. The call stack is essentially a list of all the functions 55 00:03:57,160 --> 00:04:03,580 that have been called. Let's say here we go into create and write output, if I do that, you see now this 56 00:04:03,580 --> 00:04:05,100 is on the call stack as well 57 00:04:05,500 --> 00:04:07,180 and below that is the add function, 58 00:04:07,180 --> 00:04:11,050 you can also click here to jump between the lines that are connected. 59 00:04:11,170 --> 00:04:16,990 What this means is that the topmost thing is always the function which is currently running and below 60 00:04:16,990 --> 00:04:21,180 that, you'll find other functions that were responsible for calling that function, 61 00:04:21,190 --> 00:04:25,330 so that kind of shows you the order of your code execution if you will. 62 00:04:25,330 --> 00:04:31,490 There, you also see the variables that are available, local variables and global variables. 63 00:04:31,630 --> 00:04:36,850 There by the way, we have a lot of dummy variables because in the browser, we've got a bunch of general 64 00:04:36,850 --> 00:04:43,030 information about the window available globally but that's also something I'll dive in later. Local variables 65 00:04:43,030 --> 00:04:48,970 here would be the variables available in this function here and that are essentially all the different 66 00:04:48,970 --> 00:04:54,880 parameters I'm getting and calc description and we can ignore the this thing here for now. 67 00:04:54,880 --> 00:05:01,330 So that can also be really nice, that you see which variables are available there and which values they 68 00:05:01,330 --> 00:05:02,300 currently have. 69 00:05:02,410 --> 00:05:07,660 You can even change the values here, for example here we could change this to a number and change initial 70 00:05:07,660 --> 00:05:12,760 result to a number to see whether this now executed correctly and if it does, you would see that the problem 71 00:05:12,760 --> 00:05:16,840 is not our addition logic but the logic where we get the input. 72 00:05:17,080 --> 00:05:21,340 So changing these values here is also something useful you can do. 73 00:05:21,580 --> 00:05:28,840 You can also set up a watcher here, there you can add an expression where you want to watch certain 74 00:05:28,840 --> 00:05:35,230 values. You can either just enter the value name, like entered number and now you always see the value of 75 00:05:35,260 --> 00:05:42,790 this variable here as it changes throughout your function execution but you can also add a more complex expression, 76 00:05:42,790 --> 00:05:48,580 like entered number plus current result and now you will always see the result of this as your code 77 00:05:48,580 --> 00:05:49,360 executes, 78 00:05:49,390 --> 00:05:56,340 so this can also be really nice for keeping track of how things changed during your code execution. Now 79 00:05:56,340 --> 00:05:59,610 needless to say that all of that is lost and cleared 80 00:05:59,610 --> 00:06:02,960 when you reload the page or when you're done with the function execution, 81 00:06:03,000 --> 00:06:08,010 so this is really just temporarily there in memory to help you debug your code. 82 00:06:10,880 --> 00:06:14,470 So that were normal breakpoints and how we use the debugger here. 83 00:06:14,480 --> 00:06:20,090 Now there also are other breakpoints which I want to show you before we ultimately fix this error here, 84 00:06:20,090 --> 00:06:22,460 for example you got conditional breakpoints. 85 00:06:22,550 --> 00:06:28,720 Let's say you have some error which you noticed only occurs if you entered numbers greater than 100 here. 86 00:06:28,860 --> 00:06:30,930 So let me resume this here, 87 00:06:30,950 --> 00:06:33,490 I clear the breakpoint by just clicking on it again 88 00:06:33,530 --> 00:06:37,940 and now of course our error here doesn't occur just for numbers greater than 100 89 00:06:37,970 --> 00:06:42,200 but let's assume that would be the case. In such cases if you right click here, 90 00:06:42,200 --> 00:06:49,010 you can also add a conditional breakpoint which allows you to write an expression like only pause here 91 00:06:49,370 --> 00:06:54,720 if get user number input is greater than 99. 92 00:06:54,740 --> 00:06:58,630 So now we would only pause here if a number greater than 99 is entered, 93 00:06:59,060 --> 00:07:06,770 so therefore here if I enter 100, you now see this pauses here. On the other hand, if I resume and 94 00:07:06,800 --> 00:07:08,970 enter five here, this doesn't pause. 95 00:07:09,680 --> 00:07:15,050 So conditional breakpoints can be nice and also very nice if we increase this at the bottom again are the 96 00:07:15,050 --> 00:07:16,840 event listener breakpoints. 97 00:07:16,880 --> 00:07:22,400 Now we know if something goes wrong when we click the plus button, it also will go wrong on any other 98 00:07:22,400 --> 00:07:23,140 button though, 99 00:07:23,180 --> 00:07:29,800 so we might not be interested in manually adding breakpoints here to add and subtract and to multiply, 100 00:07:29,810 --> 00:07:36,410 instead we might be interested in just pausing code whenever a click happens and you can do that 101 00:07:36,410 --> 00:07:38,830 with the event listener breakpoints. There 102 00:07:38,840 --> 00:07:45,120 you can expand mouse and there, click. If you click this, if you check this, 103 00:07:45,230 --> 00:07:49,160 now you will pause whenever a click occurs, for example if I click here, 104 00:07:49,160 --> 00:07:54,800 now execution pauses in the first line of the function which is handling that click 105 00:07:54,890 --> 00:07:56,960 and now we can navigate through that here. 106 00:07:56,960 --> 00:08:00,120 So now you see that pauses no matter where I click. 107 00:08:00,290 --> 00:08:06,160 Now important, it does not pause if I click anywhere else in the document, really only on event listeners 108 00:08:06,230 --> 00:08:08,960 I registered for click events, there 109 00:08:08,960 --> 00:08:15,850 it will pause. Let me clear this now because we don't need it anymore, we already found the error 110 00:08:15,850 --> 00:08:17,680 but that's also important to be aware of.