Angular(Nx)项目调试时如何查看TypeScript哈希命名私有成员？

问题场景 #

在Nx管理的Angular项目中切换至哈希命名的私有字段/方法后，调试时Chrome DevTools及VSCode附加Chrome调试均无法查看这些私有字段，控制台报错：

Uncaught Error: Cannot read private member #bar from an object whose class did not declare it
at eval (repl:1:9)

按MDN说明，Chrome控制台本应支持类外部访问私有属性，但仅在简化测试示例中可行，推测问题源于TypeScript编译或Angular构建流程。

解决方法 #

1. 修正TypeScript编译配置 #

修改tsconfig.json的编译选项，确保原生ES私有字段特性不被编译破坏：

• 将target设为ES2022或更高版本（哈希私有字段属于ES2022特性）
• 禁用useDefineForClassFields，避免该选项干扰私有字段的调试访问逻辑
• 开启downlevelIteration，防止编译降级破坏私有字段结构
• 确保sourceMap设为true，保证源码与编译后代码的映射关系

关键配置示例：

{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": false,
    "downlevelIteration": true,
    "sourceMap": true
  }
}

2. 关闭调试模式下的构建优化 #

在angular.json或Nx项目配置中，确保开发构建时不启用代码压缩与优化：

• 关闭optimization和buildOptimizer，避免私有字段被重命名或移除
• 保留sourceMap配置，确保调试时能映射到原始源码

示例配置片段：

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "configurations": {
            "development": {
              "optimization": false,
              "buildOptimizer": false,
              "sourceMap": true
            }
          }
        }
      }
    }
  }
}

3. DevTools与VSCode调试技巧 #

• Chrome DevTools：在Sources面板找到未编译的源文件，在类定义处打断点，暂停时可在Scope面板的[[PrivateFields]]节点查看所有哈希私有字段，无需通过控制台直接访问
• VSCode调试：确保launch.json中sourceMaps设为true，断点暂停后在Variables面板中展开对象，即可看到目标私有字段

核心原理 #

问题本质是Angular/TypeScript的编译优化将原生哈希私有字段转换为非原生实现，导致浏览器无法识别并允许调试访问。通过调整配置保留原生ES2022私有字段语法，即可让DevTools正常识别并展示这些字段。

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