The launch.json file for the DevTools extension - Microsoft Edge Development (2023)

Visual Studio Code uses alaunch.jsonFile for configuring debug settings. To use the DevTools extension: alaunch.jsonThe file is only needed if you want to use the debugger and your web page needs to run on a web server and not just a local file system. In most cases, all you need to know is the generated DevTools content.launch.json(if you want to use it) is that you have to write the desired URL in the"URL Address"wire in several places. Read this article if you want to use custom advanced debug settings.

If you want to use the Visual Studio Code UI for exampleF5to startdevelopment toolstabs along with debug mode, your open folder (workspace) must be generated by DevTools (compatible with DevTools)launch.jsonfile in.vscodeDirectory.

Details about thelaunch.jsonThe file format is below. Typically, you don't need to change anything in the file other than replacing multiple instances of the URL string, as explained inOpen DevTools by clicking the Start Project buttonEmOpen DevTools and the DevTools browser.

Where name strings appear in the UI

He"Name"The string for each debug configuration populates the dropdowns in various places.

1. To choosefile>close folder.

2. To choosefile>recently opened>C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html, cloned byStep 5 – Clone the demo repositoryEmInstalling the DevTools extension for Visual Studio Code.

   suppose notlaunch.jsonThe file exists in.vscodeDirectory.

3. Select Activity Bar >Microsoft Edge Tools> click noGenerate release.jsonI like.

4. In the activity bar >investigator, double clickindex.htmlto open it.

