Tutorial

Best Practices for Debugging JavaScript Code in the Browser

Published on July 5, 2019
Default avatar

By Julia Ihnatova

Best Practices for Debugging JavaScript Code in the Browser

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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:

Logging table to the console

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.

The debugger statement in action in Chrome DevTools

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Julia Ihnatova

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel