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

【问题标题】：VS Code how to debug Angular SPA with built-in JavaScript debuggerVS Code 如何使用内置 JavaScript 调试器调试 Angular SPA
【发布时间】：2021-11-03 07:12:04
【问题描述】：

所以，我已经使用 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 具有内置调试器，并且此配置降低了调试体验。

即使调试器在断点处停止，所有变量都会被缩小，并且鼠标悬停在变量上不会显示任何内容。

Microsoft 文档没有帮助，因为它描述了纯 Angular 项目和 SPA（ClientApp 文件夹中带有 SPA 的 WebApi）。另外，发现任何文章都与 Chrome Debug 扩展有关，而不是 VS Code 内置的 JS 调试器。

任何人都知道如何正确配置项目以使内置调试器正常工作于 ASP.NET Core Angular SPA 项目？

谢谢，马里奥

【问题讨论】：

你能在哪里得到它的工作？我正在为我的 Angular 应用程序尝试内置 Javascript 调试器，但无法对其进行调试。
@Tashi 不，它的工作原理大致相同 - 调试器确实在断点处停止，但所有变量都被缩小了，所以我只是处理降级的调试器体验。不过，他们确实修复了鼠标悬停在变量上，所以它更容易一些。

标签： angular visual-studio-code single-page-application vscode-debugger

【解决方案1】：

我今天也在玩这个。我最终做的是单击窗口右下角的 Add Configuration... 按钮。我选择了“使用 ng serve 启动 Chrome”选项，它创建了我需要的配置。它现在适用于这种配置。

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

【讨论】：

我没有看到“使用 ng serve 启动 Chrome”选项，我只有“启动 Chrome”...您之前是否安装了某些东西以获得此选项？
首先，确保您使用的是最新版本的 VsCode。然后删除 Chrome 调试器扩展并丢弃（或重命名）旧的 launch.json。然后尝试添加新配置。重新开始可能会有所作为。
做到了，只有“Chrome Launch”和“Chrome Attach”，没有提到“Launch Chrome with ng serve”。
我不确定为什么这不起作用。这是我的配置 - 试试看它是否适合你。抱歉，显然我不知道如何在 cmets 中执行代码块。 :-( "configurations": [ { "name": "Launch Chrome w/ ng serve", "type": "chrome", "request": "launch", "url": "http://localhost:4200", "webRoot": "${workspaceRoot}", "sourceMapPathOverrides": { "webRoot": "${workspaceRoot}", "webpack:/*": "${workspaceRoot}/*" } }