1
00:00:02,250 --> 00:00:09,030
So we got syntax errors which we can typically fix right in the IDE, other runtime errors which we can

2
00:00:09,030 --> 00:00:12,250
fix with the help of error messages by looking at them,

3
00:00:12,270 --> 00:00:16,070
now let's have a look at logical errors which are a bit harder to find.

4
00:00:17,040 --> 00:00:24,360
Let's say in my application here, when we add, then we're getting the user number input here,

5
00:00:24,360 --> 00:00:24,600
right,

6
00:00:24,630 --> 00:00:30,330
so that's triggering this function and there, let's say we're not doing that in parseInt, we're not converting

7
00:00:30,330 --> 00:00:32,000
this to a number.

8
00:00:32,000 --> 00:00:33,050
Of course we're doing it here

9
00:00:33,060 --> 00:00:35,600
but let's say we're not at this point yet,

10
00:00:35,700 --> 00:00:39,590
we forgot to add this code. That would be a typical logical error,

11
00:00:39,660 --> 00:00:44,220
everything will work technically but the app will not behave the way it should

12
00:00:44,220 --> 00:00:51,810
because we have a logical error in our code because now if I go back and I reload this page and I go

13
00:00:51,810 --> 00:00:57,270
back to the console here, you see if I enter a five here, we get this output which we saw and fixed in

14
00:00:57,270 --> 00:01:04,890
the last course module right, where the text is kind of concatenated instead of being calculated as a

15
00:01:04,890 --> 00:01:06,700
number.

16
00:01:06,720 --> 00:01:08,370
Now, we got no error message here

17
00:01:08,400 --> 00:01:10,190
so that's hard,

18
00:01:10,200 --> 00:01:12,500
so what can we do in such a case?

19
00:01:12,510 --> 00:01:17,090
Well we can get started with some good old console log debugging.

20
00:01:17,280 --> 00:01:20,850
We know that the behavior is not correct when I click the plus button,

21
00:01:20,940 --> 00:01:26,310
so we could go to that add function here which is the function getting triggered when we click the plus

22
00:01:26,310 --> 00:01:30,620
button and there, we could throw in a console log statement.

23
00:01:30,660 --> 00:01:40,330
Now let's console log the entered number here and let's maybe also console log the current result and

24
00:01:40,330 --> 00:01:45,510
you can console log multiple values here in one and the same console log statement.

25
00:01:45,640 --> 00:01:54,100
You can also combine this with some text, for example here I'll output input and this will simply print this

26
00:01:54,100 --> 00:01:59,920
text next to these values here so that if you have multiple console log statements, you can find this

27
00:02:00,010 --> 00:02:01,210
quicker.

28
00:02:01,210 --> 00:02:01,440
OK,

29
00:02:01,540 --> 00:02:03,310
so with that added, let's go back,

30
00:02:03,310 --> 00:02:09,720
let's reload here and here five, hit plus, we see input, then we see five and then we see zero

31
00:02:09,840 --> 00:02:15,640
and this doesn't make it super obvious the way it's printed here but we can see that 5 and 0 look

32
00:02:15,640 --> 00:02:16,600
different right

33
00:02:16,600 --> 00:02:24,080
even though both should be numbers. The 0 is blue and looks more number-ish if you will, the 5 is black

34
00:02:24,100 --> 00:02:25,990
just like the input text.

35
00:02:25,990 --> 00:02:30,700
So if you're really having a closer look here, you can already spot the problem which of course is that

36
00:02:30,700 --> 00:02:38,260
5 is treated as a string and 0 is treated as a number and therefore as you learned, this will be concatenated

37
00:02:38,260 --> 00:02:42,880
to a string instead of combined as a number or added as a number

38
00:02:42,880 --> 00:02:47,860
but it's still a bit hard to spot it here but you can get there with console log debugging.

39
00:02:47,860 --> 00:02:53,110
You can also have multiple console log statements in your code to understand the flow of your code,

40
00:02:53,290 --> 00:02:58,330
if you're not sure if something is executed in the right order, you could throw in multiple dummy console

41
00:02:58,330 --> 00:03:03,520
log statements to see if they are executed in the right order. Now

42
00:03:03,560 --> 00:03:09,080
as I said, we can fix this error here with console log but we might not be able to spot the problem just

43
00:03:09,110 --> 00:03:13,070
yet. In such a case, you can use the Chrome dev tools and there,

44
00:03:13,070 --> 00:03:19,940
go to the sources tab where you essentially find all the files Chrome loaded for displaying this web

45
00:03:19,940 --> 00:03:20,320
page.

46
00:03:20,450 --> 00:03:25,910
So here you find your HTML file but then you basically find the same folder structure I have because

47
00:03:25,940 --> 00:03:30,800
that's the folder structure that was loaded for this web page and you can go into the scripts folder

48
00:03:31,190 --> 00:03:36,320
and there you find the two scripts that make up this web page and here we can go into the app.js file

49
00:03:36,710 --> 00:03:42,140
and find the exact same code I wrote here because that is the code that was loaded by the browser and

50
00:03:42,140 --> 00:03:44,850
now here you can do something neat,

51
00:03:44,960 --> 00:03:46,660
you can place breakpoints.