Best Practices for Debugging JavaScript Code in the Browser

All developers make mistakes and as a result bugs show up. We face bugs constantly and it’s essential for programmers to have good debugging skills. I’ll show you a few principles can make you more efficient in debugging.

A Few Good Principles of Debugging

• You have to first understand what your code should be doing, determine where issues are and start to debug to verify your assumptions.
• Once you figured out the source of the failure, focus on fixing the cause of the issue.
• When you test your assumptions you’ll breakpoints and console logs. So don’t forget to discard those after you finish debugging.
• And obviously do not debug in production!

Logging to the Console

console.log is the most common way to check the values of variables at various points in your app’s execution. But there are a few more ways to display those values in more convenient ways.

Sometimes we have a complex object or array that we want to inspect. We can still use console.log(array); but the console.table(array) will display the object as a nice table:

console.table([
  {animal: 'cayman', color: 'green' },
  {animal: 'crocodilian', color: 'yellow-green' }
]);

Will output:

Also we can use console.trace() for logging the exact path to reach that point. It will output a stack trace.

function meat(){
  function eggs(){
    console.trace();
  }
  eggs();
} 

We’ll see in the console something like this:

eggs
meat
<anonymous>

You can read the console API documentation for more methods.

Breakpoints

Breakpoints are a faster and more hassle-free way to debug your JavaScript code.

One common way to set a breakpoint in your code is to use the debugger statement:

if (someCondition) {
  debugger;
}

When the code hits the debugger statement execution stops, it will launch your browser’s developer tools and jump to the line where the debugger statement was found.

It will allow you to pause execution and then step through your code line by line. We can observe our code and values stored in variables and see at what point things start to go wrong. We can inspect the current state of the code and see exactly where we are in the code.

We can see the Call Stack showing all of the functions that were called up to that point. The Scope tab shows all the variables scopes we’ve got available at the current point and see all of the variables and their values in each scope.

We can add or remove a breakpoints by clicking on the line number. When the code is paused we can move through code using arrows. By clicking the blue arrow you will move on the next breakpoint or just to the end of the code if there isn’t a next breakpoint.

You can press the down arrow to skip into functions or right-facing arrow to step throw the code one line at the time.

And the debugger gives us the exact line of the code we need to go and fix.

Summary

I hope this was a helpful little intro to debugging your JavaScript code. Always remember that the best debugging tool is your mind and all those techniques won’t be helpful if you don’t understand what the problem is you’re trying to solve.