I'm getting started with addon development on Firefox and have trouble making the debugger work.

I'm using Visual Studio Code 1.65, with the extension Debugger for Firefox (version 2.9.6), on a Debian machine, with Firefox 91.6.

I use this standard, unmodified, run configuration:

{
  "name": "Launch WebExtension",
  "type": "firefox",
  "request": "launch",
  "reAttach": true,
  "addonPath": "${workspaceFolder}"
}

My code is for now just a little modification of Mozilla's second extension tutorial and thus has the following directory structure:

beastify/

    beasts/
        frog.jpg
        snake.jpg
        turtle.jpg

    content_scripts/
        beastify.js

    icons/
        beasts-32.png
        beasts-48.png

    popup/
        choose_beast.css
        choose_beast.html
        choose_beast.js

    manifest.json

Breakpoints set in beastify.json work fine, either in Fiefox's Dev tools or with VS Code debugger. However, breakpoints in choose_beast.js (managing the logic in the popup) only stop for in instant, then continue. I just have time to see the line background color change in VS Code, as to indicate the debugger is stopping there, but then it doesn't.

Perhaps an useful information: when I launch the debugging and Firefox starts, the breakpoints become empty and grey instead of red in VS code. However, when I click on the extension button in the browser tab, they get red again.

Am I missing something with the configuration? Isn't it possible to debug a script which is neither a content or background script?

CodePudding user response：

According to the part about popup debugging in Mozilla's documentation, this behaviour likely happens because by default, when clicking outside of the popup, it closes and its code unloads.

The solution is to change the ui.popup.disable_autohide setting to true in about:config, so that the popup remains open, and the code loaded, when clicking elsewhere.