VSCode调试Angular应用异常：启动后弹出空白窗口

针对调试时浏览器打开about:blank而非localhost:4200的问题，可按以下步骤排查修复：

1. 修正协议与URL配置 #

Angular默认启动HTTP服务（除非手动配置SSL），需确保launch.json的url字段和本地服务协议一致：

• 将所有url改为http://localhost:4200（去掉末尾多余斜杠，避免路径解析异常）
• 若确实启用HTTPS，需保证ng serve时添加了--ssl参数，且证书配置正常

2. 启用并配置预启动任务 #

手动执行npm start后可能存在服务未完全就绪就启动调试的情况，恢复preLaunchTask并配置任务依赖：

1. 在launch.json中取消"preLaunchTask": "npm: start"的注释
2. 新建或修改.vscode/tasks.json，添加以下配置：

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "start",
            "isBackground": true,
            "problemMatcher": {
                "owner": "typescript",
                "fileLocation": "absolute",
                "pattern": "$tsc",
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": ".*Angular Live Development Server is listening on.*",
                    "endsPattern": ".*Compiled successfully.*"
                }
            }
        }
    ]
}

该配置会让调试器等待Angular服务完全启动后再打开浏览器。

3. 修正webRoot路径 #

webRoot需指向项目根目录而非src/app，否则调试器无法正确映射源码：
将Chrome配置中的webRoot改为${workspaceFolder}，修改后配置如下：

{
    "name": "Launch Chrome",
    "type": "chrome",
    "request": "launch",
    "webRoot": "${workspaceFolder}",
    "preLaunchTask": "npm: start",
    "url": "http://localhost:4200"
}

4. 清理浏览器进程或使用独立用户目录 #

浏览器缓存或残留进程可能导致空白窗口问题：

• 关闭所有浏览器进程后重新启动调试
• 或在浏览器配置中添加独立用户目录，避免会话干扰：
  在Chrome/Edge的launch配置中加入：

  "userDataDir": "${workspaceFolder}/.vscode/browser-profile"
  

5. 检查端口占用 #

确认4200端口未被其他程序占用：

• Windows：执行命令 netstat -ano | findstr :4200，找到PID后在任务管理器中结束对应进程
• Mac/Linux：执行命令 lsof -i :4200，用 kill -9 <PID> 终止进程
  若端口被占用，可修改Angular启动端口（如ng serve --port 4201）并同步更新launch.json中的url。

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