Most modern web browsers today, like Chrome, Firefox and Internet Explorer, come with an integrated JavaScript debugger. If you've never one of these debuggers but do program in JavaScript, it will be well worth the few minutes of your time to learn how to use them and save hours of web development effort.

The browsers Developer Tools are typically accessible by pressing F12. Each browser has a similar set of tools but are not all created equal. Some are definitely stronger for some tasks when it comes to JavaScript development. For example Internet Explorer (IE) has a split screen so you don't have to keep switching back and forth between the source code and the console to see the output of console API functions or errors. On the other hand, you do need to keep clicking the "Start debugging" button to start and stop debugging.

Debugging JavaScript Using Console API Functions

When I first started writing JavaScript, I often debugged my code using the alert() function. While I still do this at times, breakpoints and the console API functions allow me to just displays a message in the debugger console and continue execution.

For example, when executed, the following JavaScript command would display a message in the Developer Tools console and continue execution:

console.log("Total is now: " + t);

This lets you spy on your source code as it is being executed. In a loop going from 1 to 1,000, it would take forever to click OK on a thousand alert() windows.

There are other useful console API functions for debugging:

  • console.group()
  • console.info()
  • console.log()
  • console.groupEnd()

Debugging JavaScript Using Breakpoints

You can pause execution of your JavaScript by adding something called a Breakpoint. This is done by simply clicking on the line number where you want your Javascript to pause. A visual indicator will appear. You can even set multiple breakpoints. Then just reload your page and the script will stop wherever you set a breakpoint. In IE, you will need to also click the "Start debugging" button on the Script tab to enable the debugger.

Once your script has paused, you might notice that your browser is still waiting to finish loading the page. This is perfectly normal since it hasn't finished loading the page because the JavaScript code hasn't finished running.

While paused, you can view the value of variables in the right pane or by simply hovering your mouse over a variable in your source code. You can also continue execution of the script one line at a time. There are several buttons to do this including:

  • Step Into -- If the line of code contains a function, the debugger will go into the function and continue debugging line by line.
  • Step Over -- Regardless of whether the line contains a function, this button will continue to the next line of code.
  • Step Out  -- If you are in a function, it will continue execution of the rest of the function and pause on the next line as soon as it comes out of it.
  • Continue -- Will simply continue execution until the code ends or until the next break point.

Sometimes you may only want to start the debugger under a specific condition. For example, you might be looping through code 300 times but only want to start the debugger on loop number 258. In this case, you could use the debugger command. Example:

if (total == 258) {
    debugger;
}

There are other tools and techniques available but this article is intended to help you get started in debugging JavaScript code without overwhelming you. Developer Tools that come with web browser can save you hours of troubleshooting.

Found another useful JavaScript debugging technique? Post a comment about it!

Related Posts: