You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
One of the key features of Visual Studio Code is its great debugging support. VS Code's built-in debugger helps accelerate your edit, compile, and debug loop.
13
+
One of the key features of Visual Studio Code is its great debugging support. VS Code's built-in debugger helps accelerate your edit, compile, and debug loop. The [Visual Studio Marketplace](https://marketplace.visualstudio.com/vscode/Debuggers) has a wide variety of debugging extensions to add debugging support for other languages and runtimes to VS Code.
14
14
15
-
<iframewidth="560"height="315"src="https://www.youtube-nocookie.com/embed/3HiLLByBWkg"title="Getting started with debugging in VS Code"frameborder="0"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe>
15
+
This article describes the debugging features of VS Code and how to get started with debugging in VS Code. You also learn how you can use Copilot in VS Code to accelerate setting up your debugging configuration and starting a debugging session.
16
+
17
+
> [!TIP]
18
+
> Beyond debugging, you can also take advantage of Copilot to help fix problems in your code. Use the `/fix` prompt in Copilot Chat to get suggestions for fixing your code, or use the **Copilot** > **Fix** editor context menu action. Learn more about [using Copilot to fix problems in your code](/docs/copilot/overview.md#fix-issues).
19
+
20
+
The following video shows how to get started with debugging in VS Code.
21
+
22
+
<iframewidth="560"height="315"src="https://www.youtube-nocookie.com/embed/3HiLLByBWkg"title="Getting started with debugging in VS Code"frameborder="0"allowfullscreen></iframe>
23
+
24
+
> [!TIP]
25
+
> If you don't have a Copilot subscription yet, use Copilot for free by signing up for the [Copilot Free plan](https://github.com/github-copilot/signup). You'll get a monthly limit of completions and chat interactions.
16
26
17
27
## User interface
18
28
@@ -24,6 +34,37 @@ The following diagram shows the main components of the debugging user interface:
24
34
1.**Debug toolbar**: has buttons for the most common debugging actions.
25
35
1.**Debug console**: enables viewing and interacting with the output of your code running in the debugger.
26
36
1.**Debug sidebar**: during a debug session, lets you interact with the call stack, breakpoints, variables, and watch variables.
37
+
1.**Run** menu: has the most common run and debug commands.
38
+
39
+
### Run and Debug view
40
+
41
+
To bring up the **Run and Debug** view, select the **Run and Debug** icon in the **Activity Bar** on the side of VS Code. You can also use the keyboard shortcut `kb(workbench.view.debug)`.
42
+
43
+
44
+
45
+
The **Run and Debug** view displays all information related to running and debugging and has a top bar with debugging commands and configuration settings.
46
+
47
+
If running and debugging is not yet configured (no `launch.json` has been created), VS Code shows the Run start view.
48
+
49
+
50
+
51
+
### Debug actions
52
+
53
+
Once a debug session starts, the **Debug toolbar** will appear on the top of the window.
| Continue / Pause <br> `kb(workbench.action.debug.continue)`|**Continue**: Resume normal program/script execution (up to the next breakpoint). <br> **Pause**: Inspect code executing at the current line and debug line-by-line. |
60
+
| Step Over <br> `kb(workbench.action.debug.stepOver)`| Execute the next method as a single command without inspecting or following its component steps. |
61
+
| Step Into <br> `kb(workbench.action.debug.stepInto)`| Enter the next method to follow its execution line-by-line. |
62
+
| Step Out <br> `kb(workbench.action.debug.stepOut)`| When inside a method or subroutine, return to the earlier execution context by completing remaining lines of the current method as though it were a single command. |
63
+
| Restart <br> `kb(workbench.action.debug.restart)`| Terminate the current program execution and start debugging again using the current run configuration. |
64
+
| Stop <br> `kb(workbench.action.debug.stop)`| Terminate the current program execution. |
65
+
66
+
> [!TIP]
67
+
> Use the `setting(debug.toolBarLocation)` setting to control the location of the debug toolbar. It can be the default `floating`, `docked` to the **Run and Debug** view, or `hidden`. A `floating` debug toolbar can be dragged horizontally and also down to the editor area (up to a certain distance from the top edge).
27
68
28
69
## Debugger extensions
29
70
@@ -35,44 +76,42 @@ Below are several popular extensions, which include debugging support:
> The extensions shown above are dynamically queried. Select an extension tile above to read the description and reviews to decide which extension is best for you.
40
-
41
79
## Start debugging
42
80
43
-
The following documentation is based on the built-in [Node.js](https://nodejs.org/) debugger, but most of the concepts and features are applicable to other debuggers as well.
81
+
1. Install a [Debugger extension](#debugger-extensions) for your language and runtime.
44
82
45
-
It is helpful to first create a sample Node.js application before reading about debugging. You can follow the [Node.js walkthrough](/docs/nodejs/nodejs-tutorial.md) to install Node.js and create a simple "Hello World" JavaScript application (`app.js`). Once you have a simple application set up, this page will take you through VS Code debugging features.
83
+
VS Code has built-in support for debuggingNode.js, JavaScript, and TypeScript.
46
84
47
-
## Run and Debug view
85
+
1. Optionally, configure a `launch.json`[launch configuration](#launch-configurations).
48
86
49
-
To bring up the **Run and Debug** view, select the **Run and Debug** icon in the **Activity Bar** on the side of VS Code. You can also use the keyboard shortcut `kb(workbench.view.debug)`.
87
+
For simple apps, VS Code will try to debug your currently active file without a launch configuration. However, for most debugging scenarios, creating a launch configuration file is needed.
50
88
51
-
89
+
> [!TIP]
90
+
> Copilot can help you [create a launch configuration](#generate-a-launch-configuration-with-ai) for your project. Open Copilot Chat and enter the `/startDebugging` chat prompt and Copilot will generate a launch configuration for you. Alternatively, enter a prompt like `generate a launch config for a django app #codebase`.
52
91
53
-
The **Run and Debug** view displays all information related to running and debugging and has a top bar with debugging commands and configuration settings.
92
+
1. Press `kb(workbench.action.debug.start)`, or press the green play button in the **Run and Debug** view to start a debug session.
54
93
55
-
If running and debugging is not yet configured (no `launch.json` has been created), VS Code shows the Run start view.
94
+
> [!TIP]
95
+
> Copilot can help you set up and start a debugging session by using the `copilot-debug` terminal command. Enter `copilot-debug`, followed by the command to run your app to start a debug session. For example, enter `copilot-debug node /bin/www`, or `copilot-debug python app.py` to start a debugging session for a Node.js or Python app.
56
96
57
-
58
-
59
-
## Run menu
97
+
### Run mode
60
98
61
-
The top-level **Run**menu has the most common run and debug commands:
99
+
In addition to debugging a program, VS Code supports **running**the program. The **Debug: Start Without Debugging** action is triggered with `kb(workbench.action.debug.run)` and uses the currently selected launch configuration. Many of the launch configuration attributes are supported in 'Run' mode. VS Code maintains a debug session while the program is running, and pressing the **Stop** button terminates the program.
62
100
63
-
101
+
> [!TIP]
102
+
> The **Run** action is always available, but not all debugger extensions support 'Run'. In this case, 'Run' is the same as 'Debug'.
64
103
65
104
## Launch configurations
66
105
67
106
To run or debug a simple app in VS Code, select **Run and Debug** on the Debug start view or press `kb(workbench.action.debug.start)` and VS Code will try to run your currently active file.
68
107
69
-
However, for most debugging scenarios, creating a launch configuration file is beneficial because it allows you to configure and save debugging setup details. VS Code keeps debugging configuration information in a `launch.json` file located in a `.vscode` folder in your workspace (project root folder) or in your [user settings](/docs/editor/debugging.md#global-launch-configuration) or [workspace settings](/docs/editor/multi-root-workspaces.md#workspace-launch-configurations).
108
+
However, for most debugging scenarios, creating a launch configuration file is beneficial because it allows you to configure and save debugging setup details. VS Code keeps debugging configuration information in a `launch.json` file located in a `.vscode` folder in your workspace (project root folder), or in your [user settings](/docs/editor/debugging.md#global-launch-configuration) or [workspace settings](/docs/editor/multi-root-workspaces.md#workspace-launch-configurations).
70
109
71
110
To create a `launch.json` file, select **create a launch.json file** in the Run start view.
@@ -110,6 +149,23 @@ Do not assume that an attribute that is available for one debugger automatically
110
149
111
150
Review all automatically generated values and make sure that they make sense for your project and debugging environment.
112
151
152
+
### Generate a launch configuration with AI
153
+
154
+
With Copilot in VS Code, you can accelerate the process of creating a launch configuration for your project. To generate a launch configuration with Copilot:
155
+
156
+
1. Open the Chat view with `kb(workbench.action.chat.open)`, or select **Open Chat** from the Copilot menu in the title bar.
157
+
158
+
1. Enter the `/startDebugging` chat prompt to generate a debug configuration.
159
+
160
+
Alternatively, you can also enter a custom prompt, like _generate a debug config for an express app #codebase_.
161
+
162
+
This can be useful if your workspace has files with different languages.
163
+
164
+
> [!NOTE]
165
+
> The `#codebase` chat variable gives Copilot the context of your project, which helps it generate a more accurate response.
166
+
167
+
1. Apply the suggested configuration, and then start debugging.
168
+
113
169
### Launch versus attach configurations
114
170
115
171
In VS Code, there are two core debugging modes, **Launch** and **Attach**, which handle two different workflows and segments of developers. Depending on your workflow, it can be confusing to know what type of configuration is appropriate for your project.
@@ -118,7 +174,7 @@ If you come from a browser Developer Tools background, you might not be used to
118
174
119
175
The best way to explain the difference between **launch** and **attach** is to think of a **launch** configuration as a recipe for how to start your app in debug mode **before** VS Code attaches to it, while an **attach** configuration is a recipe for how to connect VS Code's debugger to an app or process that's **already** running.
120
176
121
-
VS Code debuggers typically support launching a program in debug mode or attaching to an already running program in debug mode. Depending on the request (`attach` or `setting(launch)`), different attributes are required, and VS Code's `launch.json` validation and suggestions should help with that.
177
+
VS Code debuggers typically support launching a program in debug mode or attaching to an already running program in debug mode. Depending on the request (`attach` or `launch`), different attributes are required, and VS Code's `launch.json` validation and suggestions should help with that.
122
178
123
179
### Add a new configuration
124
180
@@ -144,30 +200,6 @@ In addition, the **debug status** appears in the Status Bar showing the active d
| Continue / Pause <br> `kb(workbench.action.debug.continue)`|**Continue**: Resume normal program/script execution (up to the next breakpoint). <br> **Pause**: Inspect code executing at the current line and debug line-by-line. |
156
-
| Step Over <br> `kb(workbench.action.debug.stepOver)`| Execute the next method as a single command without inspecting or following its component steps. |
157
-
| Step Into <br> `kb(workbench.action.debug.stepInto)`| Enter the next method to follow its execution line-by-line. |
158
-
| Step Out <br> `kb(workbench.action.debug.stepOut)`| When inside a method or subroutine, return to the earlier execution context by completing remaining lines of the current method as though it were a single command. |
159
-
| Restart <br> `kb(workbench.action.debug.restart)`| Terminate the current program execution and start debugging again using the current run configuration. |
160
-
| Stop <br> `kb(workbench.action.debug.stop)`| Terminate the current program execution. |
161
-
162
-
>**Tip**: Use the setting `setting(debug.toolBarLocation)` to control the location of the debug toolbar. It can be the default `floating`, `docked` to the **Run and Debug** view, or `hidden`. A `floating` debug toolbar can be dragged horizontally and also down to the editor area (up to a certain distance from the top edge).
163
-
164
-
### Run mode
165
-
166
-
In addition to debugging a program, VS Code supports **running** the program. The **Debug: Start Without Debugging** action is triggered with `kb(workbench.action.debug.run)` and uses the currently selected launch configuration. Many of the launch configuration attributes are supported in 'Run' mode. Visual Studio maintains a debug session while the program is running, and pressing the **Stop** button terminates the program.
167
-
168
-
> [!TIP]
169
-
> The **Run** action is always available, but not all debugger extensions support 'Run'. In this case, 'Run' will be the same as 'Debug'.
170
-
171
203
## Breakpoints
172
204
173
205
Breakpoints can be toggled by clicking on the **editor margin** or using `kb(editor.debug.action.toggleBreakpoint)` on the current line. Finer breakpoint control (enable/disable/reapply) can be done in the **Run and Debug** view's **BREAKPOINTS** section.
@@ -234,7 +266,7 @@ Here are some optional attributes available to all launch configurations:
234
266
*`presentation` - using the `order`, `group`, and `hidden` attributes in the `presentation` object, you can sort, group, and hide configurations and compounds in the Debug configuration dropdown and in the Debug quick pick.
235
267
*`preLaunchTask` - to launch a task before the start of a debug session, set this attribute to the label of a task specified in [tasks.json](/docs/editor/tasks.md) (in the workspace's `.vscode` folder). Or, this can be set to `${defaultBuildTask}` to use your default build task.
236
268
*`postDebugTask` - to launch a task at the very end of a debug session, set this attribute to the name of a task specified in [tasks.json](/docs/editor/tasks.md) (in the workspace's `.vscode` folder).
237
-
*`internalConsoleOptions` - this attribute controls the visibility of the Debug Console panel during a debugging session.
269
+
*`internalConsoleOptions` - this attribute controls the visibility of the Debug console panel during a debugging session.
238
270
*`debugServer` - **for debug extension authors only**: this attribute allows you to connect to a specified port instead of launching the debug adapter.
239
271
*`serverReadyAction` - if you want to open a URL in a web browser whenever the program under debugging outputs a specific message to the debug console or integrated terminal. For details see section [Automatically open a URI when debugging a server program](#automatically-open-a-uri-when-debugging-a-server-program) below.
240
272
@@ -379,7 +411,7 @@ A function breakpoint is created by pressing the **+** button in the **BREAKPOIN
379
411
380
412
If a debugger supports data breakpoints, they can be set from the context menu in the **VARIABLES** view. The **Break on Value Change/Read/Access** commands add a data breakpoint that is hit when the value of the underlying variable changes/is read/is accessed. Data breakpoints are shown with a red hexagon in the **BREAKPOINTS** section.
381
413
382
-
## Debug Console REPL
414
+
## Debug console REPL
383
415
384
416
Expressions can be evaluated with the **Debug Console** REPL ([Read-Eval-Print Loop](https://en.wikipedia.org/wiki/Read–eval–print_loop)) feature. To open the Debug Console, use the **Debug Console** action at the top of the Debug pane or use the **View: Debug Console** command (`kb(workbench.debug.action.toggleRepl)`).
385
417
@@ -518,7 +550,7 @@ The `uriFormat` property describes how the port number is turned into a URI. The
518
550
519
551
The resulting URI is then opened outside of VS Code ("externally") with the standard application configured for the URI's scheme.
520
552
521
-
### Trigger Debugging via Edge or Chrome
553
+
### Trigger debugging via Edge or Chrome
522
554
523
555
Alternatively, the `action` can be set to `debugWithEdge` or `debugWithChrome`. In this mode, a `webRoot` property can be added that is passed to the Chrome or Edge debug session.
524
556
@@ -528,7 +560,7 @@ To simplify things a bit, most properties are optional and we use the following
528
560
***uriFormat**: `"http://localhost:%s"`
529
561
***webRoot**: `"${workspaceFolder}"`
530
562
531
-
### Triggering an Arbitrary Launch Config
563
+
### Triggering an arbitrary launch config
532
564
533
565
In some cases, you might need to configure additional options for the browser debug session, or use a different debugger entirely. You can do this by setting `action` to `startDebugging` with a `name` property set to the name of the launch configuration to start when the `pattern` is matched.
534
566
@@ -549,6 +581,11 @@ To see a tutorial on the basics of debugging, check out this video:
549
581
550
582
*[Getting started with debugging in VS Code](https://www.youtube.com/watch?v=3HiLLByBWkg) - Learn about debugging in VS Code.
551
583
584
+
To learn more about Copilot and AI-assisted debugging in VS Code:
585
+
586
+
*[Debugging and fixing issues with Copilot](/docs/copilot/overview.md#fix-issues)
587
+
*[Copilot cheat sheet for debugging and fixing issues](/docs/copilot/copilot-vscode-features.md#debug-and-fix-problems)
588
+
552
589
To learn about debugging support for other programming languages via VS Code extensions:
0 commit comments