Does Debugger for Firefox work if you have multiple versions of firefox installed?

[ewgoforth]

Hi,

I have Firefox, Firefox Nightly, and Firefox Developer edition installed on my Windows dev machine, Firefox is the default browser. I've created a .vscode/launch.json in the root directory of my JavaScript project.

I start my Kestrel web server in Visual Studio and it launches Firefox Developer Edition. I then hit the Run and Debug button in attach mode in Visual Studio Code, but it doesn't attach. If I try launch mode it launches a new instance of Firefox Developer Edition, but it still doesn't connect.

I'm not seeing any error messages either, but where would they be logged?

[hbenl]

• yes, it works with multiple versions of Firefox, in launch mode you can specify which version to use by adding firefoxExecutable to your launch.json, the value should be either the absolute path to the Firefox executable or the name of a Firefox edition (stable, developer or nightly) to look for it in its default installation path
• for attach mode to work you need to configure a Firefox profile that allows remote debugging and launch Firefox manually with the -start-debugger-server switch - see here
• I'm not sure what you mean when you say "it still doesn't connect" - what do you see when you try launch mode?
• if you want to investigate yourself, you can try enabling diagnostic logging

[ewgoforth]

Thanks Holger,

Here's my launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Firefox localhost",
      "type": "firefox",
      "request": "launch",
      "url": "https://localhost:44444",
      "webRoot": "${workspaceFolder}/MyAppClient",
      "log": {
        "fileName": "${workspaceFolder}/log.txt",
        "fileLevel": {
            "default": "Debug"
        }
    },       
    },
    {
      "name": "Attach Firefox against index.html",
      "type": "firefox",
      "request": "attach",
      "url": "https://localhost:44444/MyAppClient/index.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "https://localhost:44444/MyAppClient/index.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "pwa-msedge",
      "name": "Launch Microsoft Edge",
      "request": "launch",
      "runtimeArgs": [
        "--remote-debugging-port=9222"
      ],
      "url": "https://localhost:44444/MyAppClient/index.html",
      "presentation": {
        "hidden": true
      }
    },
    {
      "type": "pwa-msedge",
      "name": "Launch Microsoft Edge in headless mode",
      "request": "launch",
      "runtimeArgs": [
        "--headless",
        "--remote-debugging-port=9222"
      ],
      "url": "c:\\Users\\myprofile\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.6\\out\\startpage\\index.html", // Provide your project's url to finish configuring
      "presentation": {
        "hidden": true
      }
    },
    {
      "type": "vscode-edge-devtools.debug",
      "name": "Open Edge DevTools",
      "request": "attach",
      "url": "https://localhost:44444/MyAppClient/index.html",
      "presentation": {
        "hidden": true
      }
    }
  ],
  "compounds": [
    {
      "name": "Launch Edge Headless and attach DevTools",
      "configurations": [
        "Launch Microsoft Edge in headless mode",
        "Open Edge DevTools"
      ]
    },
    {
      "name": "Launch Edge and attach DevTools",
      "configurations": [
        "Launch Microsoft Edge",
        "Open Edge DevTools"
      ]
    }
  ]
}

Here's my log.txt:

DEBUG|000.097|BreakpointsManager: Setting 3 breakpoints for c:\Workspaces\MyApp\MyApp\MyApp\MyAppClient\app\view\Myfile1.js
DEBUG|000.099|BreakpointsManager: Setting 1 breakpoints for c:\Workspaces\MyApp\MyApp\MyApp\MyAppClient\app\view\Myfile3.js
DEBUG|000.099|BreakpointsManager: Setting 1 breakpoints for c:\Workspaces\MyApp\MyApp\MyApp\MyAppClient\app\view\Myfile2.js
DEBUG|000.115|DataBreakpointsManager: Setting 0 data breakpoints
DEBUG|000.120|FirefoxDebugAdapter: Setting exception filters: ["uncaught","debugger"]
DEBUG|000.122|FirefoxDebugAdapter: 0 threads
INFO |010.605|FirefoxDebugSession: Connection to Firefox closed - terminating debug session
DEBUG|011.118|FirefoxDebugSession: Removing C:\Users\myprofile\AppData\Local\Temp\vscode-firefox-debug-profile-10fe12a7-aaa3-4efe-bd85-ce4d580cf4a2
WARN |011.123|FirefoxDebugSession: Failed to remove temporary directory: Error: EBUSY: resource busy or locked, unlink 'C:\Users\myprofile\AppData\Local\Temp\vscode-firefox-debug-profile-10fe12a7-aaa3-4efe-bd85-ce4d580cf4a2\bounce-tracking-protection.sqlite'

Edge and Chrome work, firefox starts up and then goes away.

[hbenl]

Thanks for the log - it looks like the extension manages to connect to the debugger port but never receives the initial message that Firefox should send. My guess is that some other application is listening on the debugger port (which is 6000 by default).
Try adding "port": 6001 (or some other number) to your launch configuration.
(I guess you should also change url and webRoot to the same values as in the other configurations)

[ewgoforth]

