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

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}/*"
            }
        }
    ]
}

我试图通过指定源映射覆盖来解决这个问题，但这根本没有改善情况。如果我还没有创建生产版本，那么根本就没有构建文件夹。对我来说，好像 Chrome 没有得到代码更改（假设这里断点由 Chrome 求值）。

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

Answer 1

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

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

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

Breakpoints in vscode debugger often fail for a React application

reactjs

vscode-debugger