如何在 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}"
    }
  ]
}