Debugging & Tasks
Debugging
Set breakpoints, step through a run, and look at state, for compiled and interpreted languages, in the same window as the code.
Starting a debug session
Open the Run and Debug view from the Activity Bar (Ctrl+Shift+D) and press the green play button, or press F5 from anywhere. If the project has no debug configuration yet, Gyaanmitra offers to make one from the project type it detects.
Breakpoints
Click in the gutter next to a line to set a breakpoint. Right-click one for a conditional breakpoint: pause only when an expression is true, or only after N hits.
Step controls
Step over, into, or out of a function, or run to the cursor. Use the floating debug toolbar, or the keyboard shortcuts.
Variables & Watch
When execution is paused, look at every variable in scope. Pin an expression to the Watch list and it updates as you step.
Debug Console
Evaluate an expression in the paused program. Handy when you want to try a fix before you write it into the file.
Configuring launch.json
For anything past auto-detection, a debug configuration lives in
.vscode/launch.json in your workspace. It says which program to run, what
arguments to pass, which environment variables to set, and which debugger to
use. Create one with the gear icon in the Run and Debug view. The picker is
limited to the languages Gyaanmitra finds in your project.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Run current file",
"program": "${file}"
}
]
}Multiple configurations, one dropdown
Every configuration in launch.json shows up in the dropdown at the top of
the Run and Debug view. A common setup is one entry for the app and another
for its tests. Switch between them with a click.
Which languages are supported
JavaScript, TypeScript, and Node.js debugging work with nothing extra to install. Other languages (Python, Go, Rust, C/C++, Java, and more) get the same breakpoints, stepping, and inspection once you install that language's debugger extension from Open VSX. Most mainstream languages have one.
Debugging and the Integrated Browser
For front-end work, pair a debug session with the Integrated Browser. Set a breakpoint in your client-side code, trigger that path from the browser panel beside it, and step through what the browser is doing. You do not need a separate DevTools window for that.