使用 VS Code 调试 Firefox 扩展的弹出脚本

Question

我刚开始在 Firefox 上开发插件，但在调试器工作时遇到了问题。

我在装有 Firefox 91.6 的 Debian 机器上使用 Visual Studio 代码 1.65，扩展名为 Debugger for Firefox（版本 2.9.6）。

我用的是这个标准，未修改，运行配置：

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

我的代码目前只是对 Mozilla 的 second extension tutorial 稍作修改，因此具有以下目录结构：

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

在 beastify.json 中设置的断点在 Fiefox 的开发工具或 VS 代码调试器中工作正常。但是，choose_beast.js 中的断点（管理弹出窗口中的逻辑）只会立即停止，然后继续。我刚好有时间在 VS Code 中看到线条背景颜色发生变化，以表明调试器停在那里，但它并没有。

也许是一个有用的信息：当我启动调试并启动 Firefox 时，断点在 VS 代码中变成空的和灰色的，而不是红色的。但是，当我点击浏览器选项卡中的扩展按钮时，它们又变红了。

我是不是遗漏了什么配置？不能调试既不是内容脚本也不是后台脚本的脚本吗？

Answer 1

根据 Mozilla 文档中关于 popup debugging 的部分，这种行为很可能会发生，因为默认情况下，当在弹出窗口外单击时，它会关闭并且它的代码会卸载 .

解决方案是在 about:config 中将 ui.popup.disable_autohide 设置更改为 true，以便在单击其他地方时弹出窗口保持打开状态并加载代码。

使用 VS Code 调试 Firefox 扩展的弹出脚本

Debug popup script of Firefox extension with VS Code

debugging

visual-studio-code

firefox

firefox-addon

firefox-addon-webextensions