1
00:00:02,220 --> 00:00:07,290
So now that we're able to find the error, let's fix it and let's say we think we know what the problem is

2
00:00:07,320 --> 00:00:08,670
but we're not sure yet.

3
00:00:08,700 --> 00:00:13,360
Of course we can always go back to our code and change it here and reload the page and try it again

4
00:00:13,440 --> 00:00:16,590
but you can also change your code here in the sources tab.

5
00:00:16,590 --> 00:00:20,330
There we have the suspicion that fetching our user input is the problem,

6
00:00:20,370 --> 00:00:22,930
so that this is a string instead of a number.

7
00:00:23,160 --> 00:00:26,100
So we could add parseInt here,

8
00:00:28,610 --> 00:00:31,290
like this to see what whether that does the trick.

9
00:00:31,430 --> 00:00:36,950
Now you just have to save this by pressing command or control save so that the star disappears up there

10
00:00:37,760 --> 00:00:40,880
and you get a warning that this only was saved locally,

11
00:00:40,910 --> 00:00:44,290
so only here in the browser, not to your filesystem,

12
00:00:44,330 --> 00:00:50,870
so the code we have here still is untouched. If you go to get user number input here, you'll see that's untouched.

13
00:00:50,930 --> 00:00:55,580
So you don't change your local code but you change it here in the browser so that you can test changes

14
00:00:55,580 --> 00:01:03,480
here in the browser without facing the danger of changing your real code and maybe breaking things there.

15
00:01:03,500 --> 00:01:08,190
So now if I add five again,

16
00:01:08,440 --> 00:01:13,180
now this is looking better because now you see this is not getting concatenated but instead, this really

17
00:01:13,180 --> 00:01:15,040
changes here at the end,

18
00:01:15,040 --> 00:01:19,090
it really adds five as a number.

19
00:01:19,090 --> 00:01:25,330
So now that we validated this fix, we can just take it and bring it to our real code and then apply it

20
00:01:25,330 --> 00:01:28,750
here, save and now reload

21
00:01:28,840 --> 00:01:35,350
and now we have the code we wrote and now we see this is now really working the way it should.

22
00:01:35,350 --> 00:01:39,030
So this is how we can work with the debugging tools.

23
00:01:39,070 --> 00:01:40,910
Now you've got more tabs up there,

24
00:01:40,990 --> 00:01:46,390
we'll explore them later in the course, for example the elements tab once we work more with the DOM and the

25
00:01:46,390 --> 00:01:47,870
performance and memory tab,

26
00:01:47,920 --> 00:01:54,110
these are tabs I'll dive in later once we optimize performance and memory usage of our application.

27
00:01:54,250 --> 00:01:58,270
For now, the sources tab, breakpoints and the console here,

28
00:01:58,270 --> 00:02:02,920
these are your bread and butter tools for finding and fixing errors.