What is the use of debugger keyword in JavaScript ?

Last Updated : 27 Aug, 2021

Debugging is a very important aspect of programming to determine why a system or application is misbehaving. It is a process of testing and finding errors to reduce bugs from computer programs. In this article, we will learn about the debugger keyword in JavaScript. To know more about debugging check Software Engineering | Debugging.

Debugger keyword in JavaScript: The debugger keyword is one of the debugging tools in JavaScript. It is very common to have errors in the program while writing the codes these errors may be logical errors or syntax errors. Debugging is one of the ways to identify the critical as well as small errors that decrease the efficiency of the program. In javascript when the debugger keyword is turned on, It stops the execution of JavaScript code, and if debugging function available it calls the debugging function. Otherwise, it has no effect.

Syntax: The general syntax of the debugger keyword.

debugger;

Example: It will describe the debugger keyword in JavaScript.

HTML

<!DOCTYPE html> 
<html> 
  <body> 
    <p id="para"></p> 
  
    <p> 
      When we turned on the debugger keyword,  
      the code below should stop executing before 
      it executes the third line. 
    </p> 
  
    <script> 
      let a = 10 * 5; 
      debugger; 
      document.getElementById("para").innerHTML = a; 
    </script> 
  </body> 
</html> 

Output: The HTML code is loaded on the web browser with the static content in the HTML but the dynamic change will not appear at first on the web browser because above the DOM function the execution of the script code is stopped when the debugger keyword appears in the script code. The execution of the code will be resumed only when the resume option will be clicked.