Angular 11+TypeScript+VS Code无法触发断点调试，求解决步骤

• 生成launch.json配置文件
  打开VS Code，切换到「运行和调试」面板（快捷键Ctrl+Shift+D），点击面板顶部的「创建launch.json文件」，在弹出的环境选择列表里选「Chrome」（或你常用的浏览器），VS Code会自动在.vscode目录下生成基础配置文件。

• 修改launch.json适配Angular应用
  把自动生成的内容替换为以下配置，确保端口和ng serve默认的4200一致：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}/src",
        "sourceMaps": true
      }
    ]
  }
  

  核心参数说明：

  • webRoot：指向项目的src目录，保证调试器能匹配到源代码
  • sourceMaps：开启源码映射，这是断点能关联到TS代码的关键

• 以调试模式启动Angular应用
  先停掉当前的ng serve进程，再执行以下命令启动应用：

  ng serve --source-map
  

  （注：Angular CLI默认会生成源码映射，但显式添加--source-map可避免意外关闭）

• 启动VS Code调试会话
  回到「运行和调试」面板，选中配置好的「Launch Chrome against localhost」，点击绿色启动按钮（或按F5）。VS Code会自动打开Chrome加载你的应用，此时TS代码里设置的断点就能正常触发了。

• 断点仍不触发的排查点

  • 确认VS Code的「JavaScript Debugger」扩展已安装并启用
  • 检查Chrome是否开启了「禁用JavaScript」设置
  • 查看angular.json中architect.build.options.sourceMap是否设为true

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