Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to debug JavaScript Program?
While programming in any programming language, it is very general to do the mistakes in the logic building or in following the syntax rules of a language, which results in formation of errors and failure of our code to perform every task as expected. In this article, we are going to learn, how we can find the exact location of those errors and how we can fix them to make our code work as expected. The process of finding the errors in the code and then fixing them is known as Debugging.
There are different ways of debugging a JavaScript program, as listed below −
By Setting Breakpoints
By Using Debugger Keyword
By Using the console.log() method
Let us now understand each one of these methods in details with help of examples, so that it can help you to debug the program in future.
By Setting Breakpoints
The way of debugging the JavaScript code by setting the breakpoints is the much better, efficient and the faster method of debugging as compare to the other two methods. In this way of debugging, we can set different breakpoints at different points in the code written by us, which will stops the execution of the program when the breakpoints encounter and allow us to examine the code and make changes to it, so that the errors in the code can be minimized.
How to set the breakpoints?
To set the breakpoints at different points in the code, follow the below steps −
Open the Inspect element or the developer tools in the browser window, it will look like as shown in below image −
Now go to the sources tab in there, as marked in the above image.
After opening the sources tab, scroll down the right part of the debugger until you see the DOM Breakpoint or the Event Listener Breakpoints.
Once you reach these options you can select any of the event listener in the list to set the breakpoint. It will stop the code execution when the selected event occurs in the execution.
Another way of setting breakpoints manually at any point can be done by selecting the file name in the left hand window of the sources tab.
Then just need to click the line number in the code to set breakpoint, as shown in below image −
In the above image, the breakpoint is set at the line number 20.
By Using Debugger Keyword
We can use the debugger keyword in the code at any line or the point. Which will stops the execution of the code and call a debugging function if available and allow us to check the JavaScript syntax and the variables to correct them if any mistake was made in writing them. When the checking and the correction part of the cod is completed, we can move further or continue the execution of the program.
Syntax
Following syntax can be used to add the debugger keyword in the code to stop execution of program at a point −
JavaScript Statements or code debugger; JavaScript Statements or code
Let us see a code example where we will use the debugger keyword to stop execution of the program at a particular point or line.
Algorithm
Step 1 − In the first step, we will add an input element to get input from users of their choice.
Step 2 − In this step, we will add a button element with a onclick event associated with it, which later calls a function when user click the button.
Step 3 − In the last step, we will define a JavaScript function that contains whole logic of showing output on user screen after going through some debugging steps defined by the debugger keyword.
Example
The below example will illustrate the use of the debugger keyword to debug the JavaScript program −
<!DOCTYPE html>
<html lang = "en">
<body>
<h2>How to debug JavaScript program?</h2>
<p>Enter a number:</p>
<input type = "number" id = "inp1"> <br> <br>
<button id = "btn" onclick = "display()">See Result</button>
<p id = "result"> </p>
<script>
var result = document.getElementById("result");
function display() {
var inp1 = document.getElementById('inp1');
debugger;
var number1 = inp1.value;
debugger;
result.innerHTML += " The number entered by you is: <b> " + number1 + " </b> <br> ";
}
</script>
</body>
</html>
In the output of the above example, we can see that when we try to debug the code in the sources tab, the execution of the program automatically stops when it encounters the debugger keyword and allow us to make changes in the program if needed. Otherwise, it will continue executing the program. At the time of debugging, it will show nothing on the user screen as the program execution stops in the middle.
By Using console.log() Method
The console.log() is a method that is used to display the values of JavaScript variable in the browser console window to check for their correctness. It will help us to write the clean code with a suitable logic for the given problem and to make the program run as expected. We can pass the variable we want to print on the console window inside the parenthesis of this method.
Syntax
Below syntax can be used to debug the JavaScript code using the console.log() method −
console.log(parameter);
Let us understand the use of the console.log() method to debug the JavaScript program taken as example below.
Algorithm
The algorithm of this program and the above program are almost the same. You need to replace the debugger keyword in the above program or the algorithm with the console.log() method with some parameters or values passes inside it.
Example
The example below will explain you everything about the use of the console.log() method in debugging the JavaScript code −
<!DOCTYPE html>
<html lang = "en">
<body>
<h2>How to debug JavaScript program?</h2>
<p>Enter a number:</p>
<input type = "number" id = "inp1"><br> <br>
<button id = "btn" onclick = "display()">See Result</button>
<p id = "result"> </p>
<script>
var result = document.getElementById("result");
function display() {
var inp1 = document.getElementById('inp1');
var number1 = inp1.value;
console.log(number1);
result.innerHTML += " The number entered by you is: <b> " + number1 + " </b> <br> ";
}
</script>
</body>
</html>
In the output image of above code, if the values printed by the console.log() method in the console window are same as the values entered by you everytime, then the code is working as expected and there will be no erroe in the code. But, if the values are different or nothing is printed in the condole then you need to analyse your code and need to make necessary changes or the debugging is required.
In this article, we have seen three different ways of debugging the JavaScript program to write a clean and a error free code so that the code will work as expected and it will not fail to execute any task. These three methods are discussed in details with code examples.
158 Views
