your image

debugging in JavaScript - GeeksforGeeks

Chinmoy Lenka
geeksforgeeks.4
Related Topic
:- Code Debugging Javascript Strong debugging skills

debugging in JavaScript

  • Last Updated : 19 Feb, 2019

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 also be errors in the code which can remain invisible to the programmer’s eye and can create havoc. To identify these errors we need Debuggers that can go through the entire code or program, identify the errors and also fix them.

1) debugger
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 JavaScript program on debugging:

 

 

 

<h4>Debugging demonstrations using Debugger keyword</h4>

    The solution of 20 * 5 is:

        <p id="test"></p>

  

  

<p>If the debugger is turned on the code stops 

execution at the start of the debugger</p>

  

      

        var x = 20;

var y = 5;

var z = x * y;

debugger;

document.getElementById("test").innerHTML = z;

Output:

Previously implementing debuggers was tough but with time and with the advent of the modern browsers, various built-in debuggers came into implementation. As previously mentioned that setting up of breakpoints breaks the line of code and flows the control to another area from where it is called. This can be done in the debugging window of the browser. Also setting up of breakpoints in javascript acts similar to the breakpoints in Java where the execution of the code stops and examination of the values is performed by the browser. One can resume the flow control after the examination is done. The debugging can be turned on or off depending upon the user’s convenience. This all can be done through the “Console” of the debugger menu.

2) Use of console.log() method
There is another way in which the JS values can be displayed in the debugger window.
Let’s see JavaScript program using console.log():

 

 

 

 

 

 

<h3>GeeksforGeeks</h3>

<h4>Hello Geek</h4>

  

<p>

1. To view the result activate debugging of your 

browser(preferred the latest) by pressing F12 <br>

2. Select "Console" in the debugger menu.

</p>

  

  

x = "Where do you work?"

y = "I work at GeeksforGeeks"

console.log(x);

console.log(y);

Output:

3) Setting Break Points:
The console.log() is a good way to debug errors but setting breakpoint is a faster, efficient and better method. 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.

    Enter Developers tool section by pressing F12 key and go to sources.
    In the source section, select a javascript file and set breakpoints by either selecting from the provided list like DOM breakpoints or Event listener breakpoints which stops the execution of code whenever an event occurs

     

    OR set a breakpoint by simply clicking line number shown in the code. In the following image, a breakpoint is set at line 23. (The code used is same as the above example)

     

    As shown in the image, the code stopped at line 23 and showed all the values of variables in the code at that point in time.
    Since we can see the value of I was initially 1 and at the breakpoint, it is 5. Hence GeeksForGeeks was printed 5-1=4 times.
    Method 3 is contributed by Kartikay Bhutani.

     

     

Like

0

Previous

How to ignore loop in else condition using JavaScript ?

Next

JavaScript | Style Guide and Coding Conventions

RECOMMENDED ARTICLES

Page :

ES6 | Debugging

29, Jun 20

JavaScript : The Awesome Script

11, Mar 16

Arrow functions in JavaScript

16, May 18

OpenUI5 – Javascript UI Library from SAP

07, Aug 17

JavaScript Basic Array Methods

23, Aug 17

Closure in JavaScript

09, Oct 17

Open a link without clicking on it using JavaScript

20, Sep 18

JavaScript | Cursor property

31, Jul 18

Functions in JavaScript

23, Feb 18

Loops in JavaScript

09, Mar 18

JavaScript BOM | Window Screen

22, Mar 18

Display the number of links present in a document using JavaScript

22, Mar 18

Scoping & Hoisting in JavaScript

28, Mar 18

JavaScript | Strict Mode

28, Mar 18

JavaScript | Immediately Invoked Function Expressions (IIFE)

28, Mar 18

Ways of iterating over a array in JavaScript.

29, Mar 18

JavaScript | Objects

02, Apr 18

JavaScript | Window print() Method

18, Apr 18

Turn on or off bulb using JavaScript

23, Jul 18

Map.entries( ) In JavaScript

25, Apr 18

How to rethrow an exception in JavaScript, but preserve the stack?

17, Feb 20

Javascript eval() Function

03, May 18

How to invert key value in JavaScript object ?

01, Dec 20

JavaScript for Capturing mouse positions after every given interval

20, May 18

Article Contributed By :

 

Chinmoy Lenka

@Chinmoy Lenka

Comments