JavaScript Debugging Techniques

(Identify, inspect, and fix issues in your JavaScript code with confidence)

What is Debugging?

Debugging is the process of finding and fixing errors (bugs) in your code. JavaScript offers several tools and techniques to help you understand what's going wrong and why.

1. Use console.log() Wisely

The simplest and most common way to debug:

const total = calculateTotal(100, 5);
console.log("Total:", total);

Tips:

  • Use meaningful labels.
  • Log objects or arrays to inspect them.
  • Use console.table() to display data in a table.

2. Understanding Console Methods

console.warn("This is a warning");
console.error("This is an error");
console.info("Some information");
console.table([{name: "Alice", age: 25}, {name: "Bob", age: 30}]);

3. Breakpoints in Developer Tools

Most browsers (Chrome, Firefox, Edge) have built-in DevTools.

Use the Sources tab to:

  • Open your script files
  • Click on a line number to set a breakpoint
  • Reload the page to pause code execution there

You can:

  • Step through code line by line
  • Inspect variables
  • Watch expressions

4. Using debugger Keyword

Insert the debugger statement in your code to trigger a breakpoint:

function calculate(a, b) {
  debugger; // Execution pauses here
  return a + b;
}

Open DevTools and reload the page — your code will pause at this line.

5. Catching Errors with try...catch

Use try...catch to handle and inspect runtime errors gracefully:

try {
  riskyFunction();
} catch (error) {
  console.error("Error caught:", error.message);
}

Add optional finally for cleanup code that always runs:

finally {
  console.log("Cleaning up...");
}

6. Understanding Stack Traces

When an error occurs, JavaScript shows a stack trace:

TypeError: Cannot read properties of undefined
    at doSomething (app.js:12)
    at main (app.js:20)

This tells you:

  • What the error was
  • Where it happened
  • Which function calls led to it

Use this to trace back to the bug source.

7. Watching Variables

In browser DevTools:

  • Use the Watch panel to track specific variables
  • Use Call Stack to see the path of function calls
  • Hover over variables during breakpoints to inspect values

8. Network Tab for API Debugging

If you're fetching data from a server:

  • Open DevTools → Network
  • Check if the request succeeded
  • View headers, payloads, and responses
  • Identify HTTP errors like 404 or 500

Pro Debugging Tips

  • Always check spelling and case sensitivity.
  • Log before and after function calls to track flow.
  • Use meaningful, descriptive variable names.
  • Comment out sections to isolate bugs.
  • Start from the most likely point of failure, not the first error.

    • Summary:

    • Use console.log() and DevTools for simple debugging.
    • debugger and breakpoints let you pause and step through code.
    • Use the Network tab and stack traces for deeper insights.
    • Good debugging saves time, reduces frustration, and builds confidence.

    🧪 Practice Exercise:

    Task:

    1. Create a function with a logic bug. Use console.log() to trace the issue.
    2. Insert a debugger and use Chrome DevTools to pause and inspect.
    3. Intentionally throw an error and handle it using try...catch.
    4. Make a fetch() request and inspect it via the Network tab.
    5. Use console.table() to debug an array of objects.
    Previous Next