不使用ng serve部署的Angular应用无法用Angular DevTools调试如何解决

Angular DevTools 判断应用是否处于可调试的开发模式，并不只依赖 enableProdMode() 调用结果，还依赖 Angular 构建时保留的调试元数据、未被压缩裁剪的运行时代码。你虽然禁用了生产模式调用，但如果使用了生产环境配置打包，构建工具会自动摇树掉调试相关代码、移除组件元数据、混淆代码，就会触发 DevTools 的生产模式提示。

• 使用开发配置构建 Angular 包
  不要使用默认的生产配置打包，执行构建命令时指定开发配置：
  ng build --configuration development
  同时确认 angular.json 中 development 配置项满足以下要求：
  • optimization: false 关闭代码优化、压缩、混淆逻辑
  • sourceMap: true 生成源码映射文件
  • buildOptimizer: false 关闭构建优化器
  • aot 配置下额外添加 debug: true ，保留 AOT 模式下的调试元数据
    构建完成后将 dist 目录下的产物直接复制到 TomEE 的静态资源部署目录即可，无需使用 ng serve 启动。
• 校验环境配置与服务端处理
  • 确认打包时没有误加载生产环境配置，检查 environment.ts 中 production 属性为 false，没有其他代码逻辑隐式调用 enableProdMode()
  • 检查 TomEE 服务端配置，确认没有对部署的 Angular JS 文件做额外的压缩、混淆、资源裁剪操作，避免破坏调试元数据
• 清理缓存重试
  打开浏览器控制台，开启「禁用缓存」选项后强刷页面，避免浏览器加载旧的缓存资源导致判定异常。

• 原生浏览器 DevTools 调试
  开发模式下 Angular 暴露了全局调试 API，在浏览器控制台可以直接调用：
  • 选中页面上任意 Angular 组件对应的 DOM 元素，执行 ng.getComponent($0) 即可获取对应组件实例，直接查看、修改组件属性，调用组件方法
  • 执行 ng.getDirectives($0) 可获取元素上绑定的所有指令实例
  • 配合开启的 sourceMap ，可以在 Sources 面板直接找到 .ts 源码文件打断点调试逻辑
• 日志调试
  在业务代码中插入 console.log、console.table、console.dir 打印组件状态、服务响应、数据流变化，也可以通过 DebugElement 主动获取组件的输入、输出属性用于调试。
• 状态管理工具调试
  如果项目使用了 NgRx、Ngxs 等状态管理库，可直接使用对应库自带的 DevTools 插件，实现状态变更跟踪、时间旅行调试，不依赖 Angular DevTools 也能完成全局状态调试。
• 测试链路调试
  单元测试阶段可以在 Jasmine/Karma 运行时打断点调试单组件、单服务的逻辑；端到端测试阶段可以通过 Cypress、Playwright 工具逐步调试页面交互流程，复现问题场景。

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