How to Start Debugging in VS Code
Debugging is a crucial part of the software development process, and Visual Studio Code (VS Code) offers a powerful built-in debugger to make this task easier. This article provides a quick, step-by-step guide on how to configure and start a debugging session in VS Code, covering the basic setup, creating a launch configuration, and using the debug controls for various programming languages.
Step 1: Open Your Project and Set a Breakpoint
Before starting a debug session, open the folder containing your source code in VS Code. To observe how your code behaves during execution, you should set a breakpoint.
- Open the source code file you want to debug.
- Hover your mouse to the left of the line numbers.
- Click to place a red dot (breakpoint). The execution of the program will pause at this line.
Step 2: Open the Run and Debug View
To access the debugging features, navigate to the Run and Debug view:
- Click on the Run and Debug icon in the Activity Bar on the left side of the window (it looks like a play button with a bug next to it).
- Alternatively, use the keyboard shortcut Ctrl+Shift+D (Windows/Linux) or Cmd+Shift+D (macOS).
Step 3: Start the Debugging Session
Depending on your project type, you can start debugging using one of two methods:
Method A: Quick Start (Run and Debug)
If you have a simple single-file project (such as a Python, JavaScript, or Go file), you can start debugging immediately: 1. Click the Run and Debug button in the Run and Debug view. 2. Select your environment/language from the dropdown list if prompted. 3. VS Code will automatically run the active file and pause at your breakpoint.
Method B: Configure a launch.json File
For complex projects, web applications, or specific runtime
environments, you will need to create a configuration file: 1. In the
Run and Debug view, click on create a launch.json file.
2. Select your workspace environment (e.g., Node.js, Python, C++). 3. VS
Code will create a .vscode folder containing a
launch.json file. 4. Customize the configurations (such as
arguments, environment variables, or program paths) within this JSON
file. 5. Save the file, select your configuration from the dropdown menu
at the top of the Run and Debug view, and click the green Play
(Start Debugging) button or press F5.
Step 4: Use the Debug Toolbar
Once the session starts, the Debug Toolbar will appear at the top of the screen. You can use these controls to navigate your code:
- Continue (F5): Resume program execution until the next breakpoint.
- Step Over (F10): Execute the next line of code without entering functions.
- Step Into (F11): Enter into the function on the current line.
- Step Out (Shift+F11): Finish the current function and return to the caller.
- Restart (Ctrl+Shift+F5 / Cmd+Shift+F5): Restart the debugging session.
- Stop (Shift+F5): End the debugging session.