---

Search posts under JavaScript:

---

JavaScript debugging in JavaScript

How to debug in JavaScript?

Debuggers

Debuggers are used for searching errors in programming code. Debugging is not an easy process, but now a days all the browsers are with builtin debugger.

Built-in debuggers can be turned 'on' and 'off', turining debuggers 'on' will show the errors to the user, where as turning 'off' can not show any error.

With the help of debugger, we can set breakpoints and we can examine the variables while the code is executing.

BreakPoint: Breakpoint is a place where execution of code is stopped. 

Generally, you can activate debugging in your browser by clicking function key 'F12'. Afetr clicking the function select 'Console' in the debugging window.

Let us see an example for finding an error after activating the debugging in browser.

<p>Browser area</p>

<script>
    function {
       alert("This is TechFunda"); // This code is error, because function is opened, but not closed.
</script>

In the above code snippet we mentioned HTML code in <p> element and JavaScript code in <script> block, in JavaScript code we have declared a function without closing the braces, so it is an error. In the output (browser) we can find only HTML code. 

After opening the browser, please click function key 'F12' and select 'Console' on the top o find the error.

OUTPUT

In the above output we can find that, the HTML content is showing in the browser, to find the error we activated debugging by clicking  'F12', there we can see the option 'Console' (Marked portion), click on the marked portion to find the error.

How to set Breakpoints?

Setting Breakpoints is pretty simple, in the debugger window we can set Breakpoints in JavaScript code. 

After setting the Breakpoints, if we run the code at each breakpoint, JavaScript will stop executing, and we can examine JavaScript values.

After examine the values, we can resume the execution code.

console.log() Method

console.log() method is used to display JavaScript values in debugger window.

<h1>console.log() method</h1>

<p>To activate debugging window in your browswer (Chrome, IE, Firefox) click F12, and select 'Console', there you can find the JavaScript console.log() method value.</p>

<script>
    x = 2;
    y = 3;
    z = 4;

    r = x * y + z  // This value gives caluclation as 10
    console.log(r);
</script>

JavaScript values in Debugger window

In the above code snippet we are calculating the x, y, z values with the console.log() method, the result of x*y+z will not show directly on browser. The result value will be appeared on the dugging window.

OUTPUT

Debugger Keyword

In JavaScript, the debugging keyword is used to stop the execution of JavaScript code and calls the debugging function. In case the debugger is turned on the below code will stop executing.

<p id="myID"></p>

<p>If the debugger is turned on, the below script code stops executing before the third line.</p>

<script>
    var a = 3 * 10;
    debugger;
    document.getElementById("myId").innerHTML = x;
</script>

Debugger Keyword

In the above code snippet we used the debugger keyword in the script code, which is used to stop the execution of code. 

OUTPUT

The above output is showing after turning on the debug in the browser.

If you want to see the same output in the browser, copy the code and paste in NotePad++ or Visual Studio and run the code. After running the code you can see the result. Click 'F12' and refresh the browser to see the exact output.

Debugging tools in major Browser's

Generally we can activate  debugging in our browsers by clicking 'F12' and select 'console' in the debugger window.

In case the above process is not worked, please follow these rules.

Chrome: Open > Menu > More tools > Console in debugger window.

Firefox Firebug: Open > go to http://www.getfirebug.com > Follow instructions for how to install fire bug.

Internet Explorer: Open > Menu > F12 Developer Tools > Console in debugger window.

Opera: Open > go to http://dev.opera.com > Follow instructions for how to add a developer Console button to toolbar.

Safari Firebug: Open > go to http://extensions.apple.com > Follow instructions for how to install firebug Lite.