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

Question

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

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

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

这是我尝试过的。

1. 重新启动VS Code
2. 开始，服务
3. 在包含我的两个项目文件夹（Ng，.Net）的同一文件夹级别中生成了一个新的launch.json文件（由VS Code自动生成）
4. 删除了我的工作区文件（似乎无法生成一个新的文件，不确定是否需要）

在文件中：

错误拦截器

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

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”已启用。

Answer 1

以防万一这没有帮助，我遇到了同样的问题，只是因为错误的 angular.json 配置

"development": {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }

如果没有此配置，它将像生产一样处理，并且您无法在断点处停止。

Answer 2

我也找了几个小时...

不知何故，在更新我的 angular-cli （到 12.2.5）和一些软件包后，我无法再使用“ngserve”进行调试。我总是有不受限制的断点。

我使用柯林斯解决方案修复了它，并在 angular.json 中的“serve”下添加了以下内容：

"configurations": {
   "development": {
      "browserTarget": "<YOURAPPNAME>:build:development"
   }
},
"defaultConfiguration": "development"

Answer 3

似乎您尚未在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或绿色箭头启动调试器并打开一个新的浏览器实例。设置断点的源代码在连接调试器之前在启动时运行，因此在刷新网页之前，我们不会遇到断点。刷新页面，您应该点击断点。

Answer 4

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

1. Yogabandy-SPA (Angular app)
2. 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

// removed from the 'server' command so two debuggers don't open, just one
"serverReadyAction": {
  "action": "openExternally",
  "pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"
},

Added a compound so that I could debug both projects together.

"compounds": [{
  "name": "Server/Client",
  "configurations": ["server", "client"]
}]

I'm still having a minor issue starting the debugger. VS Code displays this below, but I am able to now debug both apps together and hit all breakpoints from both projects.

If anyone has a better solution please let me know.

"compounds": [{
  "name": "Server/Client",
  "configurations": ["server", "client"]
}],
"configurations": [{
    "name": "server",
    "type": "coreclr",
    "request": "launch",
    "preLaunchTask": "build",
    "program": "${workspaceFolder}/Yogabandy.API/bin/Debug/netcoreapp2.2/Yogabandy.API.dll",
    "args": [],
    "cwd": "${workspaceFolder}/Yogabandy.API",
    "stopAtEntry": false,
    "env": {
      "ASPNETCORE_ENVIRONMENT": "Development"
    },
    "sourceFileMap": {
      "/Views": "${workspaceFolder}/Views"
    }
  },
  {
    "type": "chrome",
    "request": "launch",
    "name": "client",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}/Yogabandy-SPA"
  }