Debugging JavaScript Program

 When you write complex programs in JavaScript, you may sometimes encounter errors. These errors are reported differently by different browsers.

What is debugging of a program?

Definition: Debugging is the process of detecting and removing of existing and potential errors (also called as ‘bugs’) in a software code that can cause it to behave unexpectedly or crash. When the bug is fixed, then the software is ready to use

The basic steps in debugging

1. Recognize that a bug exists.
2. Isolate the source of the bug.
3. Identify the cause of the bug.
4. Determine a fix for the bug.
5. Apply the fix and test it.

What are the examples of debugging?

In hardware development, the debugging process typically looks for hardware components that are not installed or configured correctly. For example, an engineer might run a JTAG connection test to debug connections on an integrated circuit.

Reporting errors in the internet explorer

• Display a notification about every script error.
• Script debugging should not be disabled.

Reporting Errors in Netscape navigator

It provides a better description about error in comparison to Internet Explorer.  The JavaScript console by clicking Tools>web development>JavaScript console.

How to do debugging JavaScript program

Step 1: Reproduce the bug

Finding a series of actions that consistently reproduces a bug is always the first step to debugging.

1. Click Open Demo. The demo opens in a new tab.
2. Enter 5 in the Number 1 text box.
3. Enter 1 in the Number 2 text box.
4. Click Add Number 1 and Number 2. The label below the button says 5 + 1 = 51. The result should be 6. This is the bug you’re going to fix.

The result of 5 + 1 is 51. It should be 6.

Step 2: Get familiar with the Sources panel UI

1. Open DevTools by pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). This shortcut opens the Console panel.

The Console panel

2. Click the Sources tab.

The Sources panel

The Sources panel UI has 3 parts:

The 3 parts of the Sources panel UI

1. The File Navigator pane. Every file that the page requests is listed here.
2. The Code Editor pane. After selecting a file in the File Navigator pane, the contents of that file are displayed here.
3. The JavaScript Debugging pane. Various tools for inspecting the page’s JavaScript. If your DevTools window is wide, this pane is displayed to the right of the Code Editor pane.

Step 3: Pause the code with a breakpoint

A common method for debugging a problem like this is to insert a lot of console.log() statements into the code, in order to inspect values as the script executes.

For example:

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

The console.log() method may get the job done, but breakpoints can get it done faster. A breakpoint lets you pause your code in the middle of its execution, and examine all values at that moment in time. Breakpoints have a few advantages over the console.log() method:

• With console.log(), you need to manually open the source code, find the relevant code, insert the console.log() statements, and then reload the page in order to see the messages in the Console. With breakpoints, you can pause on the relevant code without even knowing how the code is structured.
• In your console.log() statements you need to explicitly specify each value that you want to inspect. With breakpoints, DevTools shows you the values of all variables at that moment in time. Sometimes there are variables affecting your code that you’re not even aware of.

In short, breakpoints can help you find and fix bugs faster than the console.log() method.

If you take a step back and think about how the app works, you can make an educated guess that the incorrect sum (5 + 1 = 51) gets computed in the click event listener that’s associated to the Add Number 1 and Number 2 button. Therefore, you probably want to pause the code around the time that the click listener executes. Event Listener Breakpoints let you do exactly that:

1. In the JavaScript Debugging pane, click Event Listener Breakpoints to expand the section. DevTools reveals a list of expandable event categories, such as Animation and Clipboard.
2. Next to the Mouse event category, click Expand  . DevTools reveals a list of mouse events, such as click and mousedown. Each event has a checkbox next to it.
3. Check the click checkbox. DevTools is now set up to automatically pause when any click event listener executes.

The click checkbox is enabled

1. Back on the demo, click Add Number 1 and Number 2 again. DevTools pauses the demo and highlights a line of code in the Sources panel. DevTools should be paused on this line of code:

function onClick() {

If you’re paused on a different line of code, press Resume Script Execution   until you’re paused on the correct line.

Event Listener Breakpoints are just one of many types of breakpoints available . It’s worth memorizing all the different types, because each type ultimately helps you debug different scenarios as quickly as possible.

Step 4: Step through the code

One common cause of bugs is when a script executes in the wrong order. Stepping through your code enables you to walk through your code’s execution, one line at a time, and figure out exactly where it’s executing in a different order than you expected. Try it now:

1. On the Sources panel of DevTools, click Step into next function call   to step through the execution of the onClick() function, one line at a time. DevTools highlights the following line of code:

if (inputsAreEmpty()) {

• 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.

That’s the basic idea of stepping through code. If you look at the code in get-started.js, you can see that the bug is probably somewhere in the updateLabel() function. Rather than stepping through every line of code, you can use another type of breakpoint to pause the code closer to the probable location of the bug.

Step 5: Set a line-of-code breakpoint

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:

1. Look at the last line of code in updateLabel():

label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

• To the left of the code you can see the line number of this particular line of code, which is 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.
• Click Resume script execution  . The script continues executing until it reaches line 32. On lines 29, 30, and 31, DevTools prints out the values of addend1, addend2, and sum to the right of each line’s semi-colon.

Step 6: Check variable values

The values of addend1, addend2, and sum look suspicious. They’re wrapped in quotes, which means that they’re strings. This is a good hypothesis for the explaining the cause of the bug. Now it’s time to gather more information. DevTools provides a lot of tools for examining variable values.

The Scope pane When you’re paused on a line of code, the Scope pane shows you what local and global variables are currently defined, along with the value of each variable. It also shows closure variables, when applicable. Double-click a variable value to edit it. When you’re not paused on a line of code, the Scope pane is empty.

The Scope pane

Step 7: Apply a fix

You’ve found a fix for the bug. All that’s left is to try out your fix by editing the code and re-running the demo. You don’t need to leave to apply the fix. You can edit JavaScript code directly within the UI. Try it now:

1. Click Resume script execution  .
2. In the Code Editor, replace line 31, var sum = addend1 + addend2, with var sum = parseInt(addend1) + parseInt(addend2).
3. Press Command+S (Mac) or Control+S (Windows, Linux) to save your change.
4. Click Deactivate breakpoints  . It changes blue to indicate that it’s active. While this is set, DevTools ignores any breakpoints you’ve set.
5. Try out the demo with different values. The demo now calculates correctly.