Mastering Debugging Tools

Live demo with JavaScript in Google Chrome

6 debugging tools that we found especially useful. At the least, you should be able to do the following:

Read backtraces

A backtrace is a summary of how your program got where it is. It shows one line per frame, for many frames, starting with the currently executing frame (frame zero), followed by its caller (frame one), and on up the stack. backtrace bt.

Log backtraces with console.trace()

Backtraces is another word for stack traces. With console.trace() you can trace your call, know exactly where it starts and trace its lifecycle.
1. You will place console.trace() within your script and inside of your function.
2. You will name each trace a different name so that you can look at different ones within the console.
3. In the console log you will then see the call stack listed in reverse chronological order.
OR
4. You can do console.trace() in true Ninja fashion and type it into the DevTools within your browser (sources) and then run the function from the console. The stack trace will look a little different and will include a few more names but the overall gist is the same.

Log values with console.log() – The console can do so many awesome things! Check out more features of the console here.

Use the console.log() method for any basic logging to the console. It takes one or more expressions as parameters and writes their current values to the console, concatenating multiple parameters into a space-delimited line.

Use a debugger to set break points – basic info below. More detailed info can be found here.

1. Open DevTools on the demo by pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).
2. Click the Sources tab.
3. Click Event Listener Breakpoints to expand the section. DevTools reveals a list of expandable event categories, such as Animation and Clipboard.
4. Next to the Mouse event category, click Expand Expand
   icon. DevTools reveals a list of mouse events, such as click, with checkboxes next to them.
5. Check the click checkbox
6. Click event that is causing the bug again. DevTools pauses the live demo and highlights a line of code in the Sources panel.

Use a debugger to step up and down the call stack – basic info below. More detailed info can be found here.

1. On the Sources panel of DevTools, click Step into next function to step through the execution of the function causing the bug from example 4.6, one line at a time.
2. Click Step over next function call . DevTools executes inputsAreEmpty() without stepping into it. Notice how DevTools skips a few lines of code. This is because inputsAreEmpty() evaluated to false, so the if statement’s block of code didn’t execute.

Use a debugger to evaluate code at a specific points

Line-of-code breakpoints are the most common type of breakpoint. When you’ve got a specific line of code that you want to pause on, use a line-of-code breakpoint. Try it now:
1. Look at any line of code (a function if possible)
2. To the left of the code, you can see the line number of that particular line of code: i.e. 32. Click on 32. DevTools puts a blue icon on top of 32. This means that there is a line-of-code breakpoint on this line. DevTools now always pauses before this line of code is executed.
3. Click Resume script execution. The script continues executing until it reaches the line of code you placed the breakpoint on.
4. Look at the lines of code in the function you chose that have already executed. DevTools will print out the values at that time (highlighted in some cases) next to the lines of code.