Debugging with console.log

The simplest and most effective debugging tool

⏱ Est. ~5 min

01 · Read

There are fancy debugging tools with breakpoints, watch expressions, and step-through execution. You'll learn them later. But the tool you'll use the most, even as a senior engineer, is the humble console.log().

The idea is dead simple: print stuff out and see what's actually happening. When your code doesn't behave the way you expect, the fastest way to figure out why is to log the values at each step and compare what you expected with what actually happened.

Not fancy. Not polished. But it works, and it's fast.

💡 Picture thisDebugging with console.log is like placing trail cameras in a forest. You can't watch every tree all the time, but you can put cameras at key spots and see what passes through. When something unexpected shows up, you know exactly where to look.

02 · Read

You have a buggy shop app. The getAffordableElectronics function is supposed to return electronics within a certain price and in stock. But it's returning expensive, out-of-stock items. Let's investigate.

03 · Terminal exercise

First, read the output log to see what the function actually produces vs. what's expected.

(This section is interactive — please enable JavaScript.)

04 · Terminal exercise

Now read the code and follow the logic. Look at the filter steps — one of them has a subtle operator bug.

(This section is interactive — please enable JavaScript.)

05 · Code example

Here's what it would look like if you added debug logs at every step. Compare the intermediate results to find exactly where it goes wrong.

With debug logs added

function getAffordableElectronics(items, maxPrice) {
  console.log('Input:', items.length, 'items, max price:', maxPrice);
  const electronics = items.filter(item => item.category === 'electronics');
  console.log('After category filter:', electronics.map(i => i.name));
  const affordable = electronics.filter(item => item.price > maxPrice);
  console.log('After price filter:', affordable.map(i => i.name));
  // ^ This would show ['Laptop', 'Monitor'] — WRONG direction!
  const available = affordable.filter(item => item.inStock);
  console.log('After stock filter:', available.map(i => i.name));
  return available.map(item => item.name);
}

With logs at each step, the bug jumps out: after the price filter, you see expensive items surviving instead of cheap ones. > should be <. Without logs, you might have guessed for ages — with logs, you find it in seconds.

06 · Read

Strategic logging is an art. Don't sprinkle logs everywhere — put them where data transforms or where things could go wrong.

Key points

Log at the start of a function (was it called? with what?)
Log before and after a transformation (what changed?)
Label every log: console.log('step 3 - data:', data)
Remove debug logs before you commit

07 · Fill in the blank

When debugging with console.log, always add a _____ so you know which log is which.

08 · Quiz

Why should every console.log have a label?

To make the program run faster
So you can tell which log produced which output
JavaScript requires console.log to have a label
Only production code needs labels

Other lessons in this chapter

⚠ The full interactive experience needs JavaScript. Please enable it and reload.

※ This is an independent Traditional Chinese teaching project — not an official Anthropic product. Claude™ is a trademark of Anthropic, PBC.