Debugging in JavaScript: Day 8

Introduction

I highly recommend reading the previous parts:

Introduction to JavaScript: Day 1

Programming Basics in JavaScript: Day 2

Comments and Objects in JavaScript: Day 3

Scope and Events in JavaScript: Day 4

Array in JavaScript: Day 5

Page Re-direction in JavaScript: Day 6

Errors and Exception Handling in JavaScript: Day 7

Debugging in JavaScript

All programmers know that writing code without a debugger is difficult, because when you are testing it's easy to check the values one by one of each statement. But in JavaScript code, there is no line by line debugging possible. If there is an error in code then it might be a syntax error or a runtime error, it's difficult to determine, because in the output if the code is correct then the output will be displayed otherwise it shows nothing. And there is nothing to display like an error in a line number or something like that or an error message to display.

Searching for an error in JavaScript code is difficult. It's not easy to debug the JavaScript code but now all browsers provide a debugger. Use the following procedure in a Chrome Browser to learn about debugging.

Open the Chrome Browser.
Click on Menu.
Select More Tools.
In that sub-menu then select JavaScript Console.
It will open the debugger. (Press F12 to open the debugger).

You will now see how to open the debugger in the Chrome browser. You can log the result and show something in the debugger window in JavaScript using the console.log() method. the following example clarifies this about debugging.

Example For console.log() Method

<!DOCTYPE html>
<html>
<title>Article By Jeetendra</title>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Debugging in JavaScript</br>");
function ExceptHand()
{
try
{
if(true)
{ throw("Example of Debugger in JavaScript Using console.log() Method");}
}
catch(error)
{
console.log(error);
}
}
ExceptHand();
</script>
</body>
</html>

Output

In the preceding example you can throw the error message and it is caught in the catch block and is written to the log and that will be displayed in the debugger window as in the preceding image.

The debugger keyword

This debugger code is used for setting breakpoints in JavaScript code for checking the values. It stops the JavaScript until the debugger keyword and after checking the values you can resume the execution (Press F8). But if the debugger is on then it will show the debugging otherwise it will show the result. If debugging is on then it will stop execution until that line before executing the next line.

Example of debugger keyword

<!DOCTYPE html>
<html>
<title>Article By Jeetendra</title>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Debugging in JavaScript</br>");
function ExceptHand()
{
try
{
var a = 10;
var b = 20;
var c = a + b;
debugger;
if(true)
{
document.write("using debugger keyword");
}
}
catch(error)
{
console.log("log message");
}
}
ExceptHand();
</script>
</body>
</html>

Output

When you execute the preceding JavaScript code it will be shown as in the following image if the debugger is on otherwise it will directly print the document print messages. In the following image, you can see the debugger window -> source tab and you can see the JavaScript code and a highlighted line in the debugger, this is the breakpoint for debugging.

In the preceding image, in the right side, there are multiple options for using debugging mode. Click on the Watch Expression then click on the (+) sign. It will then show a text box to find the expression values. Then type "c" into the TextBox then press Enter. It will show output like "c: 30" in addition to the two variables a and b. You can see it in the second image on the right side. I highlighted that in a Red color box.

Finally, you get the expression value. Press F8 or press the resume button, it will execute the next line. Here the condition is checked and it prints a message and it will show output as in the following image.

Summary

I hope you understood the concepts of debugging in JavaScript and that this is useful for all readers. If you have any suggestions regarding this article then please contact me.

2 Comments

Join the conversation! Your thoughts help the community grow.

Mahesh Chand11y ago
Nice going with JS. But this article or related articles should be posted on JavaScript technology. You can do that by Editing this article. Cheers!
- Jeetendra Gund11y ago
  Thanks for reply Sir, I will do that...