如何使用 VSCode 在 Firefox 中保留扩展并请求 Launch

Question

我正在尝试使用 React Dev Tools 和 Firefox Developer Edition 调试 React 应用程序。我无法将 React Dev Tools 安装到 Firefox 通过 VSCode 启动时使用的配置文件。当我通过在 /Applications 中打开它自己启动 Firefox 时，我安装了 React Dev Tools。

但是，当我运行下面的 launch.json 配置文件时，启动后在 FireFox 中的首选项 -> 扩展和主题 -> 扩展下没有显示任何扩展。

{
  "name": "Launch localhost",
  "type": "firefox",
  "request": "launch",
  "reAttach": true,
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
},

但是，我可以按照说明 here 并使用终端启动 Firefox 并将我的调试器附加到它。此配置文件具有 React 开发工具，并且工作正常运行ning:

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

launch.json:

{
  "name": "Attach",
  "type": "firefox",
  "request": "attach",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
},

但是如何使第一个请求与 launch 请求而不是 attach 一起工作？从阅读上看似乎与个人资料有关

Answer 1

我遇到了同样的问题，并且能够通过添加到我的 launch.json:

来解决它

"profile": "my-firefox-profile"

Firefox 可以安装多个配置文件。您可以通过在 firefoxes 地址栏中键入 about:profiles 来检查它们。它将向您显示配置文件列表。标记为Default profile: yes的应该是可以选择的。

我的 launch.json 现在看起来像这样：

    {
        "name": "Firefox",
        "type": "firefox",
        "request": "launch",
        "reAttach": true,
        "url": "http://localhost:4300",
        "webRoot": "${workspaceFolder}",
        "profile": "default-release-1"
    },

背景：

Firefox 配置文件包含浏览历史记录、书签以及最重要的附加组件等设置。通过告诉 VSCode 使用特定的配置文件，它与安装的插件一起使用。

如果您在使用 Angular 或 Vue 时遇到同样的问题，这也适用。

Answer 2

除了已接受的答案外，我还必须将以下内容添加到 launch.json 以使 Firefox 使用指定的配置文件启动。

"keepProfileChanges": true

我正在使用 VSCode 1.52.1 和 Firefox 84.0.2。

如何使用 VSCode 在 Firefox 中保留扩展并请求 Launch

How to preserve extensions in Firefox with VSCode and request Launch

reactjs

firefox

visual-studio-code

react-devtools