我的 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 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' 放入代码中(函数,你要调试的地方),这将在没有断点的情况下命中代码。方法 () 调试器 ... 虽然这确实可行,但这不是理想的解决方案,断点应该在没有调试器语句的情况下自行运行。以上是关于我的 Angular 应用程序在调试时没有命中断点?的主要内容,如果未能解决你的问题,请参考以下文章