Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
If you've ever written code you expected to do one thing, and it did another, you've created a bug. Experienced developers create bugs all the time as they work, though, so don't feel bad! The key is having tools and strategies to help you identify and fix those bugs quickly, so you can move on to the next task. This is the essence of debugging.
Prerequisite Course
For best results, we recommend first taking the following course:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
As programmers our highest aim
is to make error-free code.
0:04
That's easier said than done.
0:09
We're only human and it's easy to forget
a parenthesis, misspell a key word,
0:11
or simply make a logical
error in your code.
0:15
Computers run really fast,
they will execute your program in a snap.
0:18
So when an error pops up,
0:23
it's hard to identify the mistakes
that led to the error.
0:24
I'd like to show you some techniques for
debugging JavaScript in the browser.
0:28
But first, what is debugging?
0:32
Debugging is the process of finding and
resolving defects in software.
0:34
One way developers try to identify
what's gone wrong is to take snapshots
0:40
of variables with console.log()
as the program runs.
0:44
Logging variables to
the console at specific
0:48
moments in your program can give you
insight into where things are going wrong.
0:50
There are some issues with console.log(),
though.
0:55
You have to write log statements in your
editor, save, switch over to the browser,
0:58
refresh, and
if the value in the console isn't helpful,
1:03
you'll need to go back in
to edit the code again etc.
1:08
While this process isn't bad for three or
four repetitions, it gets old fast.
1:12
In addition when you're done debugging,
you have to go back into your program and
1:17
remove all of those log statements.
1:21
Apart from being a pain, it's easy to miss
a few which can lead to confusion later
1:24
when you or
someone else goes back into the code.
1:29
And sometimes the value you
log to the console is live.
1:34
Meaning it can change with
the state of your program.
1:38
For example, if you log a div element
to inspect its class name, and
1:40
after that the program
changes the class name.
1:45
What you see in the log
will be the new class name.
1:49
This can lead to a lot of wasted time
while you figure out why you see one thing
1:53
in the code and another in the console.
1:57
[SOUND] Because programs run so
quickly, debugging effectively
2:00
requires stopping your program so
you can look under the hood.
2:04
This is the first step in debugging.
2:08
Stopping your program at
a specific line of code.
2:11
This might be the same line where you
would put a console.log statement for
2:15
example.
2:19
Once the program's paused,
2:19
you can then look around at the different
values that exist at that point in time.
2:21
Those values could be strings,
numbers, or even dom elements.
2:27
Whatever variables exist at that moment.
2:31
And you can even change the values
to see how that affects the program.
2:34
In this second step you're kind of
like a doctor trying to diagnose
2:39
an illness by checking a patient's
heart rate and other vital signs.
2:43
When you're ready to move forward,
you can execute or
2:48
run the program one line at a time.
2:52
This is the third phase,
stepping line by line through the code.
2:55
This way you can see what's happening
inside your program as it runs.
3:00
And see the variables, values, and
objects in the program change.
3:05
Finally, as you diagnose your program,
3:09
you'll identify the problems
that need fixing.
3:12
You'll go to your editor, fix the bug,
and check the program again.
3:15
While debugging you'll go through this
cycle many times, repeating these
3:20
four steps until you've got your
program working the way you want it to.
3:24
There are a number of tools
that let you debug like this.
3:28
The one we'll learn about is built
right into Google's Chrome browser and
3:32
it's called dev tools.
3:36
This is the RSVP app we built in
the Treehouse course scripting by example.
3:38
If you haven't taken that course,
I recommend doing so.
3:43
I've linked to the course
in the teacher's notes.
3:47
Being familiar with the code in this
app is a prerequisite for this course.
3:50
So, at a minimum, make sure you understand
how it works before proceeding.
3:54
I've modified the original project.
4:00
I hardcoded some names for RSVP list
to give us some data to start with.
4:03
I also added some bugs that we can fix.
4:08
Let's get started
4:11
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up