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

Posted 2023-03-28

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

【英文标题】：Breakpoints in vscode debugger often fail for a React application

【发布时间】：2020-06-01 16:02:18

【问题描述】：

我的 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 评估）。

即使在源代码更改后，我还需要进行哪些更改才能使调试正常工作？

【参考方案1】：

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

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

【讨论】：

哇，我上下搜索了这方面的帮助，但我没有点击那个报告。如果您找不到简单的单词，那么所有搜索引擎的价值是什么？似乎切换到 Firefox 作为调试主机是要走的路。