如何使用VS Code内置JS调试器调试ASP.NET Core Angular SPA项目

我此前一直使用Chrome调试扩展完成调试配置，所用的launch.json配置如下：

{
    "version": "0.2.0",
    "compounds": [
        {
            "name": ".Net + Browser",
            "configurations": [
                ".NET Core Launch (console)",
                "Launch Chrome"
            ]
        }
    ],
    "configurations": [
        {
            "name": ".NET Core Launch (console)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/bin/Debug/net6.0/grad-ludbreg-gis-demo.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            "console": "internalConsole"
        },
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "chrome",
            "url": "https://localhost:5001",
            "webRoot": "${workspaceRoot}/wwwroot",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "/Views": "${workspaceRoot}/Views",
                "webpack:///./src": "${workspaceRoot}/ClientApp/src"
            }
        }
    ]
}

我的tsconfig.json也已设置sourceMap: true。
该配置在使用扩展时运行正常，但VS Code推出内置调试器后，这套配置的调试体验出现下降：虽然调试器可以命中断点，但所有变量都是压缩后的状态，鼠标悬停在变量上也没有任何信息展示。
微软官方文档没有对应解决方案，仅介绍了纯Angular项目的调试方法，未覆盖WebApi + ClientApp文件夹存放SPA的场景；我找到的相关文章也都针对Chrome Debug扩展，不涉及VS Code内置JS调试器。
请问针对ASP.NET Core Angular SPA项目，如何正确配置才能让内置调试器正常运行？ #

按以下步骤调整配置即可解决问题：

1. 修改launch.json中的Chrome调试配置
   将原有Chrome配置替换为以下内容，调整webRoot指向Angular源码目录，增加源码映射解析规则：

{
    "name": "Launch Chrome",
    "request": "launch",
    "type": "chrome",
    "url": "https://localhost:5001",
    "webRoot": "${workspaceFolder}/ClientApp/src",
    "sourceMaps": true,
    "resolveSourceMapLocations": [
        "${workspaceFolder}/ClientApp/**",
        "!**/node_modules/**"
    ],
    "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///*": "*"
    }
}

2. 调整Angular开发构建配置
   打开ClientApp/angular.json，找到项目对应构建配置项，确保调试模式下开启全量源码映射：

"sourceMap": {
    "scripts": true,
    "styles": true,
    "vendor": false
}

不要使用hidden类型的sourceMap，避免源码映射关联异常。
3. 确认调试阶段禁用代码压缩
检查ClientApp/package.json中的开发启动命令，不要添加--prod、--optimization等压缩混淆参数，防止变量名被改写导致调试无法识别。
4. 调整启动顺序
调试前先启动Angular开发服务（ng serve），再启动.NET后端调试，避免加载wwwroot中旧的打包产物导致源码映射不匹配。
配置完成后重启VS Code重新启动调试即可正常查看变量值、悬停展示变量信息。 #

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