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
Selected Reading
The debugger statement in JavaScript
The debugger statement in JavaScript is used to set a breakpoint in your code. When the JavaScript engine encounters this statement, it pauses execution and opens the browser's developer tools debugger (if available), allowing you to inspect variables, step through code, and debug issues.
Syntax
debugger;
How It Works
When the JavaScript engine hits a debugger statement:
- Execution pauses at that line
- Browser developer tools open automatically
- You can inspect the current scope, variables, and call stack
- If no debugger is available, the statement is ignored
Example: Basic Debugging
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Debugger Statement Example</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
margin: 20px 0;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Debugger Statement in JavaScript</h1>
<div class="result"></div>
<button class="btn">Start Debugging</button>
<p>Click the button and open Developer Tools (F12) to see the debugger in action.</p>
<script>
let resEle = document.querySelector(".result");
let btnEle = document.querySelector(".btn");
function calculateSum(start, end) {
let sum = 0;
for (let i = start; i <= end; i++) {
debugger; // Execution will pause here
sum += i;
resEle.innerHTML = `Current sum: ${sum}, Adding: ${i}`;
}
return sum;
}
btnEle.addEventListener("click", () => {
resEle.innerHTML = "Starting calculation...";
let result = calculateSum(1, 5);
resEle.innerHTML = `Final sum: ${result}`;
});
</script>
</body>
</html>
Example: Debugging Function Parameters
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parameter Debugging</title>
</head>
<body>
<div id="output"></div>
<script>
function processUser(user) {
debugger; // Inspect the user object here
if (!user || !user.name) {
return "Invalid user data";
}
return `Hello, ${user.name}! You are ${user.age} years old.`;
}
// Test with different data
let user1 = { name: "Alice", age: 25 };
let user2 = { name: "", age: 30 };
let user3 = null;
document.getElementById("output").innerHTML = processUser(user1);
</script>
</body>
</html>
When to Use Debugger Statement
| Use Case | Description |
|---|---|
| Complex Logic | Step through complicated algorithms or conditions |
| Variable Inspection | Check variable values at specific points |
| Loop Debugging | Examine each iteration of loops |
| Function Parameters | Verify function inputs and outputs |
Key Points
- Remove
debuggerstatements before production deployment - Works only when developer tools are available
- More powerful than
console.log()for interactive debugging - Can be used with conditional statements for targeted debugging
Conditional Debugging
<!DOCTYPE html>
<html>
<body>
<script>
function processArray(arr) {
for (let i = 0; i < arr.length; i++) {
// Only debug when value is negative
if (arr[i] < 0) {
debugger;
}
console.log(`Processing: ${arr[i]}`);
}
}
processArray([1, -2, 3, -4, 5]);
</script>
</body>
</html>
Conclusion
The debugger statement is a powerful tool for interactive debugging in JavaScript. Use it to pause execution, inspect variables, and step through code logic. Remember to remove debugger statements before deploying to production.
Updated on: 2026-03-15T23:18:59+05:30
859 Views
Advertisements