如何在WebStorm中调试Angular 17/18应用？调试失败求助

问题描述 #

我在调试Angular应用时遇到了问题：

• 按照JetBrains的调试指南操作后，WebStorm的调试功能仍无法正常运行
• 已能通过Google Chrome直接调试，但希望全程使用WebStorm完成调试操作
• 我已在代码中调用了debugger语句，能看到Chrome的调试器在运行，但WebStorm无法触发断点或进行调试控制

排查与解决步骤 #

• 核对调试配置
  打开Run > Edit Configurations，选择Angular类型配置：
  • 确认npm script选择的是正确的应用启动命令（通常为start）
  • 确保配置中指定的端口与应用实际启动端口完全一致
• 检查调试连接
  • 查看WebStorm内置调试端口是否被占用（路径：Settings > Build, Execution, Deployment > Debugger > Built-in Server），必要时更换端口
  • 必须通过WebStorm的调试按钮启动应用，而非直接用Chrome打开应用
• 排除外部干扰
  • 禁用Chrome中所有第三方调试类扩展，避免干扰WebStorm的调试通信
  • 关闭Chrome DevTools后，重新通过WebStorm启动调试
• 代码与版本验证
  • 确认debugger语句位于会被执行的代码逻辑中（如组件的ngOnInit方法、用户交互回调等）
  • 将WebStorm升级至最新稳定版，同时确保Angular CLI版本与IDE兼容

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