Debugging JavaScript

Writing correct code the first time is rare — real development is a cycle of writing, running, observing what actually happened, and correcting course. Debugging is the disciplined version of that cycle, and JavaScript developers have two main toolsets for it: the console object for quick, low-friction inspection, and the browser's DevTools for deeper, interactive investigation.

Learning to debug efficiently — rather than sprinkling console.log everywhere and guessing — is one of the highest-leverage skills a JavaScript developer can build.

Why it matters

Developers spend far more time finding out why code misbehaves than writing it. Guessing and scattering console.log everywhere works slowly; a breakpoint that pauses the program and shows every variable works fast. Debugging methodically is one of the clearest differences between a beginner and an experienced developer.

Console Methods Beyond console.log

The console object offers several methods purpose-built for different kinds of output, and using the right one makes logs far easier to scan.

• console.warn() — logs with a yellow warning style, for non-fatal issues worth noticing.
• console.error() — logs with a red error style and includes a stack trace, for actual failures.
• console.table(data) — renders an array of objects as a readable table, ideal for inspecting lists of records at a glance.
• console.group() / console.groupEnd() — visually nests related log lines so they can be collapsed together.

Breakpoints and Stepping Through Code

A breakpoint pauses code execution at a specific line, letting you inspect variables at that exact moment rather than guessing from logs after the fact. You can set a breakpoint by clicking a line number in the browser DevTools' Sources panel, or directly in code with the debugger; statement, which pauses execution automatically whenever DevTools is open. Once paused, you can step over, into, or out of function calls, and watch how variable values change line by line.

Browser DevTools Basics

Every major browser ships built-in developer tools (opened with F12 or right-click → Inspect). The Console panel runs JavaScript live against the current page and shows log output. The Sources panel shows your actual script files, lets you set breakpoints, and shows the call stack and local variables when paused. The Network panel shows every request the page makes, including status codes, timing, and response bodies — essential for debugging fetch calls and APIs. The Elements panel shows the live DOM tree and lets you inspect or edit it directly.

Examples

const users = [
  { id: 1, name: 'Asha', age: 28 },
  { id: 2, name: 'Rahul', age: 31 },
];

console.group('User Report');
console.table(users);

users.forEach((user) => {
  if (user.age < 18) {
    console.warn(`${user.name} is a minor`);
  }
});
console.groupEnd();

User Report
  ┌─────────┬────┬───────┬─────┐
  │ (index) │ id │ name  │ age │
  ├─────────┼────┼───────┼─────┤
  │    0    │ 1  │'Asha' │ 28  │
  │    1    │ 2  │'Rahul'│ 31  │
  └─────────┴────┴───────┴─────┘
  (no warnings logged, since both users are adults)

function calculateTotal(cart) {
  let total = 0;
  for (const item of cart) {
    debugger; // execution pauses here whenever DevTools is open
    total += item.price * item.quantity;
  }
  return total;
}

const total = calculateTotal([
  { price: 10, quantity: 2 },
  { price: 5, quantity: 3 },
]);
console.log(total);
// With DevTools closed, "debugger" is simply ignored and the
// function runs straight through.

35

Exercise

average should return 20 for the numbers 10, 20 and 30, but it prints NaN. Find the bug by logging the value of total on each pass, or by pausing with debugger, and fix it.

Expected output: 20

function average(numbers) {
  let total = 0;
  for (let i = 0; i <= numbers.length; i++) {
    total += numbers[i];
  }
  return total / numbers.length;
}

console.log(average([10, 20, 30]));

function average(numbers) {
  let total = 0;
  for (let i = 0; i < numbers.length; i++) {
    total += numbers[i];
  }
  return total / numbers.length;
}

console.log(average([10, 20, 30]));

Quick quiz

Interview questions