如何在VS Code中调试TypeScript版Create React App？未验证断点问题

针对你遇到的Create React App（CRA）TypeScript项目在VS Code中调试Firefox时出现的“未验证断点”问题，可按以下步骤逐一排查修复：

1. 修正launch.json调试配置 #

CRA的编译产物路径有特定结构，需要明确sourcemap的映射规则，替换你当前的launch.json为以下配置：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Firefox",
            "request": "launch",
            "type": "firefox",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src",
            "enableCRAWorkaround": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}

• webRoot设为${workspaceFolder}/src，直接指向源码目录，避免路径歧义
• enableCRAWorkaround必须设为true，Firefox调试插件针对CRA的编译逻辑有专门适配
• sourceMapPathOverrides强制将webpack生成的sourcemap路径映射到本地源码，解决路径不匹配问题

2. 恢复tsconfig.json的CRA默认配置 #

CRA不依赖本地tsc编译，而是通过Babel处理TypeScript，因此需调整以下配置：

{
  "compilerOptions": {
    // ... 保留其他原有配置
    "noEmit": true, // 必须设为true，CRA会自行处理编译输出
    "sourceMap": true // 确保开启sourcemap生成
  },
  "include": ["src"]
}

• noEmit设为false会导致本地tsc生成额外文件，干扰CRA的webpack编译流程，引发sourcemap映射错误

3. 确保CRA启动时生成sourcemap #

CRA在start模式下默认会生成sourcemap，但可通过环境变量强制开启：
在package.json的start脚本中添加环境变量：

"scripts": {
    "start": "GENERATE_SOURCEMAP=true react-scripts start"
}

4. 调试前的准备步骤 #

• 先执行npm start启动项目，确保页面正常加载后再启动VS Code调试（F5）
• 关闭所有浏览器标签页，避免缓存旧的sourcemap文件
• 在VS Code中清理旧断点，重新在.tsx文件中设置断点

完成以上步骤后，重新启动调试，断点应该能正常验证并触发。

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