Step over, step into, step out -- when to use each

Three Controls, One Purpose

Once execution is paused at a breakpoint, three controls let you navigate: step over, step into, and step out. Using the wrong one forces you to re-run the program from the beginning. Know which to use before pressing anything.

Step Over

Executes the current line as a black box and pauses at the next line in the same function. Use this when you are confident a function call is not the problem and want to skip past it. If a function call is on the current line, step over runs that entire function and returns.

Step Into

Enters the function call on the current line and pauses at its first line. Use this when you want to inspect what a function does internally.

Step Out

Executes the rest of the current function and pauses at the line after the call that entered it. Use this when you stepped into a function and realized it is not the problem -- step out to return to the call site quickly.

function main() {
  const a = validate(input);  // paused here
  const b = transform(a);
  return b;
}
// Step Into: enters validate(), pauses at its first line
// Step Over: runs validate() and pauses at transform(a)
// Step Out (if inside validate): finishes validate, pauses at transform(a)