Debugging JavaScript with Console and DevTools

Every developer spends a big part of their day debugging. The difference between a beginner and a professional isn't writing bug-free code – it's finding bugs quickly and methodically. This lesson covers the console beyond console.log, the browser DevTools debugger, and a simple process that works for any bug.

The console, beyond log

const user = { id: 7, name: "Asha", roles: ["admin"] };
console.log("user:", user);
console.log({ user });                    // shorthand: shows the variable name too
console.info("Info message");
console.warn("Low stock");                // yellow in browsers, stderr in Node
console.error("Payment failed");          // red, with a stack trace in browsers

console.group("Checkout");
console.log("validate cart");
console.log("charge card");
console.groupEnd();

for (const item of ["pen", "pen", "bag"]) console.count(item);
console.assert(user.roles.includes("admin"), "user should be admin");   // silent when true

user: { id: 7, name: 'Asha', roles: [ 'admin' ] }
{ user: { id: 7, name: 'Asha', roles: [ 'admin' ] } }
Info message
Low stock
Payment failed
Checkout
  validate cart
  charge card
pen: 1
pen: 2
bag: 1

console.table and console.time

const scores = [
  { name: "Asha", js: 91, sql: 78 },
  { name: "Ravi", js: 64, sql: 88 },
];
console.table(scores);

console.time("sort 100k");
Array.from({ length: 100_000 }, () => Math.random()).sort((a, b) => a - b);
console.timeEnd("sort 100k");        // prints the elapsed time, e.g. "sort 100k: 31.2ms"

┌─────────┬────────┬────┬─────┐
│ (index) │ name   │ js │ sql │
├─────────┼────────┼────┼─────┤
│ 0       │ 'Asha' │ 91 │ 78  │
│ 1       │ 'Ravi' │ 64 │ 88  │
└─────────┴────────┴────┴─────┘
sort 100k: 31.2ms

Breakpoints: pause and inspect

console.log shows what you guessed to print. A breakpoint pauses the code so you can inspect everything: all variables, the call stack, and step line by line.

function applyCoupon(cart, code) {
  const discount = code === "SAVE10" ? 0.1 : 0;
  debugger;                       // pauses here when DevTools is open
  return cart.total - cart.total * discount;
}

Useful breakpoint types:

• Conditional breakpoint – right-click a line number: pause only when order.id === 1042. Perfect inside loops.
• Logpoint – logs a message without editing code or pausing.
• DOM breakpoint – pause when an element changes (Elements panel → right-click → Break on).
• Event listener / XHR breakpoints – pause on any click, or any request to a URL.
• Pause on exceptions – stop exactly where an error is thrown.

Node.js has the same debugger: run node --inspect app.mjs and open chrome://inspect, or use VS Code's Run and Debug.

Other DevTools panels

A method for any bug

Here's that method on a real bug. The cart total shows "₹5001000" instead of "₹1500":

const prices = ["500", "1000"];            // values read from form inputs: strings!
const buggyTotal = prices.reduce((sum, p) => sum + p, 0);
console.log(buggyTotal, typeof buggyTotal); // hypothesis confirmed: string joining

const total = prices.reduce((sum, p) => sum + Number(p), 0);
console.log(total, typeof total);

05001000 string
1500 number

Practice

Summary