调试时我的Angular应用程序没有达到断点吗？

带有C＃Web API后端的Visual Studio Code和Angular应用程序的新增功能。在C＃中达到断点没问题，只是在VS Code中没有在Angular应用中达到断点！

当我按下调试按钮调试我的应用程序时，我可以在浏览器中，从终端，使用dotnet run和ng serve 但是运行两个应用程序，Angular断点从红色变为空心灰色！

免责声明 -我不得不提到我更改了许多文件名并将其重命名为.csproj文件，因为我希望该应用程序反映我的名字，而不是教师使用的名字。在执行此操作之前，我可以设置断点并在Angular应用中命中它们。

这是我尝试过的。

重新启动VS Code

开始，服务

在包含我的两个项目文件夹（Ng，.Net）的同一文件夹级别中生成了一个新的launch.json文件（由VS Code自动生成）

删除了我的工作区文件（似乎无法生成一个新的文件，不确定是否需要）

在文件中：

错误拦截器

我试图通过说测试此异常处理：

throw new Exception("Some login error");

在我的登录方法中。

我可以设置一个如下所示的断点，但是当我单击“调试”时，它会变成一个灰色圆圈，并且不会被击中。

这是我设置断点的地方

这是运行调试器时看到的，红色圆圈变成灰色和空心。我希望能够在调试时逐步通过此错误拦截器，这可能吗？

然后在我的角度应用程序的登录方法中，我的断点变成灰色

这是我的launch.json文件

throw new Exception("Some login error");

另外-运行调试控制台时，我会看到很多这样的行。不知道这是否正常吗？

加载了'/usr/local/share/dotnet/shared/Microsoft.NETCore.App/2.2.4/System.Threading.dll'。该模块的构建没有符号。已加载'/usr/local/share/dotnet/shared/Microsoft.NETCore.App/2.2.4/System.IO.FileSystem.Watcher.dll'。跳过的加载符号。模块已优化，调试器选项“ Just My Code”已启用。

amirali.. 5

似乎您尚未在launch.json文件中配置chrome调试器扩展。来自vscode文档：

我们首先需要配置调试器。为此，请转到“调试”视图（ctrl+ shift+ D），然后单击齿轮按钮以创建launch.json调试器配置文件。从“选择环境”下拉列表中选择“ Chrome”。这将在项目launch.json的新.vscode文件夹中创建一个文件，其中包括启动网站的配置。

我们需要对示例进行更改：将url的端口从8080更改为4200。您launch.json应该看起来像这样：

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

按F5或绿色箭头启动调试器并打开一个新的浏览器实例。设置断点的源代码在连接调试器之前在启动时运行，因此在刷新网页之前，我们不会遇到断点。刷新页面，您应该点击断点。

似乎您尚未在launch.json文件中配置chrome调试器扩展。来自vscode文档：

我们首先需要配置调试器。为此，请转到“调试”视图（ctrl+ shift+ D），然后单击齿轮按钮以创建launch.json调试器配置文件。从“选择环境”下拉列表中选择“ Chrome”。这将在项目launch.json的新.vscode文件夹中创建一个文件，其中包括启动网站的配置。

我们需要对示例进行更改：将url的端口从8080更改为4200。您launch.json应该看起来像这样：

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

按F5或绿色箭头启动调试器并打开一个新的浏览器实例。设置断点的源代码在连接调试器之前在启动时运行，因此在刷新网页之前，我们不会遇到断点。刷新页面，您应该点击断点。

Here's what was going on! It has to do with the path to the project in the .vscode file and the need to debug two separate project/s folders at one time!

${workspaceFolder}

I have two folders for the app

Yogabandy-SPA (Angular app)

Yogabandy.API (ASP.Net Core Web API)

I thought the best place for the .vscode file was at the root level, and unless someone has a better solution this seems to be the best place.

But the problem is the path of the workspace folder needed to be corrected.

Corrected paths

"webRoot": "${workspaceFolder}" // old
"webRoot": "${workspaceFolder}/Yogabandy-SPA" // new
"program": "${workspaceFolder}/bin/Debug/netcoreapp2.2/Yogabandy.API.dll" // old
"program": "${workspaceFolder}/Yogabandy.API/bin/Debug/netcoreapp2.2/Yogabandy.API.dll" // new