Debugging Method in JavaScript

Mutyala Satyanarayana Murthy
4 min readJun 21, 2023

--

It is common to have errors while writing codes and the errors can be due to syntax or logical. These errors create a lot of ambiguity in the logic and understanding of both users and programmers. There can be also be errors in the code which can remain invisible to the programmers eye. To find those errors and fixing, we have a method called Debugging.

Fig: JavaScript Debugging.

Debugging is the Process of Examining the entire program or code, finding the errors and fixing them.

There are different ways we can Debug our Java script program.

1. Using console.log() method

2. Using debugger keyword

3. Setting breaking points

1. Using console.log() method

We can use the console.log() method to debug the code. We can pass the value we want to check into the console.log() method and verify if the data is correct.

Example for this method,

Using Console.log() method in the browser opens the value in the debugger window.

Fig: Working of console.log() method in Browser.

2. Using Debugger keyword

The debugger keyword is used in the code to force stop the execution of the code at a breaking point and calls the debugging function. The debugger function is executed if any debugging is needed at all, else no action is performed.

-Let’s see an example

Fig: Using Debugger Keyword.

Output of above program using Debugger:

Fig: Working of Debugger in Browser.

The above program pauses the execution of the program if the line containing the debugger,

  • we can then resume the flow control after examining the program.

The rest of the code will execute when you resume the script by pressing play in the console. The resulted output,

Fig: Working on Debugger in Browser.

3. Setting Break Points

In this method, Breakpoints are set in code which stops the execution of code at that point so that the values of variables can be examined at that time.

Here are some advantages of using Breakpoints over console.log() method:

In console.log() method user has to understand the code and manually put console.log() at points in the code. But in breakpoints method, we can set breakpoints through Developers tool anywhere in code without even knowing it.

In console.log() method we have to manually print values of different variables but at a certain breakpoint, all the values of all variables are displayed automatically in Developers tool.

  • Example,
Fig: Example code for Break Points.
  • In the Debugging window, you can set breaking points in the Java script code.
  • And for the conditional statement, the break point will be hit when the condition is True.
  • At each break point, Java script will stop executing and let you examine the java script values.

Output:

Fig: Working of Break Points in Browser.
  • After examining the values, you can resume the execution of the code by pressing play to start the flow of the program.
  • Then the browser executes the program and gives the output.
Fig: Working of Break Points in Browser.

Conclusion:

  • A Debugging method allows users to find the errors in the code and helps users to fixing those errors.
  • The Debug tools also allows users to make changes to the programmer’s code.

Reference:

--

--