VS Code调试Firefox时TypeScript断点显示Unverified Breakpoint求助

• 确认TypeScript编译配置
  打开tsconfig.json，确保开启sourceMap并指定正确的输出目录，示例配置：

  {
    "compilerOptions": {
      "sourceMap": true,
      "outDir": "./dist",
      "rootDir": "./src"
    }
  }
  

  编译后检查dist目录下是否生成了与.js文件对应的.js.map文件。

• 修正launch.json关键配置
  重点调整以下几个核心字段，适配你的项目结构：

  • webRoot：直接设为项目根目录${workspaceFolder}，如果前端资源放在单独的public目录，就设为${workspaceFolder}/public
  • sourceMaps：必须设为true
  • pathMappings：映射TS源码路径和编译后JS的路径，示例：

    "pathMappings": {
      "/src": "${workspaceFolder}/src",
      "/dist": "${workspaceFolder}/dist"
    }
    

  完整示例launch.json：

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

• 检查Firefox调试扩展状态
  确保VS Code中的「Firefox Debugger」扩展是最新版本，旧版本可能存在source map解析兼容性问题。

• 验证浏览器端source map关联
  直接打开Firefox的开发者工具，在「源代码」面板中找到对应的TS文件，确认能正常加载源码，手动打一个断点测试是否生效。

• 清理缓存并重启调试
  清除Firefox的浏览器缓存，同时在launch.json中添加"clearConsole": true和"reloadOnChange": true，避免缓存导致source map不更新。

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