How to inspect variables and watch expressions in a debugger
variable inspection, watch expressions, scope panel, hover inspection, evaluating expressions at breakpoints
Reading State in the Debugger
Pausing at a breakpoint is only useful if you can read the state. Every debugger provides a scope panel -- a tree of all variables in the current scope. But the scope panel shows raw structure; watch expressions let you evaluate custom logic against that state.
The Scope Panel
In Chrome DevTools, the Scope section appears on the right panel when paused. It shows local variables, closure scope, and global scope. Click any object to expand it. For deep structures, right-click and choose Store as global variable to inspect it in the console.
Watch Expressions
Add any JavaScript expression to the Watch panel. It evaluates live as you step through code. Useful for computed values that do not exist as named variables.
// Add these to Watch panel while debugging a cart:
cart.items.length
cart.items.every(i => i.price > 0)
new Date(session.expiresAt) - Date.now()
JSON.stringify(cart, null, 2)
Console Evaluation at Breakpoints
When paused, the DevTools console has access to the full current scope. Type any expression and press Enter. This lets you run functions, inspect nested properties, and test potential fixes against live state -- without changing the source code.