在 VSCode 中调试 Angular 应用程序不再起作用

Question

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

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

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

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

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

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

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

Answer 1

1. 从工作区的 .vscode 文件夹中删除任何现有的 launch.json。
2. 按 F5（在您的 vscode 工作区中）并选择“Chrome”。注意 launch.json 被重新创建。
3. 从终端启动 Angular 应用程序：“ngserve --port=8080”。等到它起来了。
4. 返回到您的 vscode 工作区。按 F5 以调试模式启动 chrome。您的应用程序应该在 Chrome 中加载。
5. 现在您可以在vscode 中的源代码中设置断点。像平常一样与您的应用程序交互。当你到达断点时，vscode 应该暂停。

Answer 2

I used to have your problems. I would struggle to find a solution and then some time later again the same thing. Always some confusing error with debugging from VS Code.

I moved to debugging my angular applications directly from browser and I am always happy. Chrome and Firefox have never disappointed me during debug.

Just keep in mind that for some strange reason webpack put all files under . source folder

Here is a picture of the structure and how you can find your files to debug directly from Chrome

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

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