angular - 在 VSCode 中调试 Angular 应用程序再次无法正常工作

Question

我遵循了官方文档： https ://code.visualstudio.com/docs/nodejs/angular-tutorial#_debugging-angular

• 使用ng new my-app.
• 在 VSCode 中打开应用程序。
• 检查应用程序是否运行：ng serve. 都好。
• 已安装的 Chrome 调试器
• 按照说明添加了launch.json配置
• 按 F5 开始调试...

根据文档，它必须启动应用程序并达到我的断点。相反，我得到了这个：

我不知道为什么这不起作用。请指教。谢谢。

另外，为什么我们需要这个扩展？

看起来调试模块现在内置在 VSCode 中，并且完全相同：

但也不起作用（这里我禁用了扩展并使用了内置调试器）：

标签： angulardebuggingvisual-studio-code

Answer 1

我曾经有你的问题。我会努力寻找解决方案，然后再过一段时间再做同样的事情。从 VS Code 调试时总是出现一些令人困惑的错误。

我开始直接从浏览器调试我的 Angular 应用程序，我总是很高兴。Chrome 和 Firefox 在调试过程中从未让我失望过。

请记住，出于某种奇怪的原因，webpack将所有文件放在.源文件夹下

这是结构的图片以及如何直接从 Chrome 中找到要调试的文件

您还可以移动到console选项卡并执行您想要的每个语句。

此外，在代码上移动鼠标将为您提供变量在执行期间保持的值。