VS Code中React App出现‘Unbound breakpoint’无法调试求助

• 检查launch配置文件
  打开项目根目录下的.vscode/launch.json，确认配置参数无误。以Chrome调试为例，正确的基础配置应该是这样：

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

  重点确认url和React启动的端口一致（默认是3000），webRoot指向项目的src目录。如果用的是默认的JavaScript Debugger，把type改成pwa-chrome或pwa-firefox即可。

• 先确保React应用正常运行
  手动执行npm start或yarn start，打开浏览器确认应用能访问，且端口和launch配置里的完全匹配。应用没启动的话，调试器根本连不上。

• 重置调试扩展状态
  把所有调试相关的扩展（Debugger for Firefox、Chrome、JavaScript Debugger）全部禁用，重启VS Code后再逐个启用，每启用一个就测试下调试功能。扩展冲突或缓存异常是常见的问题根源。

• 验证断点位置
  断点要打在可执行代码行上，比如组件的渲染逻辑、函数内部，别打在空行、注释或者import语句上。另外确认是在开发环境调试——生产环境构建的代码会被压缩，断点大概率失效。

• 清理VS Code缓存
  关闭VS Code，根据你的系统删除对应的缓存目录：

  • Windows：%APPDATA%\Code\Cache 和 %APPDATA%\Code\CachedData
  • macOS：~/Library/Application Support/Code/Cache 和 ~/Library/Application Support/Code/CachedData
  • Linux：~/.config/Code/Cache 和 ~/.config/Code/CachedData
    重启VS Code后再尝试调试。

• 重置项目依赖
  删除node_modules文件夹和package-lock.json（或yarn.lock），重新执行npm install或yarn install，安装完成后启动应用再调试。依赖更新导致的兼容性问题也可能引发调试故障。

内容的提问来源于stack exchange，提问作者Hovo Pinelopi