使用“dotnet new angular”创建的 Angular 应用程序的调试在 VSCode 中不起作用答案

【问题标题】：Debugging of Angular app created with "dotnet new angular" is not working in VSCode使用“dotnet new angular”创建的 Angular 应用程序的调试在 VSCode 中不起作用
【发布时间】：2021-01-13 07:09:31
【问题描述】：

Angular 代码调试应该根据“Debugger for Chrome”VSCode 扩展的文档直接进行。

但是我不能让它工作。

我使用dotnet new angular -o Homepage 创建了一个简单的默认应用程序，它是一个 Web API + Angular ASP.NET Core 项目。

我安装了扩展并配置了launch.json来触发调试：

"configurations": [
{
   "name": "Launch Chrome",
   "request": "launch",
   "type": "chrome",
   "url": "http://localhost:5001",
   "webRoot": "${workspaceFolder}"
},
{
    "name": "Attach to Chrome",
    "port": 9222,
    "request": "attach",
    "type": "chrome",
    "webRoot": "${workspaceFolder}"
}

当使用dotnet run 命令执行时，浏览器会打开并在端口 5001 上运行应用程序。

然后在 VSCode 中，我选择了 Debug，然后选择了“启动 Chrome”选项并单击了调试按钮（绿色箭头按钮），打开了一个新的浏览器窗口，但是我在 ClientApp 的 Angular 应用程序中设置的断点没有在 VSCode 中被击中。

我还尝试使用“附加”选项进行调试，之前我为 Chrome 快捷方式添加了“chrome.exe --remote-debugging-port=9222”。像以前一样运行应用程序，然后选择“附加到 Chrome”选项进行调试并单击调试按钮。这也不起作用，没有断点被击中。

我做错了什么或者这里的诀窍是什么，为什么它不起作用？这与“Debugger for Chrome”扩展程序的文档完全一样。

谢谢。

【问题讨论】：

标签： angular debugging .net-core visual-studio-code

【解决方案1】：

以下是开始调试所需的步骤：

在VS Code 中打开ClientApp 根目录。

确保已安装 Debugger for Chrome 扩展。
运行npm run start 为应用程序提供服务。默认情况下，它将在http://localhost:4200/ 上提供。
点击F5并选择Chrome生成默认launch.json。

在launch.json 中将端口更新为4200

其内容应如下所示：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

在AppComponent 中为title 变量设置断点。
按 F5，断点应该被命中。

在您的情况下，问题可能是 Angular CLI 未提供应用程序。（ng serve 不是使用npm run start 调用的。）5001 端口上的服务器是基于.NET 的后端，Debugger for Chrome 默认无法与之配合。

另一个问题可能是 VS Code 没有从 Angular 应用程序的根目录打开。默认的launch.json 设置包含"webRoot": "${workspaceFolder}"，因此如果VS Code 例如从.NET 应用程序的根目录打开，则不会命中断点。

【讨论】：