如何在 Visual Studio 代碼中調試“create-react-app”？

Question

我嘗試了在這里和其他地方提出的建議，但無法讓 vscode 調試器正常工作，IE 斷點永遠不會激活🔴當然它們也不會中斷。

該應用程序通常使用調用react-scripts start的npm start運行。

我已經嘗試過這些啟動配置：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Launch Chrome against localhost",
        "type": "pwa-chrome",
        "request": "launch",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}"
      },
      {
        // I adapted this from a config to debug tests
        "name": "create-react-app",
        "type": "node",
        "request": "launch",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
        "args": ["start"],
        "cwd": "${workspaceRoot}",
        "protocol": "inspector",
        "console": "integratedTerminal"
      }
    ]
  }

Answer 1

你的第一個啟動配置很好，你只需要從一個單獨的終端使用npm start啟動開發服務器，然后按F5或綠色箭頭啟動調試器並打開一個新的瀏覽器實例。

參考：調試 React

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}