Firefox does not open when debugging in Visual Studio Code

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).

My configuration and work flow.

P.S. I updated Firefox configuration in about:config, but I didn't get a needed simple result like Google Chrome.

I have installed the following browsers (Ubuntu 20.04 x64):

• Firefox for Ubuntu 94.0
• Google Chrome Version 96.0.4664.45 (Official Build) (64-bit)
• Microsoft Edge Version 96.0.1054.34 (Official build) beta (64-bit)

For all the browsers I didn't change their configuration.

My extensions for debugging (only one): Debugger for Firefox.

My VS Code:

Version: 1.62.3
Commit: ccbaa2d27e38e5afa3e5c21c1c7bef4657064247
Date: 2021-11-17T08:00:36.721Z
Electron: 13.5.2
Chrome: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Linux x64 5.11.0-40-generic

Configuration

{
    "configurations": [
        {
            // Start Debug -> Open Firefox, Open Debug console, Click an line in JS File and F5
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "name": "Firefox + File",
            "file": "${file}"
        },
        {
            // Start Debug -> Open Firefox, Open Debug console, Click an line in JS File and F5
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "name": "Firefox + Server",
            "url": "http://localhost:8080/${fileBasename}",
            // "url": "http://localhost:8080/index.html",
            "webRoot": "${workspaceFolder}/public/"
        }
        {
            "type": "pwa-chrome",
            "name": "Chrome + File",
            "request": "launch",
            "file": "${file}"
        },
        {
            "type": "pwa-chrome",
            "name": "Chrome + Server",
            "request": "launch",
            "url": "http://localhost:8080/${fileBasename}",
            // "url": "http://localhost:8080", // the index file
            "webRoot": "${workspaceFolder}/public"
        },
        {
            "name": "Edge + Server",
            "request": "launch",
            "type": "pwa-msedge",
            "url": "http://localhost:8080/${fileBasename}",
            // "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/public",
            "runtimeExecutable":"/opt/microsoft/msedge-beta/msedge"
        }
    ]
}

I can run my index.html and other html files as a local file and as a server page only in the public directory. On my server the file is in the public directory. I work from the root directory where the public directory is in it.

I have some unpleasant problems only with Firefox. Now it works with the following workaround and the configuration above.

Steps to start debugging in Firefox:

1. Use the provided configuration and we can change paths or files if it needs. https://code.visualstudio.com/docs/editor/variables-reference But for me it works when I use specified file in the URL, for example, /index.html.
2. Start the debugging (choose the configuration and press F5).
3. Firefox have been opened, but the debugging hasn't still worked.
4. Open DevTools (F12). Yes, without it the debugging doesn't work for me.
5. Reload the page (press F5 in the browser or Ctrl+R or another combination in your OS).
6. Debugging has been started with your breakpoints.

I have got the following message of VS Code, but it works without additional paths:

This file's path isn't mapped to any url that was loaded by Firefox. Either this file hasn't been loaded by Firefox yet or your debug configuration needs a pathMapping for this file - do you think the file has already been loaded and want to let the Path Mapping Wizard try to create a pathMapping for you?

I have had a little fix for the Microsoft Edge browser. I set a path to the bin file of the browser: "runtimeExecutable":"/opt/microsoft/msedge-beta/msedge".