How to Use Run and Debug in VS Code: A Beginner's Guide

Debugging in VS Code means running your code under a debugger that can pause execution, let you inspect variables, and step through code one line at a time. The Run and Debug view is where you start and control every debug session.

This guide walks you through your first debug session from start to finish. You do not need a special project. A single JavaScript or Python file is enough to follow along.

Open the Run and Debug view

The Run and Debug view is the vertical panel on the left side of VS Code, accessed from the Activity Bar. Click the icon that looks like a play button with a bug (or press Ctrl+Shift+D on Windows/Linux, Cmd+Shift+D on macOS).

When no debug session is running, the view shows a Run and Debug button and a dropdown to pick a launch configuration. If you have never debugged in this workspace before, the dropdown is empty and the button says Run and Debug.

The view has these sections, visible once a session starts:

• VARIABLES: Shows local and global variables with their current values.
• WATCH: Lets you type expressions and watch their values change as you step through code.
• CALL STACK: Shows the chain of function calls that led to the current paused line.
• BREAKPOINTS: Lists every breakpoint you have set across all files.

You can collapse or expand each section. During a debug session, these sections populate automatically.

Start your first debug session

Open the file you want to debug. Make sure it is the active editor tab. Press F5.

VS Code shows a dropdown asking you to pick a debugger. For JavaScript or TypeScript, choose Node.js. For Python, choose Python Debugger. Pick the matching debugger extension for other languages.

After you select the debugger, VS Code starts the session. The Status Bar changes color (orange in most themes) to show that a debug session is active. The Debug Console panel opens at the bottom and displays any output from your program.

If your program runs and exits immediately, that is normal. You have not set any breakpoints yet, so the debugger ran straight through to the end. The orange Status Bar disappears when the session finishes.

If VS Code asks you to pick a debugger every time, it could not guess your runtime. Select create a launch.json file in the Run and Debug view and pick your environment to create a permanent configuration. See the launch.json guide for details.

Set a breakpoint

A breakpoint tells the debugger, "pause here so I can look around." Click in the left margin of the editor, next to a line number. A red filled circle appears. You can also place your cursor on a line and press F9.

Start debugging again with F5. The program runs until it reaches your breakpoint, then pauses. The line where execution stopped is highlighted in yellow, and a yellow arrow appears in the left margin.

Now you can inspect the state of your program at that exact moment. Hover over any variable in the editor to see its current value. The VARIABLES section of the Run and Debug view also shows every variable in scope.

To remove a breakpoint, click the red circle again or press F9 on the same line. To disable it without removing it, right-click the breakpoint and select Disable Breakpoint. A disabled breakpoint shows as a gray filled circle and is ignored until you enable it again.

Use the debug toolbar

Once a debug session starts and pauses at a breakpoint, a floating toolbar appears at the top of the editor. Each button controls how execution moves forward.

Continue is the one you will use most. Press F5 to run until the next breakpoint after inspecting the paused line. The program finishes when no more breakpoints remain.

Step Over is useful when you want to watch each line execute without diving into functions you trust. Step Into is for when you suspect a bug is inside a function call and want to follow it.

The toolbar location can be changed. Set debug.toolBarLocation in Settings to docked (attached to the Run and Debug view), floating (default), or hidden.

Use the Debug Console

The Debug Console appears automatically when a debug session starts. If you do not see it, press Ctrl+Shift+Y (Windows/Linux) or Cmd+Shift+Y (macOS) or click Debug Console in the panel area.

The Debug Console serves two purposes.

First, it shows your program's output. Any text your code writes to the console appears here automatically while the debugger runs.

Second, it lets you evaluate expressions interactively. While paused at a breakpoint, type any expression into the input box at the bottom. Press Enter and VS Code evaluates it in the context of the current stack frame. The result prints on the next line.

For example, if you are paused inside a function that has a variable user, type user.name in the Debug Console and press Enter. The value appears on the next line. You can also call methods: type user.email.toLowerCase() to see the result.

The Debug Console uses the language mode of your active editor, so you get syntax highlighting and autocomplete suggestions as you type.

A complete debugging workflow

Here is what a real debug session looks like, end to end:

Troubleshooting

F5 does nothing

Check that a file is open and focused. The Run and Debug view needs an active editor. Also check that you are not on a Markdown or plain text file. VS Code can only debug files with a recognized language.

My breakpoint is gray and hollow

A hollow gray circle means the debugger could not bind the breakpoint. This often happens when the source file on disk does not match the running code, or when the debugger extension cannot map the file to a running process. Try stopping the session, saving the file, and starting again.

I see "Cannot find runtime" when pressing F5

You need to install the runtime or the debugger extension for your language. For Node.js, install Node.js. For Python, install the Python extension. For other languages, search the Extensions view for your language and install the debugger extension.

The Debug Console shows no output

Make sure you are looking at the Debug Console tab, not the Terminal or Output tab. The panel area at the bottom can switch between these. Click the dropdown or use the View: Debug Console command from the Command Palette.

Once you are comfortable starting and stopping debug sessions, learn how breakpoints, conditional breakpoints, and logpoints give you finer control over when your code pauses.