如何在 Visual Studio 代码中调试“create-react-app”？

Question

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

应用程序通常通过npm startwhich调用来运行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

您的第一次启动配置很好，您只需要：

1. npm start从单独的终端启动开发服务器；
2. 按F5VS Code 中的 或绿色箭头启动调试器并打开新的浏览器实例。

参考：调试 React

.vscode/launch.json

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

更新：编辑了答案，将已弃用的替换pwa-chrome为chrome。

Answer 2

这是示例项目反应

npx create-react-app my_app

1 如果还没有，请创建 Launchjson 文件。这会自动创建

2. 选择网络应用程序（chrome）

3.将端口号8080（默认）更改为3000（或您分配的端口）

4.获取package.json。您可以看到脚本，并且您将注意力集中在启动词上，调试脚本将自动建议单击它。应用程序在端口 localhost:3000 上运行

或者

5.可以用浏览器查看

6.现在在应用程序的启动处添加断点（您想要的位置）

7. 单击启动 chrome

8. 刷新页面。现在您可以看到断点命中

它是如何工作的(Gif) 单击它以获得更好的质量