Different ways to debug Javascript code

Following are the various ways to debug the JavaScript code

  • Browser console
  • Browser debugger
  • Using ‘debugger’ keyword in the code
  • Browser tools


  • Use the console to log diagnostic information during development. It can be used to dump the variables values in the browser console.
  • console.trace() is used to determine the sequence of function call, this is similar to the call stack feature of the browser debugger.


function add(num1, num2) {
  console.log(“Adding numbers: “, num1, num2);
  return num1 + num2;

let result =  add(4, 5);
console.log(‘Addition is:’, result);

This method is not effective, due to following-

  • If there are multiple console.log() statement in your code, you will get lost in the rat’s nest.
  • Not effective, as it might involve more switching time between editor and browser.
  • No stepwise and line by line debugging of code.


  • Browser debugger involves use of breakpoints to pause your JavaScript code and investigate the values of variables and the call stack at that particular moment of time.
  • When you set a breakpoint on a line of code, the code always pauses on that line of code until you delete the breakpoint, disable it, or make it conditional.
  • It also allows to watch variables. Watching variables within source keeps you out of the console and focused on improving your code.


  • The JavaScript code execution pauses when it encounters a keyword “debugger” in the code. This is similar to setting breakpoints in the browser debugger.
  • Allows stepwise and line by line debugging of the code.


function add(arr) {
  return arr
  .reduce((prev, next) => {
    return prev + next;
let result = add([ 4, 2, 3 ]);


Various tools are available to debug the JavaScript code.

  • Firebug for Firefox
  • Dragonfly for opera etc