VS Code 如何使用内置 JavaScript 调试器调试 Angular SPA

Question

因此，我使用 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 具有内置调试器，并且此配置的调试体验已下降。

Even though debugger stops at breakpoint, all variables are minified and mouse hoover over variables does not show anything.

Microsoft documentation does not help since it describes pure Angular project and SPA (WebApi with SPA in ClientApp folder). Also, any articles are found are related to Chrome Debug extension and not VS Code built-in JS debugger.

Anyone knows how to properly configure project for built-in debugger to work properly for ASP.NET Core Angular SPA project?

Thanks, Mario

Answer 1

我今天也玩这个。我最终要做的是单击窗口右下角的“添加配置...”按钮。我选择了“使用 ngserve 启动 Chrome”选项，它创建了我需要的配置。现在使用此配置对我有用。

需要注意的一件事......我ng s在启动调试器之前运行。由于某种原因它不会自动启动。