如何在 visual studio 代码中调试 `create-react-app`？

Question

我尝试了此处和其他地方提出的建议，但无法让 vscode 调试器正常工作，I.E.断点永远不会激活，当然它们也不会中断。

应用程序通常是运行，npm start 调用 react-scripts 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

您的 first 启动配置没问题，您只需要从单独的终端使用 npm start 启动开发服务器，然后按 F5 或用于启动调试器并打开新浏览器实例的绿色箭头。

参考：Debugging 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}"
    }
  ]
}

如何在 visual studio 代码中调试 `create-react-app`？

How to debug `create-react-app`s in visual studio code?

node.js

reactjs

visual-studio-code

create-react-app

react-scripts