Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/debugging-in-javascript/ below:

Debugging in JavaScript - GeeksforGeeks

Last Updated : 11 Jul, 2025

Debugging is the process of testing, finding, and reducing bugs (errors) in computer programs. It involves:

• Identifying errors (syntax, runtime, or logical errors).
• Using debugging tools to analyze code execution.
• Implementing fixes and verifying correctness.

Syntax Errors: Issues with incorrect syntax, preventing execution.

console.log("Hello); // SyntaxError: missing closing quote

Runtime Errors: Errors occurring during execution.

let a = undefined;
console.log(a.length); // TypeError: Cannot read properties of undefined

Logical Errors: Code runs without errors but produces incorrect results.

function add(a, b) {
    return a - b; // Logical error: should use + instead of -
}

Modern browsers provide built-in JavaScript debuggers, accessible via Developer Tools. Debuggers can be turned on and off, forcing errors to be reported. They allow setting breakpoints and examining variables while code executes.

Steps to Activate Debugging:

• Chrome: Open "More tools" → "Developer tools" → Select "Console".
• Firefox: Open "Web Developer" → "Web Console".
• Edge: Open "Developer Tools" → Select "Console".
• Opera: Open "Developer" → "Developer tools" → "Console".
• Safari: Enable "Show Develop menu in menu bar" under Preferences, then select "Show Error Console".

One of the simplest debugging techniques is logging messages to the console.

let x = 10;
console.log("Value of x:", x);

Breakpoints stop execution at specific lines, allowing variable inspection.

• Open DevTools (F12 or Ctrl+Shift+I).
• Navigate to the "Sources" tab.
• Click on line numbers to set breakpoints.
• Resume execution using the play button after analysis.

The debugger statement stops execution and opens debugging tools.

function test() {
    let n = 42;
    debugger; // Execution pauses here
    console.log(n);
}
test();

If debugging is unavailable, debugger has no effect.

Syntax errors occur when code violates JavaScript's syntax rules. These errors are typically caught during compilation.

• Code editors and linters flag syntax errors.
• Fixing syntax mistakes ensures smooth execution.

Fix: Add the missing closing quote.

Logging variable values helps debug unexpected outputs.

• Provides real-time feedback on variable states.
• Useful for debugging logical errors.

let x = 5;
console.log("X value:", x);

Breakpoints allow developers to pause code execution and inspect variable values.

function add(a, b) {
    return a + b;
}
let res = add(5, 10);
console.log(res);

Output

• Breakpoints help developers pause and inspect variables during runtime.
• They allow you to step through code line by line.
• Useful for identifying logical errors in complex functions.

Undefined variables usually indicate scope issues or missing arguments.

• Passing required arguments prevents undefined values.
• Ensures function behavior aligns with expectations.

function greet(name) {
    console.log("Hello, " + name);
}
greet(); // Undefined issue

Fix: Call greet("Ajay") to pass a valid argument.

• Handling runtime errors prevents crashes.
• Useful for handling JSON parsing errors.

try {
    let data = JSON.parse("{invalid}");
} catch (error) {
    console.error("Parsing error:", error.message);
}

Fix: Ensure valid JSON input.

• Handling async operations can be tricky.
• .catch() handles rejected promises.

fetch("invalid-url").catch(error => console.error("Request failed", error));

Fix: Handle network errors gracefully.

• Event listeners may not trigger as expected.
• Ensure correct event target selection.

document.getElementById("btn").addEventListener("click", function() {
    console.log("Button clicked");
});

Fix: Ensure the element ID exists.

• Memory leaks slow down applications.
• Use Chrome DevTools to detect leaks.
• Avoid excessive memory allocations.

let a = [];
setInterval(() => a.push("data"), 1000); // Potential memory leak

Fix: Clear unused data regularly.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4