What is Debugging?

[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