我的 Angular 应用程序在调试时没有命中断点？

Question

有点新 Visual Studio 代码和 Angular 具有 C# Web API 后端的应用程序。在 C# 中设置断点没问题，只是在 VS Code 的 Angular 应用程序中没有设置断点！

我可以运行这两个应用程序在浏览器中都很好，从终端， dotnet run 和 ng serve BUT 当我点击调试按钮调试我的应用程序，Angular 断点从红色变为空心灰色！

免责声明 - 我不得不提到我更改了很多文件名并重命名了 .csproj 文件，因为我希望应用程序反映我的名字而不是讲师的名字用过的。在我这样做之前，我能够在 Angular 应用程序中设置断点并命中它们。

这是我试过的方法。

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

在文件中：

error.interceptor.ts

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

throw new Exception("Some login error");

在我的登录方法中。

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

这里是我设置断点的地方

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

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

这是我的 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}"
    }
  ]
}

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

Loaded '/usr/local/share/dotnet/shared/Microsoft.NETCore.App/2.2.4/System.Threading.dll'. The module was built without symbols. Loaded '/usr/local/share/dotnet/shared/Microsoft.NETCore.App/2.2.4/System.IO.FileSystem.Watcher.dll'. Skipped loading symbols. The module is optimized and the debugger option 'Just My Code' is enabled.

Answer 1

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

We need to initially configure the debugger. To do so, go to the Debug view (ctrl+shift+D) and click on the gear button to create a launch.json debugger configuration file. Choose Chrome from the Select Environment drop-down list. This will create a launch.json file in a new .vscode folder in your project which includes a configuration to launch the website.

We need to make one change for our example: change the port of the url from 8080 to 4200. Your launch.json should look like this:

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

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

Answer 2

事情是这样的！这与.vscode文件中的项目路径有关，并且需要同时调试两个单独的project/s文件夹！

${workspaceFolder}

我有两个应用文件夹

Yogabandy-SPA（Angular 应用程序）
Yogabandy.API (ASP.Net 核心网站 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

任何正在寻找快速修复的人试试这个：

确保您在 Launch.json 设置中的端口号与您在“ng serve”命令后获得的端口号相同。通常它是“4200”并尝试在 Launch.json.

中包含启动和附加设置

一旦“ng serve”完成并且angular服务器开始监听尝试点击“开始调试”

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

不要通过在浏览器中输入 link(http://localhost:4200/) 手动启动它

Answer 4

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

文件夹目录

launch.json配置

Answer 5

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

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

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

Answer 6

我也搜索了几个小时...

更新我的 angular-cli（至 12.2.5）和一些包后，我无法再使用“ng serve”进行调试。我总是有未绑定的断点。

我使用修复了它，并在“服务”下添加了以下内容：在 angular.json 中：

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

Answer 7

我搜索了好几天，终于明白了。首先和我之前的其他人一样，你要确保你已经运行与客户'ng s'/'ng serve'，只有在 之后，您才应该尝试运行和调试。

您还想确保调试器将侦听正确的端口。不仅如此，您还想检查浏览器中的 url 是否与启动 json 中的 url 匹配，如果它是 https:// 或只是 http://

接下来您要确保您位于正确的 webroot 目录中，以便调试器知道在哪里检查您的 angular 客户端。所以就像@tiagorockman 经历的那样，你需要让 webroot 导航到客户端文件夹本身。如果你的 .vscode 文件夹中有一个 task.json，那么你可能想像这样做同样的事情

This image shows you where to change the cwd for the directory to the client

如果你想看看我的 launch.json，它没什么特别的，但就在这里。 enter image description here

您可以查看此 link 了解更多信息 https://www.youtube.com/watch?v=H-sMmxfNxBM

最后，您使用的浏览器可能启用了 CORS 拦截器。您只能通过添加扩展并遵循他们的教程来出于开发目的禁用此功能。我用的是https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino/related?hl=en

希望对您有所帮助。随时询问您是否需要更多说明，我可以看到我可以添加哪些帮助。

我的 Angular 应用程序在调试时没有命中断点？

My Angular application doesn't hit breakpoint when debugging?

visual-studio-code

asp.net-core-webapi

angular

vscode-debugger