我的Angular应用程序在调试时为什么无法触发断点？

Question

我的Angular应用程序在调试时为什么无法触发断点？

angularvisual-studio-codeasp.net-core-webapivscode-debugger

40

我对使用Visual Studio Code和带有C＃ Web API后端的Angular应用程序还比较新。在C#中没有问题，但在VS Code中的Angular应用程序中无法命中断点！

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

免责声明 - 我必须提到，我更改了很多文件名并重命名了.csproj文件，因为我想让应用程序反映我的姓名而不是教练使用的那个。在我这样做之前，我能够在Angular应用程序中设置断点并命中它们。

以下是我尝试过的方法：

重新启动VS Code
ng start, ng serve
在包含我的两个项目文件夹（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'。跳过加载符号。该模块已经过优化，并启用了调试器选项“仅我的代码”。

- user1186050

5

你乐意在谷歌浏览器中进行调试吗？ - Avin Kavish

似乎你正在启动DotNet调试器。 - Markus Dresch

Markus。我想我会说“是的”，但是当我调试时，我不能在VS Code中逐步执行Angular应用程序中的typescript代码吗？或者整个调试器部分只是针对dotnet的东西？也许我正在失去理智，但我认为在教程的早期某个时候，讲师曾经在VS Code中从Angualar应用程序中逐步执行并触发断点。 - user1186050

https://code.visualstudio.com/docs/nodejs/angular-tutorial#_debugging-angular - Avin Kavish

Avin。是的，我已经安装了Chrome扩展调试工具。 - user1186050

显示剩余6条评论

10个回答

23

如果这并没有帮助到你，我遇到了同样的问题，只是因为 angular.json 的配置不正确

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

如果没有这个配置，它会像生产环境一样处理，并且您无法在断点处停止。

- Collin

1

在 angular.json 中，但是在哪个级别？根级别？还是在 architect 内部？或者其他什么地方... - zameb

1

@zameb 它可以在 architect:build:configurations 中运行。 - Evan Sevy

12

看起来你还没有在launch.json文件中配置Chrome调试器扩展。来自vscode文档：

我们需要首先配置调试器。为此，请转到Debug视图(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 或绿色箭头启动调试器并打开新的浏览器实例。设置断点的源代码在调试器附加之前在启动时运行，因此我们直到刷新网页才能遇到断点。刷新页面，您应该会遇到断点。

- amirali

1

使用“Chrome调试器”，并在代码中（您想要调试的函数中）放置“debugger”，这将在没有断点的情况下触发代码。方法() { debugger ... } - RajuPedda

1

虽然这确实可以工作，但并不是理想的解决方案，断点应该能够在没有调试器语句的情况下自行工作。 - jbaranski

10

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

不知怎么地，更新了我的angular-cli（至12.2.5）和一些软件包后，我再也无法通过“ng serve”进行调试了。我总是遇到未绑定的断点问题。

我使用Collins Solution来解决了这个问题，并在angular.json文件的“serve”下面添加了以下内容：

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

- Tobias Streng

这个@Collin的解决方案对我有用！不过我不知道defaultConfiguration会不会出问题。 - boludo kid

@boludokid 是的，我也在想同样的问题。它会在生产环境中构建时干扰吗？ - Evan Sevy

@boludokid 我最终注释掉了 'defaultConfiguration' 行并运行了 'ng serve --configuration=development'。我还将其映射到 package.json 脚本部分，现在只需运行 'npm run start:dev' 即可。 - Evan Sevy

4

即使我的项目和文件夹在同一个目录下，也只有在 $ {workspaceFolder} 中包含 '/ src' 才能正常工作。

文件夹目录

launch.json 配置

- tiagorockman

3

如果您正在寻找一个快速解决方案，请尝试以下方法：

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

一旦“ng serve”完成并且angular服务器开始监听，请单击“开始调试”。

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

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

- jithul vinod m.k

1

我在VS Code中调试Angular时遇到了麻烦。结果发现是Node.js的问题。

如果你运行：

ng --version

看看这个：

Angular CLI: 14.2.6
Node: 18.12.1 (Unsupported)

然后您需要将Node降级到16.6.0。

这对我解决了问题。Angular 15将支持node 18.*，但Angular 14不支持。

- Norbert Norbertson

1

我搜索了好几天，终于明白了。

首先像之前的其他人一样，你要确保你已经使用'ng s'/'ng serve'命令运行了客户端，只有在这之后才能尝试运行和调试。

你还要确保调试器将监听正确的端口。不仅如此，你还要检查浏览器中的URL是否与launch.json中的URL匹配，以及它是https://还是http://。

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

这张图片向你展示了如何更改目录的cwd为客户端

如果你想看一下我的launch.json，它并没有什么特别之处，但是在这里：

我的launch.json

您可以查看此链接以获取更多信息 https://www.youtube.com/watch?v=H-sMmxfNxBMhttps://dev59.com/questions/z1MI5IYBdhLWcg3wS5rP

最后，有可能您使用的浏览器启用了CORS阻止器。您可以通过添加扩展程序并按照其教程进行开发目的来禁用它。我使用的是https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino/related?hl=en

希望这有所帮助。如果您需要更多澄清，请随时询问，我会尽力添加帮助。每当我使用新机器或培训我的初级员工时，我都会使用这个答案。我认为这也与vscode debugging主题相关。

- AbelTsh3047

0

我在Stackoverflow上找到了这个答案，可能对你也是同样的问题：

https://dev59.com/l1EG5IYBdhLWcg3wJlLh#72792138

基本上，只需使用ng serve --host=127.0.0.1运行您的应用程序，就可以神奇地进行调试。

请确保您的angular.json中的开发设置正确，您的Chrome启动设置为localhost:4200。

- Mo D Genesis

0

将angular.json文件中serve部分的配置更改为以下内容：

"configurations": {
                    "production": {
                        "browserTarget": "your-app-name:build:production",
                        "extraWebpackConfig": "webpack.prod.config.js"
                    },
                    "development": {
                        "browserTarget": "your-app-name:build:development"
                    }
                },
"defaultConfiguration": "development",

- Mahya Bagheri

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1186050 · Accepted Answer

这是出了什么问题！与.vscode文件中项目路径有关，需要同时调试两个独立的项目/文件夹！

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