1
00:00:02,400 --> 00:00:08,610
So you know how to write your code and how to dive into external resources and find support,

2
00:00:08,610 --> 00:00:13,950
now you're writing code and you're having errors in there and that will happen.

3
00:00:13,950 --> 00:00:15,780
That doesn't make you a bad developer,

4
00:00:15,870 --> 00:00:17,600
that's just totally normal,

5
00:00:17,610 --> 00:00:21,900
you will always also encounter errors when writing code.

6
00:00:21,900 --> 00:00:27,060
Now we need to learn how to find and fix them and that there also are different kinds of errors.

7
00:00:27,840 --> 00:00:32,930
So when we think about debugging our code, there are different kinds of errors you can get,

8
00:00:32,930 --> 00:00:38,690
you got errors which basically show you some error message, where your app maybe crashed, where it doesn't

9
00:00:38,690 --> 00:00:43,800
work at all and you've got logical errors. Logical errors don't make your app crash,

10
00:00:43,790 --> 00:00:48,470
they also don't result in an error message but your app behaves incorrectly.

11
00:00:48,470 --> 00:00:53,750
Now I will show you both kinds of errors in this module and show you how to find and fix both.

12
00:00:53,780 --> 00:00:59,270
Now if you're getting an error message, read and utilize it, seriously.

13
00:00:59,270 --> 00:01:05,090
So many people see an error message and they just go into panic mode and that's it,

14
00:01:05,090 --> 00:01:12,770
so many people don't even bother reading error messages even though many error messages are quite clear

15
00:01:12,950 --> 00:01:14,750
regarding what's wrong.

16
00:01:14,750 --> 00:01:21,440
So by just reading it and diving into the line of code which typically is included there, you can fix

17
00:01:21,500 --> 00:01:25,940
many errors. If you got an error message which you don't understand,

18
00:01:25,940 --> 00:01:28,280
you can Google it because guess what?

19
00:01:28,280 --> 00:01:31,460
You're probably not the first person who got an error message,

20
00:01:31,460 --> 00:01:35,190
so put it into google and you'll find many solutions there.

21
00:01:35,390 --> 00:01:37,570
But sometimes that alone doesn't do the trick,

22
00:01:37,570 --> 00:01:45,440
sometimes you need to look into your code whilst it's executing to get a feeling for how values of variables

23
00:01:45,440 --> 00:01:51,560
change over time and where something might be going into a wrong direction. For that you can use console

24
00:01:51,560 --> 00:01:53,280
log which I already showed you,

25
00:01:53,300 --> 00:01:59,620
this is a built-in command which outputs information in this developer tools console.

26
00:01:59,660 --> 00:02:03,950
It's invisible to the users of your page, unless they open the developer tools,

27
00:02:03,950 --> 00:02:05,090
then they can see it

28
00:02:05,120 --> 00:02:06,890
and that's important to keep in mind.

29
00:02:06,890 --> 00:02:09,630
Everyone can see what you output here not just you

30
00:02:09,830 --> 00:02:16,520
but it doesn't show up on the page itself and it allows you to log whatever you want, log whichever variable

31
00:02:16,520 --> 00:02:17,580
you want to log

32
00:02:17,590 --> 00:02:24,970
and this can be really useful for getting a first look into certain things or values of your code.

33
00:02:24,980 --> 00:02:31,340
You can also have multiple console log statements to see how things change throughout your program execution,

34
00:02:31,340 --> 00:02:37,820
so the kind of output, the flow of your application. But writing these console log statements can also

35
00:02:37,820 --> 00:02:41,530
be cumbersome, especially if you have a more complex error to fix.

36
00:02:41,600 --> 00:02:47,390
You might need to throw a lot of console log statements into your code, change them, configure them correctly

37
00:02:47,660 --> 00:02:49,680
and that can be annoying over time,

38
00:02:49,760 --> 00:02:55,850
so therefore also leverage the debugging tools which are built into modern browsers, I recommend the

39
00:02:55,850 --> 00:02:58,350
Chrome debugging tools which are really amazing

40
00:02:58,400 --> 00:03:04,340
but Firefox also has debugging tools built in for example. Same for Edge and so on but in this course, I will

41
00:03:04,340 --> 00:03:07,800
go with Chrome and show you how to work with those.

42
00:03:08,060 --> 00:03:13,010
Last but not least, your IDE can also help you with debugging and with fixing errors and

43
00:03:13,010 --> 00:03:15,470
we'll have a look at all these things now in the next lectures.