1
00:00:02,260 --> 00:00:08,980
Now let's start with errors which you can typically avoid, for example simple syntax errors.

2
00:00:08,980 --> 00:00:12,190
Let's say you simply forgot to close your array here.

3
00:00:12,400 --> 00:00:16,340
Now right away, the IDE yells at us basically,

4
00:00:16,480 --> 00:00:18,810
you see we got the red squiggly line here,

5
00:00:18,850 --> 00:00:24,970
I got a red mark here on the right in the scroll bar and the file itself also turned red

6
00:00:24,970 --> 00:00:27,650
here on the left in the explorer, it's now red

7
00:00:27,990 --> 00:00:32,630
and this indicates that there is something wrong which the IDE detected right away.

8
00:00:32,650 --> 00:00:37,990
You can then always hover over the red squiggly lines to get a description of the problem and here, you

9
00:00:37,990 --> 00:00:41,430
see expression or comma expected. Now to be honest,

10
00:00:41,440 --> 00:00:46,870
that's not the best error message because it doesn't really describe the problem here, that a closing

11
00:00:46,870 --> 00:00:48,640
square bracket is missing.

12
00:00:48,670 --> 00:00:54,670
Nonetheless, you quickly see that something is wrong here and trivial errors like this of course can

13
00:00:54,670 --> 00:00:57,180
be easily fixed because you should quickly see that

14
00:00:57,250 --> 00:01:00,130
yes we got a missing square bracket here.

15
00:01:00,130 --> 00:01:05,860
Now that might sound dumb but it's easy to mistype or to accidentally delete something and therefore

16
00:01:05,890 --> 00:01:11,580
having a look at what your IDE tells you is really a great idea and it's something you should do.

17
00:01:11,740 --> 00:01:16,720
Now sometimes you also got errors which don't really show up here in the IDE,

18
00:01:16,720 --> 00:01:21,520
for example if I tried to call parse here, like this.

19
00:01:21,520 --> 00:01:24,020
This is not a built-in function actually

20
00:01:24,040 --> 00:01:28,870
and the IDE knows that it's not built into Javascript but maybe it's a function defined by us,

21
00:01:28,990 --> 00:01:31,210
maybe in another file, therefore

22
00:01:31,210 --> 00:01:36,220
the IDE here doesn't yell at me because it doesn't know whether I might have defined a function called

23
00:01:36,220 --> 00:01:38,880
pass in another file, for example here

24
00:01:38,890 --> 00:01:44,620
I'm also calling output result which is not defined in this file and which also is not a default Javascript

25
00:01:44,620 --> 00:01:48,990
function but since I have it defined in vendor.js, this will work.

26
00:01:49,000 --> 00:01:52,400
So it would be bad if the IDE would complain about this line and

27
00:01:52,420 --> 00:01:53,780
it's the same here now.

28
00:01:53,850 --> 00:01:55,780
Now of course this is not built-in though

29
00:01:55,780 --> 00:02:02,680
but maybe I mistyped and therefore use this or I had a function named parse, in the past I deleted it

30
00:02:02,860 --> 00:02:05,060
and forgot to update this code.

31
00:02:05,080 --> 00:02:10,200
So this is code which works in the IDE but it will not work here.

32
00:02:10,540 --> 00:02:16,720
If I reload this page and I try to add, you see no matter how hard I press my buttons, nothing happens

33
00:02:16,720 --> 00:02:21,460
here. In such a case, it's always a great idea to open the developer tools

34
00:02:21,590 --> 00:02:27,370
and my recommendation would be that you do this in incognito mode so that no browser extensions you

35
00:02:27,370 --> 00:02:31,960
might have installed can interfere here because they might also change something on the page or run

36
00:02:31,960 --> 00:02:37,060
some scripts which might show up in your developer tools even though they're not directly related to

37
00:02:37,060 --> 00:02:43,960
your code. So open the developer tools, here under view, developer, developer tools or with the shortcut

38
00:02:43,960 --> 00:02:49,840
you see there and there, you should always go to the console first because it's here where you'll find

39
00:02:49,840 --> 00:02:56,870
potential error messages and indeed here you see I got error messages regarding parse not being defined,

40
00:02:56,930 --> 00:03:02,240
now that's the part I meant with reading the error messages. I could now go into panic mode because there's

41
00:03:02,260 --> 00:03:03,490
so much red here

42
00:03:03,580 --> 00:03:07,160
but if we just have a look at the error message, it's pretty clear what the problem is.

43
00:03:07,180 --> 00:03:08,640
Parse is not defined,

44
00:03:08,680 --> 00:03:09,450
okay,

45
00:03:09,490 --> 00:03:15,160
and we even see where this was called, it was called in the get user number input function which we find

46
00:03:15,160 --> 00:03:15,960
in app.js

47
00:03:15,990 --> 00:03:18,890
and there, this is the line number, line number 7,

48
00:03:18,890 --> 00:03:22,420
the error also is stemming from line number 7

49
00:03:22,570 --> 00:03:29,140
and then if that is not helpful to us, we see that it was called in get user number input, which in turn

50
00:03:29,410 --> 00:03:36,640
happened because this add event here on our button basically trigger and that was set up in line number

51
00:03:36,640 --> 00:03:37,960
33.

52
00:03:37,990 --> 00:03:44,270
Now we can even click here and we're taken right to the source code, here in the developer tools.

53
00:03:44,270 --> 00:03:48,110
So here under the sources tab, we now see the problematic source code

54
00:03:48,110 --> 00:03:54,200
and since this is the code as it was executed by the browser, so at runtime, the browser knows that indeed

55
00:03:54,210 --> 00:03:56,940
here parse is not defined. The IDE

56
00:03:56,950 --> 00:04:02,360
can't know that because it doesn't know which scripts we might be loading, potentially from other servers and

57
00:04:02,360 --> 00:04:03,010
so on

58
00:04:03,170 --> 00:04:08,840
but the browser totally knows what's available at this point of time and it knows there is no built-in

59
00:04:08,840 --> 00:04:09,860
parse function

60
00:04:09,920 --> 00:04:15,680
and there also is no code written by me or by some other third-party which I added that would add a

61
00:04:15,680 --> 00:04:16,700
parse function.

62
00:04:16,700 --> 00:04:20,450
Therefore the browser knows parse does not exist

63
00:04:20,450 --> 00:04:24,470
and now we can have a look at our code and analyze what went wrong here.

64
00:04:24,500 --> 00:04:27,650
Did we expect to write a parse function on our own?

65
00:04:27,650 --> 00:04:33,920
Well maybe we should do so now, maybe we have a parse function but it's called parse input and we therefore

66
00:04:33,920 --> 00:04:36,860
need to rename it or as is the case here,

67
00:04:36,860 --> 00:04:38,880
we're looking for the parseInt function.

68
00:04:39,170 --> 00:04:43,790
So this is how we can narrow down the issue and fix it with the help of the error message we're getting.