Debugging in JavaScript

Debugging is the process of finding and fixing errors (bugs) in your JavaScript code. Mastering debugging helps improve your coding skills and speed up development.

Why Debugging Matters

• Helps locate and fix runtime errors
• Improves code quality
• Essential for working with large or asynchronous codebases

Common JavaScript Debugging Tools

1. Using console.log()

Log values, functions, objects, or flow tracking:

const num = 5;
console.log("Number is:", num);

Use it to trace bugs or confirm if a function is being called.

2. The debugger Statement

The debugger keyword stops the execution and opens the browser's debugger.

function testDebug(num) {
  debugger; // Execution pauses here
  return num * 2;
}

testDebug(10);

Open Chrome DevTools (F12) > Sources tab > Reload and watch the code pause at debugger.

3. Chrome DevTools Features

• Console Tab – View logs and errors
• Sources Tab – View and step through code
• Network Tab – Check API calls, status, and timing
• Elements Tab – Inspect and edit HTML/CSS
• Breakpoints – Set to pause code on specific lines or events

Tip: Use the "Pause on Exceptions" option to stop when an error occurs.

4. Error Stack Traces

When an error occurs, JavaScript prints a stack trace.

function a() {
  b();
}

function b() {
  throw new Error("Something went wrong!");
}

a();

The console shows:

Error: Something went wrong!
    at b (...)
    at a (...)

You can trace exactly where the error happened.

5. Network Debugging (APIs)

Use the Network tab in DevTools to check:

• API status (e.g. 200, 404)
• Response time
• Returned data
• Errors (like CORS or failed fetch)

6. VS Code Debugging

If you're using Visual Studio Code:

• Set breakpoints in the editor
• Press F5 to start debugging
• Use the Debug Panel to watch variables and call stack