Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use the debugger keyword in JavaScript?
Whenever an unexpected occurrence takes place in a JavaScript code, we need to debug it to check the cause. Debugging is a very important aspect of programming that lets you determine why a system or application behaves abnormally. It is a process of testing multiple times with different inputs and finding errors to reduce bugs from computer programs.
In this article, we will be exploring the debugger keyword in JavaScript and how to use it. The debugger keyword in JavaScript is a common keyword used in debugging processes and variable inspection. When the debugger keyword is encountered and developer tools are open, it stops the execution of the JavaScript code and calls the debugging function if available. If no debugging environment is active, it has no effect.
Syntax
debugger;
How It Works
The debugger statement acts as a breakpoint in your code. When the browser's developer tools are open and the JavaScript engine encounters this statement, it pauses execution and opens the debugger at that exact line, allowing you to inspect variables, step through code, and analyze the program state.
Basic Example
Here's a simple example showing how the debugger keyword stops execution for debugging:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<p id="para"></p>
<p>Open developer tools (F12) and reload the page to see the debugger in action.</p>
<script>
let a = 10 * 5;
debugger; // Execution will pause here if dev tools are open
document.getElementById("para").innerHTML = "Result: " + a;
</script>
</body>
</html>
Practical Debugging Example
The debugger keyword is most useful when you need to inspect variables and execution flow in complex functions:
<!DOCTYPE html>
<html>
<body>
<p id="result"></p>
<script>
function calculateTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
debugger; // Pause here to inspect 'i', 'total', and 'items[i]'
total += items[i] * 1.1; // Adding 10% tax
}
return total;
}
let prices = [10, 25, 40];
let finalTotal = calculateTotal(prices);
document.getElementById("result").innerHTML = "Total with tax: $" + finalTotal.toFixed(2);
</script>
</body>
</html>
Key Points
- The
debuggerstatement only works when developer tools are open - In production environments, debugger statements should be removed
- You can use browser developer tools (F12) to step through code line by line
- Press F8 to continue execution or F10 to step over to the next line
- The debugger gives you access to the current scope, variables, and call stack
Browser Compatibility
The debugger statement is supported in all modern browsers and JavaScript environments. However, it will be ignored if no debugging environment is available.
Conclusion
The debugger keyword is a powerful tool for JavaScript debugging that pauses code execution when developer tools are active. Use it strategically to inspect variables and program flow, but remember to remove it from production code.
732 Views
