Firefox does not open when debugging in Visual Studio Code

Question

When I start debugging with my launch configuration for Chrome, the browser opens. But when I use my launch configuration for Firefox, the browser does not open. A Firefox process is started though. There are no error messages.

• Visual Studio Code 1.36.1
• Debugger for Firefox 1.8.1
• Firefox 68.0.1
• Windows 10 1803
• Angular 7.0.0 (should not matter)

.vscode/launch.json:

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Chrome + localhost",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}"
      },
      {
        "type": "firefox",
        "request": "launch",
        "reAttach": true,
        "name": "Firefox + localhost",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}"
      },
    ]
  }

Answer 1

To use attach mode, you have to launch Firefox manually from a terminal with remote debugging enabled. Note that if you don't use Firefox Developer Edition, you must first configure Firefox to allow remote debugging. To do this, open the Developer Tools Settings and check the checkboxes labeled "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" (as described here). Alternatively you can set the following values in about:config:

Preference Name                          Value  Comment
devtools.debugger.remote-enabled         true   Required
devtools.chrome.enabled                  true   Required
devtools.debugger.prompt-connection      false  Recommended
devtools.debugger.force-local            false  Set this only if you want to attach VS Code to Firefox running on a different machine (using the host property in the attach configuration)

Then close Firefox and start it from a terminal like this:

Windows

"C:\Program Files\Mozilla Firefox\firefox.exe" -start-debugger-server

OS X

/Applications/Firefox.app/Contents/MacOS/firefox -start-debugger-server

Linux

firefox -start-debugger-server

Navigate to your web application and use this launch.json configuration to attach to Firefox:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html",
            "type": "firefox",
            "request": "attach"
        }
    ]
}

If your application is running on a Webserver, you need to add the url and webRoot properties to the configuration (as in the second launch configuration example above).