Question

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

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

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

这是我尝试过的。

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

在文件中：

error.interceptor.ts

我正在尝试通过以下方式测试此异常处理：

throw new Exception("Some login error");

使用我的登录方法。

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

在这里设置断点

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

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

这是我的launch.json文件

{
  // Use IntelliSense to find out which attributes exist for C# debugging
  // Use hover for the description of the existing attributes
  // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
  "version": "0.2.0",
  "configurations": [

    {
      "name": ".NET Core Launch (web)",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      // If you have changed target frameworks, make sure to update the program path.
      "program": "${workspaceFolder}/Yogabandy.API/bin/Debug/netcoreapp2.2/Yogabandy.API.dll",
      "args": [],
      "cwd": "${workspaceFolder}/Yogabandy.API",
      "stopAtEntry": false,
      "launchBrowser": {
        "enabled": true
      },
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "sourceFileMap": {
        "/Views": "${workspaceFolder}/Views"
      }
    },
    {
      "name": ".NET Core Attach",
      "type": "coreclr",
      "request": "attach",
      "processId": "${command:pickProcess}"
    }
  ]
}

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

已加载“ /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

似乎您没有在launch.json文件中配置chrome调试器扩展。来自vscode documentation：

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

我们需要对示例进行一次更改：将网址的端口从 8080 更改为 4200 。您的.vscode应该如下所示：

launch.json

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

Answer 2

这是怎么回事！它与.vscode文件中项目的路径以及一次调试两个单独的project / s文件夹有关！

$ {workspaceFolder}

我有两个用于该应用程序的文件夹

Yogabandy-SPA（角度应用程序）
Yogabandy.API（ASP.Net Core Web API）

我认为.vscode文件的最佳位置是根目录，除非有人有更好的解决方案，否则这似乎是最佳位置。

但是问题是工作空间文件夹的路径需要更正。

正确的路径

"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+)"
},

添加了一个化合物，以便我可以一起调试两个项目。

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

启动调试器时我仍然遇到一个小问题。 VS Code在下面显示了这一点，但是我现在能够一起调试这两个应用程序，并击中这两个项目的所有断点。

如果有人有更好的解决方案，请告诉我。

"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"
  }

Answer 3

我的，即使与项目位于同一文件夹中，也只能通过在$ {workspaceFolder}中包含'/ src'来工作。

文件夹目录

launch.json配置

Answer 4

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

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

没有这个配置，它就像生产一样处理，你不能在断点处停止。

Answer 5

任何寻求快速修复的人都可以尝试以下方法：

确保您在Launch.json设置中的端口号与在“ ng serve”命令之后获得的端口号相同。通常是“ 4200”，并尝试在Launch.json中同时包含启动和附加设置。

“ ng服务”完成后，角度服务器开始监听，尝试单击“开始调试”

然后调试器将在4200上启动一个chrome实例，然后您将看到断点将被绑定。

请勿通过在浏览器中键入链接（http：// localhost：4200 /）手动启动它

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

5 个答案: