JavaScript – Debugging


What is debugging ?

Debugging is the process of identifying and removing errors from hardware or software.

What is debugging in javascript ?

Javascript codes may contain errors or mistakes.

Finding the errors can be done only by debugging the code.

In Javascript, the code can be debugged easily by using web browsers like Google Chrome, Mozilla Firebox.

How to debug the errors in javascript ?

Since javascript is a scripting language, it will not show any error message in a browser directly.

By using the in-build browser debugger, we can find the errors and fix.

We can follow these two ways for debugging the javascript code.

1. By using console.log();

2. By using debugger keyword.

Javascript online learning !!!

Click to Learn More about – Javascript online learning

1. By using console.log();

This is a javascript inbuilt method which displays the result in the console of the web browser.

If there is any mistake in the code console.log() method generates the error message.



Example :

<script>
			var a = 10;
			var b = 20;
			document.writeln("Here we are printing two values in console.log()<br/>");
			document.writeln("The value of a = " + a+"<br/>");
			document.writeln("The value of b = " + b+"<br/>");
			document.writeln("The Sum value of a+b = " + (a+b) + "<br/>");
			document.writeln("Prinited successfully in console.log() since all the values are declared properly<br/>");
			console.log("The value of a = " + a);
			console.log("The value of b = " + b);
			console.log("The sum value of a and b = "+ (a+b));
			document.writeln("If we try to print the unknown variable d, it throws error<br/>");
			console.log("The value of d = " + d+"<br/>");
		</script>

Output :

2. By using debugger keyword

This is another way of debugging the code, where we will set the breakpoints for each line of code in a step by step manner.

Javascript allows us to set the break points inside the code itself.

It will stop executing the next step of the program at the position debugger is applied by using the “debugger” keyword.

Then we can execute the flow manually to find out the errors.If any exception occurred inside the flow, the execution will stop on that particular line.

Example :

<script>
                        var a = 10;
                        var b = 20;
                        document.writeln("Here we are printing two values in console.log()<br/>");
                        document.writeln("The value of a = " + a+"<br/>");
                        document.writeln("The value of b = " + b+"<br/>");
                        debugger;
                        document.writeln("The Sum value of a+b = " + (a+b) + "<br/>");
                        document.writeln("Prinited successfully in console.log() since all the values are declared properly<br/>");
                        console.log("The value of a = " + a);
                        console.log("The value of b = " + b);
                        console.log("The sum value of a and b = "+ (a+b));
                        document.writeln("If we try to print the unknown variable d, it throws error<br/>");
                        console.log("The value of d = " + d+"<br/>");
                </script>

Output :