Debugging with Dev Tools

Using console.log() repeatedly can be a slow and inefficient way to to debug JavaScript programs. The better way to debug is as follows:

1. Stop program execution at a given line is the first step in proper debugging.
2. Explore values while the app is paused.
3. Step through code, line by line.
4. Fix bug

To start debugging JavaScript programs in the browser, use the Google Chrome Dev Tools.

Event Listener Breakpoints

1. Dev Tools > Sources > select: index.html > Event Listener Breakpoints > Control > check: Change
2. Now proceed to interact with your app until a change happens.
3. App screen will be pause, look in the right pane under Scope.

Step Over

4. To continue, click on the Step Over icon at the top of the right pane. Program lines are highlighted before they’re executed, not after.
5. As you Step Over to the next lines, you’ll notice variable values changing.
6. Click on a DOM object in the inspected program will you take you to it in the Elements tab.
7. You can use the Console to test and modify your program’s variables while the program is paused.

Deactivate Breakpoints

When you’re done testing, to deactivate breakpoints, click on the Deactivate Breakpoints icon above.

Line Breakpoint

1. Set a breakpoint on one of the lines of your program by clicking on the line number.
2. Then click the Play/Resume button to unpause the JavaScript interpreter.
3. Program will be executed and pause at that breakpoint.
4. Now, check the Scope panel to observe how the values of variables and DOM elements changing each time you click Play/Resume.

Conditional Breakpoints

Right-click the line and choose "Add conditional breakpoint…". Here, you can add any condition, whereas the interpreter will pause at that breakpoint only if the condition is met.

Step Into

The Step Over button doesn’t go into functions, it steps over them, which is where it gets its name.
To test what goes on in functions, we need the button next to it, Step Into.
Once you reach a breakpoint where there is a function, click Step Into, then head to the Call Stack area to the right. The functions at the buttom of the stack were called first, new called functions will be added to the top of the stack. Each time you Step Into a function, that function gets added to the stack.
If you click on any of the functions, the Scope area will change accordingly.

Step Out

Step Out lets you execute and complete the current function and jump back to the function that called it.
In other words, you step out of the current function and back to the point in the program it was called.
Don’t forget to disable your breakpoints once you’re done.

Pause on Exceptions: for Errors

The Pause on Exceptions button, let’s you inspect the state that is causing the error.
To catch errors in your program, set a breakpoint to freeze the program just before the error occurs by clicking the Pause on Exceptions button.
Now whenever the interpreter encounters an error or exception it will pause just before the error is thrown.

Break on…

Right-click on a DOM element in the Elements tab, and select Break on.... You’ll be provided with three options, for which the program flow will break:

1. subtree modifications
2. attribute modifications
3. node removal

Watch

There are oftentimes you may find yourself typing a variable over and over again as you try to debug a program. You can alleviate this with watch expressions. For example, if you want to track the value stored in the input element, you can tell Dev Tools to watch that value:

1. Click Watch above the call stack then p
2. Press the + sign.
3. Now type input.value and hit Return.

You can type any expression here by the way. Anything that produces a value can be monitored with Watch expressions (e.g. variable names, equality checks, or object properties.)