Angular 19+Webpack4调试时Chrome DevTools断点异常求助

环境信息 #

• Angular版本：19.2.6
• Angular CLI：19.2.7
• Chrome版本：146.0.7680.165
• Node：20.17.0
• 操作系统：Windows 10 x64
• Webpack：4.47.0

问题现象 #

调试触发断点后出现以下异常：

• Sources面板自动聚焦main.js而非对应.ts源文件
• Scope和调用栈面板均显示“Not paused”
• 底部状态栏显示“From main.js”而非.ts文件名
• 相同配置在其他Angular 19项目中可正常工作

复现步骤 #

1. 执行ng serve启动项目
2. 打开Chrome DevTools → 切换到Sources面板
3. 在任意组件的.ts文件中设置断点
4. 触发对应组件的操作
5. 断点触发，但Sources面板未自动定位到.ts源文件

已尝试无效的方案 #

• 在angular.json中设置sourceMap: true
• 在tsconfig.json中设置inlineSources: true
• 关闭optimization和buildOptimizer
• 清理并重新安装node_modules
• 指定安装webpack@4.47.0
• 切换到Microsoft Edge浏览器，问题依旧

可行排查/解决方法 #

1. 检查DevTools的Source Map设置
   打开Chrome DevTools → 右上角齿轮图标进入设置 → 勾选Enable JavaScript source maps和Enable CSS source maps，确认后重启DevTools和项目。

2. 禁用Chrome缓存
   在DevTools的Network面板中勾选Disable cache（需保持DevTools打开状态），重新启动项目调试。

3. 完善angular.json的serve配置
   确保serve配置中sourceMap完整开启，而非仅部分开启：

   "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
       "sourceMap": {
         "scripts": true,
         "styles": true,
         "vendor": true
       },
       "optimization": false,
       "buildOptimizer": false
     }
   }
   

4. 修正tsconfig.json的sourceMap相关配置
   确保配置无冲突：

   "compilerOptions": {
     "sourceMap": true,
     "inlineSources": true,
     "inlineSourceMap": false,
     "declaration": false
   }
   

5. 重置Chrome DevTools设置
   打开DevTools设置 → 滚动到最底部 → 点击Restore defaults and reload，重置后重新调试项目。

6. 检查自定义webpack配置
   如果项目有webpack.config.js自定义配置，确认sourceMap配置未被覆盖：

   module.exports = {
     devtool: 'source-map'
   };
   

7. 对齐Angular与CLI版本
   将CLI版本降级至与Angular一致的19.2.6：

   npm install @angular/cli@19.2.6 --save-dev
   

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