5. Select Activity Bar >run and debug> click norun and debugI like.

   Militaryrun and debugThe top left sidebar is the stringsStart Edge Headless and add DevToolsYLaunch Edge and attach DevTools. At the bottom of the Visual Studio Code window is the stringStart Edge Headless and add DevTools. They are names of configurations composed in the.jsonwhich tells the Visual Studio Code debugger to open bothdevelopment toolsguides ordevelopment toolsTab and an external browser:

   "compounds": [ { "name": "Iniciar Edge sem interface e anexar DevTools", "configurations": [ "Iniciar Microsoft Edge no modo sem interface", "Abrir Edge DevTools" ] }, { "name": "Iniciar Edge and Attach DevTools", "Settings": ["Launch Microsoft Edge", "Abrir Edge DevTools" ] } ]

   

   See Also

   Configure launch.json for C/C++ debugging in Visual Studio CodeIntroduction to C++ and Mingw-w64 in Visual Studio Code

   Militaryconsole debuggingBottom right is the chainStart Microsoft Edge in headless mode. That's a chain, don't have thatEdge-DevToolsguide, but notEdge DevTools: NavegadorTab is the name of a single configuration, not a composite configuration:

   "configuraciones": [ ... { "tipo": "pwa-msedge", "nombre": "Microsoft Edge im Headless-Modus starten", "request": "launch", "runtimeArgs": [ "--headless " , "--remote-debugging-port=9222" ], "url": "file://c:\\Users\\collabera\\Documents\\GitHub\\Demos\\demo-to-do\\ index .html", "Apresentação": { "versteckt": wahr } },

   

6. Militaryrun and debugclick on the sidebarstart debugging. Bothdevelopment toolsThe tabs open and Visual Studio Code enters debug mode. This approach is the built-in Visual Studio Code UI for launching the debugger, not the DevTools UI described inOpen DevTools and the DevTools browser.

Where the launch.json file is placed

1. Our Visual Studio codesinvestigatordisc, orlaunch.jsonThe file is placed in a.vscodeFolder at the root of the folder you opened.

   • For a repository like the demo repository, if you open the entire repository folder, theGenerate release.jsonbutton creates a\.vscode\launch.jsonFile near the root for the entire repository directory.

   • If you open a specific smaller folder, e.g.\Demos\demo-to-do\, to dieGenerate release.jsonbutton sets alaunch.jsonFile only in this folder.

Visual Studio Code uses alaunch.jsonFile to configure and customize the debugger.launch.jsonis a debugger configuration file. This file also controls which web browser to use in conjunction with the debugger. For example, when you test your webpage by clicking a button on the webpage to run your JavaScript code, Visual Studio's code debugger listens to the browser and iterates through the JavaScript code on the webpage.

Next, a copy of thelaunch.jsonafter clicking onCreate release.jsonbutton on the extension.

there are threesettingsit's twolinksinitially set by default:

• settings- In the Visual Studio Code UI, these configuration names are displayed in the debugger UI:

  • Start Microsoft Edge- This is a "Startup" type setting.

  • Start Microsoft Edge in headless mode- This is a "Startup" type setting.

  • Open Edge Development Tools- This is a "debug" (or "attach") setting.

• links- In the Visual Studio Code UI, these are displayed in the debug toolbar:

  • Start Edge Headless and add DevTools

  • Launch Edge and attach DevTools

Intellisense and autocomplete

Hover over a JSON name or value to see a tooltip:

Start typing double quotes to see the autocomplete list of available JSON properties and descriptions:

When saving the file, be sure to specify well-formed JSON files, including commas.

Configuration type: startup vs. debug

These two different types of settings are defined in the same..jsonFile for the Visual Studio Code debugger.

settings

The following sections oflaunch.jsonThe file is from the extension v2.1.1 in a default installation directory of Visual Studio Code on Windows.

Setup 1: Launch Microsoft Edge

This is a "launch browser" setting. This setting controls the browser component, for example what.htmlsee file yeswithout headis not selected in the UI.

This configuration name is not displayed directly in the UI. This configuration is used by a composite configuration below.

{ "type": "pwa-msedge", "name": "Start Microsoft Edge", "request": "start", "runtimeArgs": [ "--remote-debugging-port=9222" ], "url " : "c:\\users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", // Enter the from your project to URL to finish setting "presentation": { "hidden": true } },

Setting 2 – Launch Microsoft Edge in headless mode

This is a "launch browser" setting. This setting controls the browser component, for example what.htmlsee file yesWithout headis selected in Edge DevTools >Ideaspage by default.

This configuration nameStart Microsoft Edge in headless modeis displayed on the user interface, e.g. B. in the debug toolbar and in theconsole debugging. If you launch multiple instances, a number will be added to additional instances in the UI, for example,Start Microsoft Edge in Headless Mode 2. This configuration is used by a composite configuration below.

{ "type": "pwa-msedge", "name": "Launch Microsoft Edge in unattended mode", "request": "launch", "runtimeArgs": [ "--headless", "--remote debugging - port =9222" ], "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\ index . html", // Provide your project URL to finalize the "Presentation" setting: { "hidden": true } },

Setting 3: Open Edge Developer Tools

This is a configuration attached to the debugger. This setting controls theEdge-DevToolsGuide (area), for example what.htmlfile fills theelementsTool.

This configuration name is not displayed directly in the UI. This configuration is used by a composite configuration below.

{ "type": "vscode-edge-devtools.debug", "name": "Open Edge DevTools", "request": "attach", "url": "c:\\Users\\username\\ .vscode \\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", // Specify your project URL to finalize the "Presentation" configuration: { " hidden" : true } }

composite configurations

Helinkssection oflaunch.jsondefines composite configurations.

Each composite configuration refers to two configurations: a configuration to open theEdge-DevToolstab in Visual Studio Code and the other settings for theEdge DevTools: NavegadorGuide (sometimes also calledPrint Screenoheadless browser) or bothEdge DevTools: Navegadortab and the entire Microsoft Edge browser window.

MilitaryMicrosoft Edge Toolsarea in whichGoalsClick on the right side of a targettoggle screenshotButton. The Headless EmbeddedEdge DevTools: NavegadorThe tab (panel) is closed or open.

MilitaryMicrosoft Edge Toolsarea in whichGoalsClick on the right side of a targetAnexe e abra o Microsoft Edge ToolsI like.

Composite Configuration 1 - Start Edge Headless and attach DevTools

This composite configuration starts the following components:

• HeEdge DevTools: NavegadorTab (panel) in Visual Studio Code. This is defined by the configuration that theName"Start Microsoft Edge in standalone mode," above.

• HeEdge-DevToolsTab (panel) in Visual Studio Code. This is defined by the configuration that theName"Open Edge DevTools" above.

{ "name": "Iniciar Edge Headless e anexar DevTools", "settings": ["Iniciar Microsoft Edge no modo Headless", "Abrir Edge DevTools" ] },

The name of this composite configuration,Start Edge Headless and add DevTools, appears on the debugging toolbar in Visual Studio Code.

Composite setup 2: Launch Edge and attach DevTools

This composite configuration starts the following components:

• HeEdge DevTools: NavegadorTab (panel) in Visual Studio Code. This is defined by the configuration that theName"Launch Microsoft Edge" is coming.

• The Microsoft Edge browser window. This is defined by the configuration that theName"Launch Microsoft Edge" is coming.

• HeEdge-DevToolsTab (panel) in Visual Studio Code. This is defined by the configuration that theName"Open Edge DevTools" above.

{ "name": "Iniciar Edge e anexar DevTools", "settings": ["Iniciar Microsoft Edge", "Abrir Edge DevTools" ] }

The name of this composite configuration,Launch Edge and attach DevTools, appears in the UI on the Visual Studio Code debugging toolbar.

add settings

You can define your own additional debug settings. tightenadd configurationI like.

See too

• Open DevTools and the DevTools browser.
• Get started with the DevTools extension for Visual Studio Code
• Microsoft Edge DevTools Extension for Visual Studio Code

launch.json for other platforms

• Configure C/C++ debuggingin the Visual Studio Code docs.
• configure the debuggerEmUsing React in Visual Studio Codein the Visual Studio Code docs.