VS Code 1.60.0调试Angular项目无响应 断点未绑定无法触发求助

一、核心问题说明 #

• 配置冗余冲突：你同时配置了3个Chrome调试任务，且混用了已废弃的类型标识，重复启动会导致会话冲突，弹出「旧调试会话浏览器仍在运行」的报错。
• 操作逻辑错误：不需要同时执行Launch和Attach两个操作，二选一即可，同时操作会导致调试会话抢占端口，出现Attach启动后立刻断开的问题。
• 9222端口是Chrome默认远程调试端口，生效前提是Chrome启动时开启了远程调试参数，否则Attach配置会无法连接直接断开。
• 路径映射不匹配：你的ng serve配置的sourceMapPathOverrides规则不适用于新版Angular CLI生成的源码映射，会导致断点无法绑定。
• 额外检查项：确认angular.json中build配置下的sourceMap参数为true，生产构建默认关闭源码映射会直接导致断点失效。

二、修正后的launch.json配置 #

删除原有冗余的三个配置，替换为下方配置即可：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "ng serve 调试",
            "type": "chrome",
            "request": "launch",
            "preLaunchTask": "npm: start",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}/src",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/*"
            }
        }
    ]
}

三、正确调试步骤 #

1. 完全关闭所有已打开的Chrome进程，避免残留会话占用端口。
2. 不需要手动执行ng serve命令，直接在VS Code调试下拉菜单选中上面的ng serve 调试配置，点击绿色启动按钮即可。
3. 等待自动启动Chrome加载应用，设置的断点会自动绑定触发。
4. 如果你要使用Attach模式调试，需要先给Chrome添加启动参数--remote-debugging-port=9222，启动Chrome访问http://localhost:4200之后，再运行Attach配置即可。

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