Angular 14开启sourceMap后，Firefox调试器不显示TypeScript源码求助

1. 核心配置校验 #

tsconfig.json #

确保compilerOptions中sourceMap开启，同时避免冲突配置：

{
  "compilerOptions": {
    "sourceMap": true,
    // 禁用inlineSourceMap，它会将source map嵌入JS文件，可能导致Firefox识别异常
    "inlineSourceMap": false,
    // 若无需自定义源码根路径，删除或留空sourceRoot，错误配置会干扰映射
    "sourceRoot": ""
  }
}

angular.json #

检查开发模式下的sourceMap全量开启，同时确认优化未启用：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "serve": {
          "configurations": {
            "development": {
              "sourceMap": {
                "scripts": true,
                "styles": true,
                "vendor": true
              },
              "optimization": false
            }
          }
        }
      }
    }
  }
}

注：若sourceMap直接设为true也可，但显式配置所有类型更稳妥。

2. Firefox调试器设置检查 #

• 打开调试器（F12），点击右上角齿轮图标进入设置
• 勾选启用源映射和启用JavaScript源映射
• 检查忽略列表，确保未将项目源码路径或Angular相关依赖加入忽略

3. 缓存清理与重启 #

• 清空Firefox缓存（Ctrl+Shift+Delete），仅勾选「缓存」项删除
• 停止ng serve，删除项目根目录的dist和.angular文件夹
• 重新执行ng serve --configuration development启动项目

4. 依赖版本一致性检查 #

确认Angular CLI与核心包版本匹配，避免版本兼容问题：

{
  "dependencies": {
    "@angular/core": "14.x.x"
  },
  "devDependencies": {
    "@angular/cli": "14.x.x"
  }
}

版本不一致时，执行npm install同步依赖。

5. 验证source map生成状态 #

启动项目后，访问http://localhost:4200/main.js.map（对应JS文件的.map路径）：

• 若能下载到JSON文件，说明source map已生成，问题出在Firefox识别逻辑
• 若无法访问，说明构建未生成source map，需重新核对配置

内容的提问来源于stack exchange，提问作者Marc Le Bihan