Breakpoints and variables

Place breakpoints and inspect variable scope

A breakpoint on a function declaration may pause only while the module initially defines the function. A breakpoint intended to pause on every call belongs on an executable statement inside the function body.

const transformedValue = transform(inputValue);
const nextValue = consume(transformedValue);

A breakpoint on the first line exposes inputValue before transform() runs. transformedValue does not exist yet. Stepping over the line executes transform() and makes its return value available. A breakpoint on the second line exposes both values immediately.

F10         Step Over    execute the current line without entering the called function
F11         Step Into    enter the function called by the current line
Shift+F11   Step Out     finish the current function and return to its caller
F5          Continue     resume execution until the next breakpoint

A scope is the region of code in which a variable name can be resolved. Function parameters and variables declared inside the current function appear under Local. A closure is the retained outer scope used by an inner function; module-level or outer-function variables referenced by the current function appear under Closure. Runtime-provided names available throughout the process appear under Global.

The call stack records the active chain of function calls. Each listed stack frame represents one paused function call and has its own local and closure scopes. Selecting another frame changes which variables Hover, Watch, and the Debug Console resolve.

_{Find by: breakpoint placement, step over, step into, step out, continue, f10, f11, shift f11, local scope, closure, watch, debug console}

Watch variables across scopes

A Watch expression is a variable name or JavaScript expression that VS Code evaluates every time execution pauses. It can be added through the + icon on the right side of the WATCH heading. VS Code resolves it from the selected stack frame, regardless of whether the referenced name appears under Local, Closure, or Global.

WATCH -> + -> <VARIABLE_OR_EXPRESSION>

Watch expressions remain visible while stepping through the application. The selected stack frame controls the scope used to resolve each expression.

_{Find by: vscode watch, watch variable, watch expression, search variables, local, closure, global, paused stack frame, inspect value}