对于 React 应用程序，vscode 调试器中的断点通常会失败

Question

我的 React 应用程序是用 Typescript 编写的，我使用 Chrome 对其进行调试。 重新启动应用程序后，一切正常。 我可以设置断点并且调试器在它们处停止。

当我更改源代码时出现问题。 现有断点移动到错误的行，当我尝试设置新断点时，它们无法解决。 我必须关闭 Chrome 并重新打开它才能让事情再次正常运行。 我的启动配置是：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Shell GUI",
            "url": "https://localhost:3001",
            "webRoot": "${workspaceFolder}/src",
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///build/*": "${webRoot}/*"
            }
        }
    ]
}

我试图通过指定源 map 覆盖来解决这个问题，但这根本没有改善这种情况。 如果我还没有创建生产版本，那么根本就没有构建文件夹。 在我看来，Chrome 似乎没有进行代码更改（假设此处断点由 Chrome 评估）。

即使在源代码更改后，我必须更改什么才能使调试正常工作？

Answer 1

不幸的是，目前这是 create-react-app 的一个已知问题：

这里有一个跟踪问题的链接： https://github.com/facebook/create-react-app/issues/6074