VS Code調試器配置在Firefox中調試React

Question

我有一個使用create-react-app的React應用create-react-app並希望在Firefox中使用Visual Studio Code進行調試。 但我無法設置斷點。 斷點始終顯示為灰色圓圈而不是紅色圓圈。

配置如下所示：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Firefox",
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "webRoot": "${workspaceRoot}/src",
      "url": "http://localhost:3000/"
    },
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

使用Chrome進行調試工作正常。

我試了幾個變種：

{
  "name": "Firefox",
  "type": "firefox",
  "request": "launch",
  "url": "http://localhost:3000/",
  "pathMappings": [{
    "url": "http://localhost:3000/",
    "path": "${workspaceFolder}/src"
  }]
}

...和${workspaceRoot}相同而不是${workspaceFolder} 。

我甚至配置了像調試器文檔中描述的Firefox，並使用firefox -start-debug-server啟動Firefox，這在“啟動”模式下是不必要的。 但沒有任何效果。

什么是正確的launch.json來調試Firefox中的React應用程序。

Answer 1

你是在正確的軌道上，但你的pathMappings可能略有偏差。 右鍵單擊VS代碼中“已加載的腳本”面板中顯示的目錄，然后單擊“映射到本地目錄”，然后選擇文件系統上與所顯示目錄對應的目錄，可以找到正確的路徑映射。在調試器中。 這將在launch.json中添加pathMappings條目。 通過一些試驗和錯誤，這是適合我的配置：

{
  "name": "Launch Firefox",
  "type": "firefox",
  "request": "launch",
  "url": "http://localhost:3000",
  "pathMappings": [
    {
      "url": "http://localhost:3000/path/to/my-repo/",
      "path": "${workspaceFolder}/"
    }
  ]
}