Debug, not Visual Studio Code (2023)

One of the key features of Visual Studio Code is its excellent debugging support. VS Code's built-in debugger helps speed up your edit, build, and debug cycle.

Debugger Extensions

VS Code has built-in debugging support for theNode.jsruntime and can debug JavaScript, TypeScript, or any other language that transpiles to JavaScript.

To debug other languages ​​and runtimes (includingPHP,ruby,O,C #,Piton,C++,Power Shellmimuch others), look towardsPurifiers extensionsno VS CodeMercadoselect itInstall additional treatment plantson the top-level Run menu.

Here are several popular extensions that include debugging support:

Tip: The extensions shown above are queried dynamically. Select an extension block above to read the description and reviews to decide which extension is best for you.

start debugging

The following documentation is based on the embedded versionNode.jsdebugger, but most of the concepts and features are applicable to other debuggers as well.

It's helpful to first build a sample Node.js application before reading about debugging. you can follow theTutorial de Node.jsto install Node.js and create a simple "Hello World" JavaScript application (aplicación.js). After setting up a simple app, this page will walk you through VS Code's debugging capabilities.

Run view and debug

bring therun and debugview, select therun and debugicon onactivity barnext to VS Code. You can also use the keyboard shortcut⇧⌘D(Windows,LinuxCtrl+Shift+D).

orun and debugview displays all running and debugging related information and has a top bar with debugging commands and configuration options.

If execution and debugging are not yet configured (notlaunch.jsonwas created), VS Code displays the Start Execution view.

execute menu

the upper levelcorreThe menu has the most common run and debug commands:

startup settings

To run or debug a simple app in VS Code, selectrun and debugin the Start Debugging view or pressF5and VS Code will try to run your currently active file.

However, for most debugging scenarios, creating a startup configuration file is beneficial because it allows you to configure and save debugging configuration details. VS Code keeps debugging configuration information in alaunch.jsonfile located in a.vscodefolder in your workspace (project root folder) or in yourUser settingsodesktop setup.

to create alaunch.jsonfile, clickcreate a launch.json filelink in the Start Execution view.

VS Code will try to automatically detect your debugging environment, but if that fails, you'll need to manually choose:

Here is the generated startup configuration for debugging Node.js:

{ "version":"0.2.0", "settings": [{ "writes":"that", "application":"launch", "Name":"Launch Program", "skip files": ["<internal_node>/**"], "program":"${workbook}\\application.js"}]}

If you switch back to File Explorer view (⇧⌘E(Windows,LinuxCtrl+Mayus+E)), you will see that VS Code has created a.vscodefolder and added thelaunch.jsonfile to your workspace.

Observation- You can debug a simple app even if you don't have a folder open in VS Code, but you can't manage startup settings or configure advanced debugging. VS Code's status bar turns purple if you don't have a folder open.

Note that the attributes available in the startup configuration vary from debugger to debugger. You can use IntelliSense hints (⌃Espaço(Windows,LinuxCtrl+Space)) to find out what attributes exist for a specific debugger. Hover help is also available for all attributes.

Don't assume that an attribute available to one debugger will automatically work for other debuggers as well. If you see wavy green lines in your boot configuration, hover over them to find out what the problem is and try to fix it before starting a debugging session.

Review all automatically generated values ​​and make sure they make sense for your project and debugging environment.

Launch Configuration vs. Attach

In VS Code, there are two main modes of debugging,LaunchmiTo attach, which handle two different workflows and developer segments. Depending on your workflow, it can be confusing to know what kind of setup is right for your project.

If you're coming from a browser developer tools background, you may not be used to "launching from your tool" since the browser instance is already open. When you open DevTools, you are simplyattachingDevTools in the open browser tab. On the other hand, if you come from a server or desktop, it is normal that your editorlaunchyour process for you, and your editor automatically attaches its debugger to the newly started process.

The best way to explain the difference betweenlaunchmito attachis to think of alaunchconfiguration as a recipe for how to start your app in debug modebeforeVS code is attached to it, while ato attachConfiguration is a recipe for how to connect the VS Code debugger to an application or process that isofthe race.

VS Code debuggers generally support starting a program in debug mode or attaching it to a program that is already running in debug mode. Depending on the order (to attacholaunch), different attributes and VS Code are requiredlaunch.jsonvalidation and hints should help with that.

Add a new configuration

To add a new configuration to an existing onelaunch.json, use one of the following techniques:

• Use IntelliSense if the cursor is located inside the configuration array.
• to tightadd configurationto invoke the IntelliSense snippet at the beginning of the array.
• Chooseadd configurationoption on the Run menu.

VS Code also supports composite launch configurations to launch multiple configurations at the same time; for more details please read thissection.

To start a debugging session, first select the configuration calledlaunch programusing theConfiguration dropdown listnorun and debugto see. After defining your startup configuration, start your debugging session withF5.

Alternatively, you can run your setup through thecommand palette(⇧⌘P(Windows,LinuxCtrl+Shift+P)) Filter OnDebug: select and start debuggingor writing'debug'and selecting the configuration you want to debug.

As soon as a debugging session starts, theDEBUG CONSOLEthe panel is displayed and shows the debug output and the status bar changes color (orange for default color themes):

furthermore, thedebug stateappears in the status bar showing the active debugging configuration. By selecting the debugging state, a user can change the active startup configuration and begin debugging without having to open therun and debugto see.

debug actions

After starting a debugging session, theDebugging Toolbarwill appear at the top of the editor.

Advice: Use the settingsdebug.toolBarLocationto control the location of the debugging toolbar. can be the defaultfloating,anchoredfor himrun and debugsee theescondido. ANDfloatingthe debugging toolbar can be dragged horizontally and also downwards in the editor area.

career mode

In addition to debugging a program, VS Code supportsthe racethe program. HeDebug: Run (start without debugging)the action is triggered with⌃F5(Windows,LinuxCtrl+F5)and uses the currently selected boot configuration. Many of the launch configuration attributes are supported in 'Run' mode. VS Code maintains a debugging session while the program runs and presses the buttonCutThe button ends the program.

Advice:OcorreThe action is always available, but not all debugger extensions support 'Run'. In this case, 'Run' will be the same as 'Debug'.

breakpoints

Breakpoints can be toggled by clicking the buttonpublisher's marginusing itF9on the current line. More precise control of the breakpoint (enable/disable/reapply) can be done in therun and debugPoints of viewINTERRUPTION POINTSsection.

• Breakpoints in the editor margin are normally displayed as red circles.
• Disabled breakpoints have a filled gray circle.
• When you start a debugging session, breakpoints that cannot be registered by the debugger change to a hollow gray circle. The same can happen if the source is edited while running a debugging session without live editing support.

If the debugger supports breaking different types of errors or exceptions, they are also available in theINTERRUPTION POINTSto see.

oReapply all breakpointsThe command resets all breakpoints to their original location. This is useful if your debugging environment is "lazy" and "misses" breakpoints in source code that have not yet been executed.

Optionally, breakpoints can be displayed in the editor's general rule by turning on the settingdebug.showBreakpointsInOverviewRuler:

registration points

A log point is a variant of a breakpoint that does not "break" the debugger, but logs a message to the console. Log points are especially useful for injecting logs when debugging production servers that cannot be paused or stopped.

A Logpoint is represented by a "diamond" icon. Log messages are plain text, but may include expressions to be evaluated in braces ('{}').

Like regular breakpoints, logpoints can be enabled or disabled, and can also be controlled by a condition or hit count.

Observation: Logpoints are supported by VS Code's built-in Node.js debugger, but can be implemented using other debugging extensions. HePitonmiJavaextensions, for example, support registration points.

data inspection

Variables can be inspected in theVARIABLESSection fromrun and debugpreview or hover over the font in the editor. The values ​​of the variables and the evaluation of the expression are relative to the stack frame selected in theCALL STACKsection.

The values ​​of the variables can be modified with thedefine valueaction from the variable's context menu. Also, you can use thecopy valueaction to copy the value of the variable, orcopy as expressionaction to copy an expression to access the variable.

Variables and expressions can also be evaluated and observed in therun and debugPoints of viewVERsection.

Variable names and values ​​can be filtered by typing while focus is on theVARIABLESsection.

Atributos Launch.json

There are manylaunch.jsonattributes to help support different debuggers and debugging scenarios. As mentioned above, you can use IntelliSense (⌃Espaço(Windows,LinuxCtrl+Space)) to see the list of attributes available after specifying a value for thewritesattribute.

The following attributes are required for each boot configuration:

• writes- the type of debugger to use for this startup configuration. Each installed debugging extension has a type:thatfor the built-in node debugger, for example, orphpmiofor PHP and Go extensions.
• application- the request type of this startup configuration. At this time,launchmito attachthey are compatible.
• Name- the easy-to-read name to display in the debug startup configuration dropdown.

Here are some optional attributes available for all boot configurations:

• presentation- using thetidy,group, miescondidoattributes notpresentationobject, you can sort, group, and hide settings and compounds from the Debug Settings drop-down menu and the Debug quick selection.
• taskprelaunch- to start a task before starting a debugging session, set this attribute to the tag of a task specified intasks.json(on the desk.vscodeBinder). Or, it can be defined as${defaultBuildTask}to use your default build task.
• postDebugTask- to start a task at the end of a debugging session, set this attribute to the name of a task specified intasks.json(on the desk.vscodepasta).
• internalConsoleOptions- this attribute controls the visibility of the Debug Console panel during a debugging session.
• debug server-only for authors of debugging extensions: This attribute allows you to connect to a specific port instead of starting the debug adapter.
• serverListoAcción- if you want to open a URL in a web browser every time the program you are debugging sends a specific message to the debugging console or integrated terminal. For more details, see the sectionAutomatically open a URI when debugging a server programUnder of.

Many debuggers support some of the following attributes:

• program- executable or file to run when starting the debugger
• arguments- arguments passed to the program for debugging
• environment- environment variables (the valuenullcan be used to "undefine" a variable)
• envFile- path to dotenv file with environment variables
• cwd- current working directory to find dependencies and other files
• porta- port when connecting to a running process
• stop at the entrance- interrupt immediately when the program starts
• console- what type of console to use, for example,internal console,integrated terminal, oexternal terminal

variable substitution

VS Code makes commonly used paths and other values ​​available as variables and supports variable substitution within strings inlaunch.json. This means you don't need to use absolute paths in your debug configuration. For example,${workbook}gives the root path of a workspace folder,${file}the file was opened in the active editor and${environment:Name}the 'Name' environment variable. You can see a full list of predefined variables atVariable referenceor by invoking IntelliSense inside dellaunch.jsonstring attributes.

{ "writes":"that", "application":"launch", "Name":"Launch Program", "program":"${workspace folder}/app.js", "cwd":"${workbook}", "arg": ["${env:USERNAME}"]}

Platform-specific properties

Launch.jsonsupports configuration values ​​(for example, arguments passed to the program) that depend on the operating system on which the debugger is running. To do this, place a platform-specific literal in thelaunch.jsonand specify the corresponding properties within that literal.

Below is an example that happens"arg"to program differently on Windows:

{ "version":"0.2.0", "settings": [{ "writes":"that", "application":"launch", "Name":"Launch Program", "program":"${workspace folder}/node_modules/gulp/bin/gulpfile.js", "arg": ["myfolder/path/app.js"], "windows": { "arg": ["my folder\\camino\\application.js"]}}]}

Valid operational properties are"windows"for windows,"linux"for Linux and"osx"for macOS. Properties set at an operating system-specific scope override properties set at the global scope.

Please note that thewritesproperty cannot be placed inside a platform-specific section, becausewritesit indirectly determines the platform in remote debugging scenarios and this would result in a cyclical dependency.

In the following example, program debugging alwaysstops at the entranceexcept on macOS:

{ "version":"0.2.0", "settings": [{ "writes":"that", "application":"launch", "Name":"Launch Program", "program":"${workspace folder}/node_modules/gulp/bin/gulpfile.js", "stop at the entrance":TRUE, "osx": { "stop at the entrance":false}}]}

Global launch settings

VS Code supports adding a"launch"object inside your userDefinitions. Is"launch"the settings will be shared across all your workspaces. For example:

"launch": { "version":"0.2.0", "settings": [{ "writes":"that", "application":"launch", "Name":"Launch Program", "program":"${file}"}]}

Advanced Breakpoint Topics

Conditional breakpoints

A powerful debugging feature of VS Code is the ability to define conditions based on expressions, hit counts, or a combination of both.

• expression condition: The breakpoint will be hit each time the expression evaluates toTRUE.
• hit count: The 'hit count' controls how many times a breakpoint must be hit before it 'breaks' execution. Whether a 'hit count' is honored and the exact syntax of the expression varies between debugger extensions.

You can add a condition and/or hit count when creating a source breakpoint (with theAdd conditional breakpointaction) or when modifying an existing one (with theedit conditionaction). In both cases, an embedded text box opens with a dropdown menu where you can enter expressions:

Condition editing and visit count support are also supported withoccupationmiexceptionBreakpoints You can start editing conditions from the context menu or from the newedit conditionaction.

An example of editing conditions inINTERRUPTION POINTSto see:

If a debugger does not support conditional breakpoints, theAdd conditional breakpointmiedit conditionActions will be missing.

Built-in breakpoints

Embedded breakpoints will only be hit when execution reaches the column associated with the embedded breakpoint. This is particularly useful when debugging minified code that contains multiple statements on a single line.

An inline breakpoint can be set using⇧F9(Windows,LinuxShift+F9)or via the context menu during a debugging session. Inline breakpoints are displayed inline in the editor.

Built-in breakpoints can also have conditions. It is possible to edit multiple breakpoints in one line via the context menu in the left margin of the editor.

Function breakpoints

Instead of placing breakpoints directly in the source code, a debugger can support creating breakpoints by specifying a function name. This is useful in situations where the source is not available but the name of a function is known.

A function breakpoint is created by pressing the button+on buttonINTERRUPTION POINTSsection header and entering the name of the role. Function breakpoints are shown with a red triangle on theINTERRUPTION POINTSsection.

data breakpoints

If a debugger supports data breakpoints, they can be set at theVARIABLESview and will be affected when the value of the underlying variable changes. Data cut points are shown with a red hexagon in theINTERRUPTION POINTSsection.

REPL Debug Console

Expressions can be evaluated with thedebug consoleREPLACE (Read-speed-print loop) feature. To open the Debug Console, use thedebug consoleat the top of the Debug panel or use theSee: debug consoledomain (⇧⌘Y(Windows,LinuxCtrl+Shift+Y)). Expressions are evaluated after pressingGet intoand the REPL debug console displays hints as you type. If you need to enter multiple lines, useShift+Enterbetween lines and then submit all lines for evaluation withGet intoThe Debug Console input uses active editor mode, which means that the Debug Console input supports syntax coloring, indentation, self-closing quotes, and other language features.

Observation: You must be in a running debug session to use the REPL debug console.

Redirect input/output to/from debug target

Input/output redirection is debugger/runtime specific, so VS Code doesn't have a built-in solution that works for all debuggers.

Here are two approaches you might want to consider:

1. Start the program to debug ("debug target") manually from a terminal or command prompt and redirect input/output as needed. Be sure to pass the appropriate command line options to the debug target so that a debugger can attach it. Create and run an "attached" debug configuration that is attached to the debug target.

2. If the debugger extension you use can execute the debugging target in VS Code's built-in terminal (or in an external terminal), try passing shell redirection syntax (for example, "<" or ">") as arguments .

here is an examplelaunch.jsonsettings:

{ "Name":"startup program reading a file from stdin", "writes":"that", "application":"launch", "program":"program.js", "console":"Integrated terminal", "arg": ["<","em.txt"]}

This approach requires the "<" syntax to be passed through the debugger extension and exited unchanged in the integrated terminal.

Multi-target debugging

For complex scenarios that involve more than one process (for example, a client and a server), VS Code supports debugging multiple targets.

Using multi-target debugging is simple: after starting a first debugging session, just start another session. Once a second session runs, the VS Code UI changes tomulti-alvo way:

• Breakout sessions now appear as top-level items in theCALL STACKto see.
  
• The debugging toolbar shows the currentactive session(and all other sessions are available in a drop down menu).
  
• Debugging actions (for example, all actions on the debugging toolbar) are performed in the active session. The active session can be changed using the dropdown menu on the debugging toolbar or by selecting a different item in theCALL STACKto see.

Composite Boot Configuration

An alternative way to start multiple debugging sessions is by using acompoundlaunch configuration. A composite launch configuration lists the names of two or more launch configurations that will be activated in parallel. optionally ataskprelaunchit can be specified to run before individual debugging sessions start. the boolean flagstop everythingcontrols whether manually ending a session will stop all composite sessions.

{ "version":"0.2.0", "settings": [{ "writes":"that", "application":"launch", "Name":"server", "program":"${workspace folder}/server.js"},{ "writes":"that", "application":"launch", "Name":"Client", "program":"${workspace folder}/client.js"}], "compounds": [{ "Name":"Server/Client", "settings": ["server","Client"], "pre-launch task":"${defaultBuildTask}", "stop everything":TRUE}]}

Composite startup configurations are displayed in the startup configuration dropdown menu.

remote debugging

VS Code does not support remote debugging - this is a feature of the debugging extension you are using and you should refer to the extension's page atMercadofor support and details.

However, there is one exception: the Node.js debugger included with VS Code supports remote debugging. Watch theDebugging Node.jstopic to learn how to set this up.

Automatically open a URI when debugging a server program

Developing a web program often requires opening a specific URL in a web browser to access the server code in the debugger. VS Code has a built-in "serverListoAcción" to automate this task.

Here is an example of a simpleexpress node.jsapplication:

era express=demand('express');era application=express();application.get('/',occupation(tidy,resolution) { resolution.to send('Hello World!');});application.I'm listening(3000,occupation() { console.Registration('Sample application listening on port 3000!');});

This application first installs a "Hello World" handler for the "/" URL, and then starts listening for HTTP connections on port 3000. The port is advertised in the debugging console, and typically the developer now writeshttp://localhost:3000in your browser application.

oserverListoAcciónfeature makes it possible to add a structured propertyserverListoAcciónfor any startup configuration and select an "action" to perform:

{ "writes":"that", "application":"launch", "Name":"Launch Program", "program":"${workspace folder}/app.js", "ServidorListoAcción": { "standardize":"listening on port ([0-9]+)", "uri format":"http://servidorlocal:%s", "action":"open externally"}}

HerestandardizeThe property describes the regular expression to match the output string of the program that advertises the port. The port number pattern is enclosed in parentheses to make it available as a regular expression capturing group. In this example, we are only extracting the port number, but it is also possible to extract a full URI.

ouri formatThe property describes how the port number is transformed into a URI. First%sit is replaced by the first capturing group of the matching pattern.

The resulting URI is then opened outside of VS Code ("externally") with the default application configured for the URI scheme.

Trigger debugging via Edge or Chrome

Alternatively, theactioncan be set todepurarConBordeodebug with chrome. In this mode, oneweb rootyou can add the property that is passed to the debugging session from Chrome or Edge.

To keep things a bit simpler, most of the properties are optional and we use the following fallback values:

• standardize:"listening.* (https?://\\S+|[0-9]+)"which corresponds to the commonly used messages "listening on port 3000" or "Now listening on: https://localhost:5001".
• uri format:"http://servidorlocal:%s"
• web root:"${workbook}"

Enabling an arbitrary startup configuration

In some cases, it may be necessary to configure additional options for the browser debugging session or use an entirely different debugger. You can do this by settingactionforstart debuggingcommonNameproperty set to the name of the startup configuration to start when thestandardizeis paired.

The named boot configuration must be in the same file or folder as the one with theserverListoAcción.

HereserverListoAcciónfeature in action:

Next steps

For more information on VS Code's Node.js debugging support, take a look at:

• Node.js- Describes the Node.js debugger, which is included with VS Code.
• Typescript- The Node.js debugger also supports TypeScript debugging.

For tutorials on the basics of debugging Node.js, check out these videos:

• Introduction Video: Debugging- Shows the basics of debugging.
• Introduction to debugging Node.js- Shows how to attach a debugger to a running Node.js process.

For more information on support for debugging other programming languages ​​through VS Code extensions:

• C++
• Piton
• Java

For more information on VS Code task execution support, visit:

• Chores- Describes how to perform tasks with Gulp, Grunt and Jake and how to display errors and warnings.

To write your own debugger extension, visit:

• debugger extension- Uses a mock sample to illustrate the steps required to create a VS Code debug extension.

common questions

What are the supported debugging scenarios?

Debugging Node.js-based applications is supported on Linux, macOS, and Windows out of the box with VS Code. Many other scenarios are supported byVS Code Extensionsavailable on the market.

I don't see any startup settings in the Run and Debug view dropdown menu. What is wrong?

The most common problem is that you have not configuredlaunch.jsonor there is a syntax error in that file. Alternatively, you may need to open a folder, since folderless debugging does not support startup configurations.

12/07/2022