使用Chrome DevTools调试Ionic Capacitor Angular应用：Source Maps失效问题

问题场景 #

在Nx工作区使用Ionic 6、Capacitor 4、Angular 14开发，按以下流程调试时：

• 执行nx build my-app --configuration development构建应用
• 执行npx cap copy && npx cap sync同步到Android项目
• 在Android Studio构建并运行到USB连接的手机
• 通过chrome://inspect打开DevTools，使用ctrl+shift+f查找源码设置断点时，跳转至Babel编译后的JS文件而非TS文件，Source Maps关联异常。

排查与修复方案 #

1. 检查Nx项目的Source Map构建配置 #

打开项目的project.json或angular.json，确认development构建配置中的source map设置：

• 确保sourceMap下的scripts、styles设为true，hidden设为false（hidden: true会生成source map但不与JS文件关联，导致DevTools无法识别）
• 示例配置片段：

  "targets": {
    "build": {
      "configurations": {
        "development": {
          "sourceMap": {
            "scripts": true,
            "styles": true,
            "hidden": false,
            "vendor": true
          }
        }
      }
    }
  }
  

同时检查nx.json中的全局构建配置，确保没有强制禁用source map的设置。

2. 验证Capacitor的文件同步逻辑 #

• 执行nx build后，确认dist/apps/my-app目录下存在对应的.js.map文件
• 执行npx cap copy后，检查Android项目的android/app/src/main/assets/public目录，确认.map文件被正确复制到这里
• 核对capacitor.config.ts中的webDir配置，确保指向Nx的构建输出目录（通常为dist/apps/my-app）：

  export default defineConfig({
    appId: 'com.example.app',
    appName: 'my-app',
    webDir: 'dist/apps/my-app',
    bundledWebRuntime: false
  });
  

3. 调整Android Studio的构建模式 #

• 在Android Studio的Build Variants面板中，确保选择debug模式（release模式的代码压缩混淆会破坏source map关联）
• 打开app/build.gradle，确认debug构建类型未开启代码优化：

  buildTypes {
      debug {
          minifyEnabled false
          shrinkResources false
          proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
      }
  }
  

4. 配置Chrome DevTools的Source Map关联 #

• 打开DevTools设置（F1），在Experiments中勾选Enable JavaScript source maps和Enable CSS source maps
• 在Sources面板右键点击文件列表，选择Add folder to workspace，将本地项目的TS源码目录添加进来，让DevTools自动映射source map到本地文件
• 如果自动映射失败，可手动找到对应JS文件，右键选择Add source map，指定对应的.js.map文件路径（可指向本地构建产物中的map文件）

5. 强制开启Source Map构建 #

执行构建命令时添加--source-map=true参数，强制覆盖配置：

nx build my-app --configuration development --source-map=true

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