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

Posted 2023-02-15

【中文标题】我的 Angular 应用程序在调试时没有命中断点？

【英文标题】：My Angular application doesn't hit breakpoint when debugging?

【发布时间】：2019-10-25 09:59:39

【问题描述】：

对于带有 C# Web API 后端的 Visual Studio Code 和 Angular 应用程序来说还算新鲜。在 C# 中打断点没问题，只是在 VS Code 的 Angular 应用程序中没有打断！

我可以在浏览器中从终端运行这两个应用程序，dotnet run 和 ng serve 但是 当我点击调试按钮调试我的应用程序时，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"
    
  ]

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

已加载“/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”。跳过加载符号。该模块已优化，并启用了调试器选项“仅我的代码”。

【问题讨论】：

您乐意在 chrome 中调试吗？

好像你正在启动 dotnet 调试器

马库斯。我想我会说“是”？但是我不能在调试时在 VS Code 中单步执行来自 Angular 应用程序的打字稿代码吗？还是整个调试器部分仅用于 dotnet 的东西？也许我正在失去理智，但我认为在教程的前面部分的某个时刻，讲师从 Angular 应用程序逐步完成并在 VS Code 中打断点

code.visualstudio.com/docs/nodejs/…

阿文。是的，我已经为 Chrome 扩展安装了调试器

【参考方案1】：

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

不知何故，在更新了我的 angular-cli（到 12.2.5）和一些我无法再用“ng serve”调试的包之后。我总是有未绑定的断点。

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

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

【讨论】：

这与@Collin 解决方案一起为我工作！我不知道 defaultConfiguration 是否会破坏某些东西

@boludokid 是的，我想知道同样的事情。它会在生产中产生干扰吗？

@boludokid 我最终注释掉了“defaultConfiguration”行并运行了“ng serve --configuration=development”。我还将它映射到 package.json 脚本部分，所以现在它只是 'npm run start:dev'。

【参考方案2】：

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

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

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

【讨论】：

亲爱的柯林！我花了一个星期！在这！谢谢！度过美好的一天！

在 angular.json 中，但在哪个级别？：root？，内部架构师？或者 wut...

@zameb 它适用于架构师：构建：配置

【参考方案3】：

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

文件夹目录

launch.json 配置

【参考方案4】：

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

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

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

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

不要通过在浏览器中输入链接（http://localhost:4200/）来手动启动它

【参考方案5】：

这就是发生的事情！和.vscode文件中工程的路径有关，需要同时调试两个单独的project/s文件夹！

$workspaceFolder

我有两个应用程序文件夹

Yogabandy-SPA（Angular 应用） 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"
  

【参考方案6】：

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

我们需要对调试器进行初始配置。为此，请转到调试视图 (ctrl+shift+D) 并单击齿轮按钮以创建 launch.json 调试器配置文件。从选择环境下拉列表中选择 Chrome。这将在您项目的新 .vscode 文件夹中创建一个 launch.json 文件，其中包括启动网站的配置。

我们需要对我们的示例进行一项更改：将 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 或绿色箭头启动调试器并打开一个新的浏览器实例。设置断点的源代码在附加调试器之前在启动时运行，因此在刷新网页之前我们不会遇到断点。刷新页面，您应该会遇到断点。

【讨论】：

使用 'chrome debugger' 并将 'debugger' 放入代码中（函数，你要调试的地方），这将在没有断点的情况下命中代码。方法 () 调试器 ...

虽然这确实可行，但这不是理想的解决方案，断点应该在没有调试器语句的情况下自行运行。