[MUSIC]

As programmers our highest aim is to make error-free code.

That's easier said than done.

We're only human and it's easy to forget a parenthesis, misspell a key word,

or simply make a logical error in your code.

Computers run really fast, they will execute your program in a snap.

So when an error pops up,

it's hard to identify the mistakes that led to the error.

I'd like to show you some techniques for debugging JavaScript in the browser.

But first, what is debugging?

Debugging is the process of finding and resolving defects in software.

One way developers try to identify what's gone wrong is to take snapshots

of variables with console.log() as the program runs.

Logging variables to the console at specific

moments in your program can give you insight into where things are going wrong.

There are some issues with console.log(), though.

You have to write log statements in your editor, save, switch over to the browser,

refresh, and if the value in the console isn't helpful,

you'll need to go back in to edit the code again etc.

While this process isn't bad for three or four repetitions, it gets old fast.

In addition when you're done debugging, you have to go back into your program and

remove all of those log statements.

Apart from being a pain, it's easy to miss a few which can lead to confusion later

when you or someone else goes back into the code.

And sometimes the value you log to the console is live.

Meaning it can change with the state of your program.

For example, if you log a div element to inspect its class name, and

after that the program changes the class name.

What you see in the log will be the new class name.

This can lead to a lot of wasted time while you figure out why you see one thing

in the code and another in the console.

[SOUND] Because programs run so quickly, debugging effectively

requires stopping your program so you can look under the hood.

This is the first step in debugging.

Stopping your program at a specific line of code.

This might be the same line where you would put a console.log statement for

example.

Once the program's paused,

you can then look around at the different values that exist at that point in time.

Those values could be strings, numbers, or even dom elements.

Whatever variables exist at that moment.

And you can even change the values to see how that affects the program.

In this second step you're kind of like a doctor trying to diagnose

an illness by checking a patient's heart rate and other vital signs.

When you're ready to move forward, you can execute or

run the program one line at a time.

This is the third phase, stepping line by line through the code.

This way you can see what's happening inside your program as it runs.

And see the variables, values, and objects in the program change.

Finally, as you diagnose your program,

you'll identify the problems that need fixing.

You'll go to your editor, fix the bug, and check the program again.

While debugging you'll go through this cycle many times, repeating these

four steps until you've got your program working the way you want it to.

There are a number of tools that let you debug like this.

The one we'll learn about is built right into Google's Chrome browser and

it's called dev tools.

This is the RSVP app we built in the Treehouse course scripting by example.

If you haven't taken that course, I recommend doing so.

I've linked to the course in the teacher's notes.

Being familiar with the code in this app is a prerequisite for this course.

So, at a minimum, make sure you understand how it works before proceeding.

I've modified the original project.

I hardcoded some names for RSVP list to give us some data to start with.

I also added some bugs that we can fix.

Let's get started