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

Posted

技术标签:

【中文标题】我的 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 runng 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' 放入代码中(函数,你要调试的地方),这将在没有断点的情况下命中代码。方法 () 调试器 ... 虽然这确实可行,但这不是理想的解决方案,断点应该在没有调试器语句的情况下自行运行。

以上是关于我的 Angular 应用程序在调试时没有命中断点?的主要内容,如果未能解决你的问题,请参考以下文章

解决VS调试时断点不会命中的问题

ASP.NET 应用程序调试:断点当前未命中

Visual Studio 远程调试中未命中断点

windbg断点命中时,其它线程在运行吗

当前不会命中断点 - 远程调试

解决VS调试时断点不会命中