Console.log() is not debugging!

It’s just yelling at your code and hoping it yells back something useful.

The console.log() Comfort Zone

Let’s be honest, we all have done this:

console.log("Here");
console.log("Still here?");
console.log("Nope, broke.");

While it feels productive, console.log() is like using a flashlight instead of turning on the lights. You can sort of see what’s happening… but not everything. Welcome to the world of real debugging — the kind that makes you look like you know what you’re doing even when you don’t.

1: Meet Chrome DevTools — Your Debugging BFF

Chrome DevTools is built into every Chrome browser. Just right-click → Inspect → Head to the Sources or Console tab.

  1. Pause execution mid-code.
  2. Step through code line-by-line.
  3. Watch variables change in real-time.
  4. See the call stack, scope, closures.
  5. And never need a single console.log again.

2: Breakpoints – Your Code’s Speed Bumps

Breakpoints stop your code right at a line so you can peek around:

function calculateTaxes(amount) {
  let rate = 0.15;
  let tax = amount * rate; // Add breakpoint here
  return tax;
}

Instead of logging tax, click the line number in DevTools — BOOM, paused.

  • Hover over variables and see values.
  • Use the Watch panel to monitor expressions.
  • Step into functions or over them (Step In / Step Over).

3: Call Stack, Scopes & Watches – The Cool Club

Call Stack – Like a reverse breadcrumb trail of how you got here.

Scopes – Access to local, closure, block, and global variables.

Watch Panel – Add custom expressions and see how they evolve as you step through your code.

Example: Add amount * rate as a watched expression and see how it changes over time.

Bonus Cool Tricks

Conditional Breakpoints

Right-click on a line → Add conditional breakpoint
// Pause only if amount > 1000

Logpoints (Newish Feature!)

Want to console.log without editing your code?
Right-click → Add logpoint
// Add in DevTools only: "Amount is: ", amount

Next time your code doesn’t work, don’t spam console.log() — step into DevTools like it’s the Matrix. Debugging is a superpower, and console.log() is just a training wheel.

How to Look Like a Senior Dev (Even If You’re Not)

  • You don’t panic console.log() everything.
  • You pause and inspect.
  • You use Network, Performance, and Coverage tabs occasionally.
  • You say things like: “Let me step through the call stack real quick.”