" Debugging " is usually useful for understanding program execution sequence and for identifying run-time values.  Debugging is usually done for identifying bugs present in an application. As javascript programs are always executed in the browsers (Google chrome, Internet explorer etc..) hence debugging must be done using browsers .

Debugging javascript code using Google chrome:

You can use either console.log statement or debugger keyword for debugging your javascript application code. When javascript engine observes Debugger keyword it will stop javascript execution, and the program execution then controlled by the programmer using F10 or F11 keys. For debugging javascript code follow the below given steps in Google chrome browser. 1. Write following code in an html file. 2. Open the program (HTML page) using google chrome. 3. Click on customize and control google chrome (3 horizontal lines icon) in google chrome. 4. Select tools and Javascript console. 5. Click on the button or other control which will call the javascript function in which debugger keyword is present.


<script language="javascript" type="text/javascript">
function fnAdd() {
var otbA=document.getElementById('tbA');
var otbB=document.getElementById('tbB');

var value1=otbA.value;
var value2=otbB.value;
alert(parseInt(value1) +parseInt(value2));
a:<input type="text" id="tbA"/>
b:<input type="text" id="tbB"/>
<input type="submit" id="btnAdd" value="Add" onclick="fnAdd()"/>
<input type="submit" id="btnSub" value="Add" onclick="fnSub()"/>
See the following screen shot, this is how the google chrome appears during debugging. javascript debugging
Note: Most of the programmers use debugger efficiently for completing their coding.

How Programmers use debuggers for completing program code:

Let's say you want to get data present in a text box from a javascript function. Then first get dom object node reference to the text box using, before writing code make sure to attach debugger.

var otba=document.getElementById('textBoxId');
During debugging time place cursor on otba after execution of document.getElementById , which will give you all available properties under text box node , pick up the right property based on your needs(refer above screen shot) .

Debugging javascript code in Internet explorer:

1. Click on gear icon. 2. Internet options. 3. Click on advanced tabs. 4. Disable script debugging (Internet explorer) 5. Disable script debugging(others) 6. Follow the same procedure which is explained in Debugging javascript code using Google chrome.

Debugging javascript code in Mozilla Firefox:

1. By default MFF will not be having inbuilt debugger. 2. Download and install venkmann debugger or firebug tool. 3. Follow the same procedure which is explained in Debugging javascript code using Google chrome.