JS Debugging

JavaScript Debugging: Finding and Fixing Bugs Methodically

JavaScript debugging is the systematic process of inspecting runtime values, tracing execution paths, and isolating why code produces unexpected results. Moving beyond basic console.log() to DevTools breakpoints and console.table() cuts troubleshooting time dramatically.

Useful console Methods Beyond console.log()

The Console API offers specialized formatters that make noisy state much easier to scan:

• console.log({ user, total }): Wrapping variables in {} prints labeled key-value pairs so you never lose track of which number belongs to which variable.
• console.table(arrayOfObjects): Renders arrays of objects as a clean sortable table in browser DevTools and Node.js.
• console.warn() / console.error(): Highlights issues in yellow or red along with a collapsible stack trace.
• console.time("label") / console.timeEnd("label"): Measures exact elapsed milliseconds between two lines.

Breakpoints and the debugger Keyword

Inserting debugger; in code (or clicking a line number in DevTools Sources) pauses execution right at that line while DevTools is open. While paused, you can hover over variables, inspect the Call Stack, and step line by line.

function computeCartTotal(items) {
  console.time("cartCalc");
  let subtotal = 0;

  for (const item of items) {
    if (typeof item.price !== "number" || item.price < 0) {
      console.warn("Skipping invalid price item:", item);
      continue;
    }
    subtotal += item.price * item.qty;
  }

  console.timeEnd("cartCalc");
  return Number(subtotal.toFixed(2));
}

const sample = [
  { name: "Notebook", price: 8.5, qty: 2 },
  { name: "Broken Item", price: -5, qty: 1 },
];
console.table(sample);
console.log("Final subtotal:", computeCartTotal(sample));

Common Mistakes to Avoid

• Committing debugger; statements to production: Leaving debugger; in shipped files pauses execution for users who open DevTools. Configure ESLint no-debugger to block it.
• Debugging without reading the full stack trace: Always inspect the first file and line number in your own codebase listed in the error stack trace before guessing.
• Logging mutable objects and reading expanded views later: DevTools evaluates expanded object previews lazily; log structuredClone(obj) or JSON.stringify(obj) to snapshot exact state at that moment.

Frequently Asked Questions

What is a conditional breakpoint in DevTools?

Right-click a line number in the Sources panel and enter a condition like user.id === 42. Execution pauses only on the iteration where that expression is truthy.

How do I catch unhandled errors before they vanish?

Enable "Pause on caught/uncaught exceptions" in the DevTools Sources panel to freeze execution at the exact line an error is thrown.

What are source maps used for?

Source maps (.map files) link minified production bundles back to your original readable ES6 or TypeScript lines inside DevTools.