1
00:00:00,000 --> 00:00:04,900
[MUSIC]

2
00:00:04,900 --> 00:00:09,630
As programmers our highest aim
is to make error-free code.

3
00:00:09,630 --> 00:00:11,320
That's easier said than done.

4
00:00:11,320 --> 00:00:15,620
We're only human and it's easy to forget
a parenthesis, misspell a key word,

5
00:00:15,620 --> 00:00:18,650
or simply make a logical
error in your code.

6
00:00:18,650 --> 00:00:23,170
Computers run really fast,
they will execute your program in a snap.

7
00:00:23,170 --> 00:00:24,670
So when an error pops up,

8
00:00:24,670 --> 00:00:28,050
it's hard to identify the mistakes
that led to the error.

9
00:00:28,050 --> 00:00:32,300
I'd like to show you some techniques for
debugging JavaScript in the browser.

10
00:00:32,300 --> 00:00:34,900
But first, what is debugging?

11
00:00:34,900 --> 00:00:40,184
Debugging is the process of finding and
resolving defects in software.

12
00:00:40,184 --> 00:00:44,593
One way developers try to identify
what's gone wrong is to take snapshots

13
00:00:44,593 --> 00:00:48,450
of variables with console.log()
as the program runs.

14
00:00:48,450 --> 00:00:50,970
Logging variables to
the console at specific

15
00:00:50,970 --> 00:00:55,620
moments in your program can give you
insight into where things are going wrong.

16
00:00:55,620 --> 00:00:58,660
There are some issues with console.log(),
though.

17
00:00:58,660 --> 00:01:03,740
You have to write log statements in your
editor, save, switch over to the browser,

18
00:01:03,740 --> 00:01:08,020
refresh, and
if the value in the console isn't helpful,

19
00:01:08,020 --> 00:01:12,275
you'll need to go back in
to edit the code again etc.

20
00:01:12,275 --> 00:01:17,300
While this process isn't bad for three or
four repetitions, it gets old fast.

21
00:01:17,300 --> 00:01:21,960
In addition when you're done debugging,
you have to go back into your program and

22
00:01:21,960 --> 00:01:24,670
remove all of those log statements.

23
00:01:24,670 --> 00:01:29,630
Apart from being a pain, it's easy to miss
a few which can lead to confusion later

24
00:01:29,630 --> 00:01:32,830
when you or
someone else goes back into the code.

25
00:01:34,000 --> 00:01:38,060
And sometimes the value you
log to the console is live.

26
00:01:38,060 --> 00:01:40,923
Meaning it can change with
the state of your program.

27
00:01:40,923 --> 00:01:45,467
For example, if you log a div element
to inspect its class name, and

28
00:01:45,467 --> 00:01:49,430
after that the program
changes the class name.

29
00:01:49,430 --> 00:01:53,430
What you see in the log
will be the new class name.

30
00:01:53,430 --> 00:01:57,777
This can lead to a lot of wasted time
while you figure out why you see one thing

31
00:01:57,777 --> 00:02:00,085
in the code and another in the console.

32
00:02:00,085 --> 00:02:04,492
[SOUND] Because programs run so
quickly, debugging effectively

33
00:02:04,492 --> 00:02:08,825
requires stopping your program so
you can look under the hood.

34
00:02:08,825 --> 00:02:11,560
This is the first step in debugging.

35
00:02:11,560 --> 00:02:15,430
Stopping your program at
a specific line of code.

36
00:02:15,430 --> 00:02:19,330
This might be the same line where you
would put a console.log statement for

37
00:02:19,330 --> 00:02:19,908
example.

38
00:02:19,908 --> 00:02:21,920
Once the program's paused,

39
00:02:21,920 --> 00:02:27,402
you can then look around at the different
values that exist at that point in time.

40
00:02:27,402 --> 00:02:31,665
Those values could be strings,
numbers, or even dom elements.

41
00:02:31,665 --> 00:02:34,825
Whatever variables exist at that moment.

42
00:02:34,825 --> 00:02:39,970
And you can even change the values
to see how that affects the program.

43
00:02:39,970 --> 00:02:43,970
In this second step you're kind of
like a doctor trying to diagnose

44
00:02:43,970 --> 00:02:48,610
an illness by checking a patient's
heart rate and other vital signs.

45
00:02:48,610 --> 00:02:52,140
When you're ready to move forward,
you can execute or

46
00:02:52,140 --> 00:02:55,220
run the program one line at a time.

47
00:02:55,220 --> 00:03:00,310
This is the third phase,
stepping line by line through the code.

48
00:03:00,310 --> 00:03:05,060
This way you can see what's happening
inside your program as it runs.

49
00:03:05,060 --> 00:03:09,900
And see the variables, values, and
objects in the program change.

50
00:03:09,900 --> 00:03:12,580
Finally, as you diagnose your program,

51
00:03:12,580 --> 00:03:15,490
you'll identify the problems
that need fixing.

52
00:03:15,490 --> 00:03:20,330
You'll go to your editor, fix the bug,
and check the program again.

53
00:03:20,330 --> 00:03:24,010
While debugging you'll go through this
cycle many times, repeating these

54
00:03:24,010 --> 00:03:28,580
four steps until you've got your
program working the way you want it to.

55
00:03:28,580 --> 00:03:32,000
There are a number of tools
that let you debug like this.

56
00:03:32,000 --> 00:03:36,570
The one we'll learn about is built
right into Google's Chrome browser and

57
00:03:36,570 --> 00:03:38,300
it's called dev tools.

58
00:03:38,300 --> 00:03:43,772
This is the RSVP app we built in
the Treehouse course scripting by example.

59
00:03:43,772 --> 00:03:47,092
If you haven't taken that course,
I recommend doing so.

60
00:03:47,092 --> 00:03:50,420
I've linked to the course
in the teacher's notes.

61
00:03:50,420 --> 00:03:54,590
Being familiar with the code in this
app is a prerequisite for this course.

62
00:03:54,590 --> 00:04:00,470
So, at a minimum, make sure you understand
how it works before proceeding.

63
00:04:00,470 --> 00:04:03,000
I've modified the original project.

64
00:04:03,000 --> 00:04:08,416
I hardcoded some names for RSVP list
to give us some data to start with.

65
00:04:08,416 --> 00:04:11,162
I also added some bugs that we can fix.

66
00:04:11,162 --> 00:04:12,230
Let's get started