I tried adding a

"port": with the values 6000, 6001, and 44444 with the same results

e.g.

    {
      "name": "Launch Firefox localhost",
      "type": "firefox",
      "request": "launch",
      "port": 6001,
      "url": "https://localhost:44444",
      "webRoot": "${workspaceFolder}/MyAppClient",
      "log": {
        "fileName": "${workspaceFolder}/log.txt",
        "fileLevel": {
            "default": "Debug"
        }
    }, 

I also tried making my url and webRoot to match the chrome settings

    {
   "name": "Launch Firefox localhost",
   "type": "firefox",
   "request": "launch",
   "port": 6001,
   "url": "https://localhost:44444/MyAppClient/index.html",
   "webRoot": "${workspaceFolder}"
   "log": {
     "fileName": "${workspaceFolder}/log.txt",
     "fileLevel": {
         "default": "Debug"
     }
 }
```, 
 
 but the log.txt looks the same:
 
 
 ```
DEBUG|000.063|BreakpointsManager: Setting 3 breakpoints for c:\Workspaces\MyApp\MyApp\MyApp\MyAppClient\app\view\Myfile1.js
DEBUG|000.064|BreakpointsManager: Setting 1 breakpoints for c:\Workspaces\MyApp\MyApp\MyApp\MyAppClient\app\view\Myfile3.js
DEBUG|000.064|BreakpointsManager: Setting 1 breakpoints for c:\Workspaces\MyApp\MyApp\MyApp\MyAppClient\app\view\Myfile2.js
DEBUG|000.084|DataBreakpointsManager: Setting 0 data breakpoints
DEBUG|000.088|FirefoxDebugAdapter: Setting exception filters: ["uncaught","debugger"]
DEBUG|000.089|FirefoxDebugAdapter: 0 threads
INFO |010.542|FirefoxDebugSession: Connection to Firefox closed - terminating debug session
DEBUG|011.059|FirefoxDebugSession: Removing C:\Users\myprofile\AppData\Local\Temp\vscode-firefox-debug-profile-82dac593-529e-4fb8-9c3f-7f3e327aa40b
WARN |011.063|FirefoxDebugSession: Failed to remove temporary directory: Error: EBUSY: resource busy or locked, unlink 'C:\Users\myprofile\AppData\Local\Temp\vscode-firefox-debug-profile-82dac593-529e-4fb8-9c3f-7f3e327aa40b\cert9.db'

[hbenl]

Well, it's no surprise that 6000 doesn't work as that's what it used before by default. And port 44444 can't work either because that's occupied by your web server.
You can list which ports are occupied with netstat -an. Are ports 6000 and 6001 in that list (after starting your web server in Visual Studio)?

[ewgoforth]

I started my webserver in Visual Studio and I don't see ports 6000 and 6001 in the list coming from netstat -an. I tried a "port": 9222, since that's what Edge seems to use, but the log.txt looks the same.

[hbenl]

Could you check if using "firefoxExecutable": "stable" or "firefoxExecutable": "nightly" makes any difference?

[ewgoforth]

Sorry, I haven't had time to look at this for a few days, I would believe that I'd also need to change the correct path in the Firefox: Executable setting

I changed it to

C:\Users\myuser\AppData\Local\Mozilla Firefox\firefox.exe

instead of:

C:\Program Files\Firefox Developer Edition\firefox.exe

My launch.json file looks like:

    {
      "name": "Launch Firefox localhost",
      "type": "firefox",
      "request": "launch",
      "port": 6001,
      "url": "https://localhost:44444",
      "firefoxExecutable": "stable",
      "webRoot": "${workspaceFolder}/MyAppClient",
      "log": {
        "fileName": "${workspaceFolder}/log.txt",
        "fileLevel": {
            "default": "Debug"
        }
    }, 

In the developer tool settings in my regular firefox, I opened the Developer Tools Settings and checked the checkboxes labeled "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging."

My log.txt looks like:

DEBUG|000.064|BreakpointsManager: Setting 1 breakpoints for c:\Workspaces\myapp\myapp\myapp\myappClient\app\view\HCOWorkflowFormPanelViewController.js
DEBUG|000.067|DataBreakpointsManager: Setting 0 data breakpoints
DEBUG|000.070|FirefoxDebugAdapter: Setting exception filters: ["uncaught","debugger"]
DEBUG|000.070|FirefoxDebugAdapter: 0 threads
INFO |010.091|FirefoxDebugSession: Connection to Firefox closed - terminating debug session
DEBUG|010.595|FirefoxDebugSession: Removing C:\Users\myprofile\AppData\Local\Temp\vscode-firefox-debug-profile-9a051417-7642-4b53-ba44-cdfbcb6244ed
WARN |010.599|FirefoxDebugSession: Failed to remove temporary directory: Error: EBUSY: resource busy or locked, unlink 'C:\Users\myprofile\AppData\Local\Temp\vscode-firefox-debug-profile-9a051417-7642-4b53-ba44-cdfbcb6244ed\bounce-tracking-protection.sqlite'