AngularJS+Angular8混合应用在Chrome/FireFox预发/生产环境调试器失效求助

问题描述 #

我正在开发一款AngularJS与Angular 8结合的混合应用，测试时发现代码中的debugger语句在localhost环境能正常触发调试，但放到预发环境、生产环境后完全无法生效。已查阅相关资料但没找到可行方案，附上对比截图：

• localhost环境调试正常：
• 预发环境调试失效：
  求各位帮忙提供排查思路。

排查方向 #

1. 代码压缩/混淆移除了debugger #

预发、生产环境的构建流程一般会开启代码压缩、混淆和死代码消除，很多构建工具（比如Angular CLI默认的优化器）会直接把debugger这类调试语句删掉，或者把变量名混淆到无法对应源码。

• 打开angular.json查看生产/预发环境的构建配置，检查optimization、buildOptimizer、minify这些选项是否开启；
• 临时关闭预发环境的代码压缩（仅用于调试），重新部署后验证debugger是否生效。

2. Source Map未正确生成 #

本地环境默认会生成完整的Source Map，能把压缩后的代码映射回原始源码，但预发/生产环境可能关闭了Source Map，或者生成的是简化版。

• 检查angular.json里对应环境的sourceMap配置，生产环境默认值为false，改成true后重新构建部署；
• 注意：生产环境开启完整Source Map存在源码泄露风险，调试完成后建议改回，或仅在内部预发环境临时开启。

3. AngularJS代码的打包配置问题 #

混合应用中AngularJS部分可能用单独工具（比如gulp、grunt）打包，这些工具在生产构建时可能配置了移除debugger的选项。

• 检查AngularJS代码的构建脚本，比如gulp-uglify是否开启了drop_debugger这类参数，临时关闭后再测试。

4. 浏览器调试工具设置问题 #

有些浏览器加载生产环境代码时，会自动忽略debugger语句，或者不小心开启了调试限制：

• 打开开发者工具，确认「Disable JavaScript」未勾选；
• 在Sources面板中，检查是否勾选了「Skip library code」，勾选后可能会跳过混合应用中的部分代码；
• 尝试直接在Sources面板手动添加断点，不依赖代码中的debugger语句，验证是否能触发调试。

5. 环境条件判断移除了debugger #

代码中可能存在环境判断逻辑，仅在开发环境保留debugger：

if (!environment.production) {
  debugger;
}

检查代码中是否有类似逻辑，确认预发/生产环境下debugger是否被条件注释或移除。

6. 缓存导致加载旧代码 #

预发、生产环境可能存在浏览器缓存或CDN缓存，修改后的代码未生效，加载的仍是未包含debugger的旧版本：

• 强制刷新浏览器（Ctrl+Shift+R），或清除浏览器缓存后重试；
• 若使用CDN，联系运维清除对应缓存后重新测试。

内容的提问来源于stack exchange，提问作者Mohit Kumar Sharma