How to Step Over or Step Into in VS Code

Debugging is a crucial part of software development, and mastering navigation controls like “Step Over” and “Step Into” in Visual Studio Code (VS Code) can significantly speed up your troubleshooting process. This article provides a quick, direct guide on how to use these essential debugging commands in VS Code, detailing their keyboard shortcuts, UI buttons, and the key differences between them to help you control your code execution flow.

Step-by-Step Guide to Debugging Navigation

To use these controls, you must first start a debugging session and pause your code at a breakpoint.

1. Set a Breakpoint: Click to the left of the line numbers in your code file. A red dot will appear.
2. Start Debugging: Press F5 (or go to Run > Start Debugging).
3. Navigate Code: Once the execution pauses on your breakpoint, use the Debug Toolbar at the top of the screen or keyboard shortcuts to navigate.

Step Over (F10)

Step Over allows you to execute the current line of code and immediately move to the next line in the same function or file.

• How it works: If the current line contains a function call, VS Code will execute the entire function in the background and pause at the next line of the current file. It does not take you inside the called function.
• Keyboard Shortcut:
  • Windows/Linux: F10
  • macOS: F10 (or Fn + F10)
• Toolbar Icon: A curved arrow pointing over a blue dot.

Step Into (F11)

Step Into allows you to drill down into the details of your code by entering function calls.

• How it works: If the current line contains a function, VS Code will jump inside that function and pause on its first line of executable code. This is useful when you suspect a bug lies inside a specific helper function.
• Keyboard Shortcut:
  • Windows/Linux: F11
  • macOS: F11 (or Fn + F11)
• Toolbar Icon: A straight arrow pointing down into a blue dot.

Step Out (Shift + F11)

If you have stepped into a function and want to return to the parent function without stepping through every remaining line, use Step Out.

• How it works: It executes the remainder of the current function, returns to the caller, and pauses at the line immediately following the function call.
• Keyboard Shortcut:
  • Windows/Linux/macOS: Shift + F11
• Toolbar Icon: A straight arrow pointing up and out of a blue dot.