Learning on Web Dev Open is free for all.

Systems Thinking > Proving it worksconsole.log is a crutch with a cost
Phase 03Proving it works170 of 434

console.log is a crutch with a cost

Every log statement is a guess about where the problem is. A breakpoint asks the program instead of guessing.

Concept14 minAI pair

A log tells you the value of one thing you thought to print, at one place you thought to print it. A breakpoint gives you every variable in scope, the whole call stack, and the ability to step forward and watch the moment it goes wrong. The reason people avoid the debugger is unfamiliarity, and it is about twenty minutes of unfamiliarity.

The two features worth learning immediately are conditional breakpoints, pause only when id === 47, so you skip the four hundred iterations that behaved, and logpoints, which print an expression without pausing and without editing the file, so there is nothing to remember to delete. Both are a right-click in the sources panel.

Then learn to read a stack backwards. The top frame is where it blew up, which is frequently library code and rarely interesting. Walk down until you reach the first frame you wrote: that is usually where the wrong value was passed in, and the frames below it tell you how you got there. Break-on-exception, including caught exceptions, finds the failures that something else has been swallowing.

You should now be able to

  • Use conditional and logpoint breakpoints instead of editing code
  • Read a call stack backwards to the origin of a value
Ask the community

Loading…