Using Your Debugger's Watch Expressions Instead of Re-Running the Program

In a college data structures course, I had a recursive function that was returning the wrong value somewhere deep in the call stack, and my process at the time was to add a breakpoint, run the program, check one variable, stop, tweak something, and run it again, sometimes a dozen times in a row to watch a single value change across the recursion. A TA finally showed me the watch panel, and it cut that entire loop down to one run.

A watch expression is a value or expression you register with the debugger once, and it stays visible and updates automatically every time execution pauses, instead of you having to hunt for that variable in scope each time you hit a breakpoint. In Chrome DevTools, that is the Watch panel in the Sources tab: click the plus, type a variable name or any valid expression, and it evaluates in the current scope every time you step or hit a breakpoint again.

The expression does not have to be a bare variable. You can watch something like array.length, or a comparison like index === targetIndex, or a property access several layers deep, and the debugger re-evaluates it fresh at every pause. That is what made the recursion bug findable: instead of expanding the same nested object in the Scope panel at every breakpoint hit, I watched the one property that mattered and just kept stepping, watching it change across each recursive call in a single run.

Watch expressions are also what makes conditional debugging practical for anything involving loops or recursion, since you can combine a watch with stepping to see exactly which iteration a value goes wrong on without restarting. They persist across a debugging session, so once you have set one up for a given bug, every subsequent breakpoint hit, in that function or any other, shows it automatically, which is the part that actually saves the re-running.