我按照官方文件:https://code.visualstudio.com/docs/nodejs/angular-tutorial#_debugging-angular
- 使用
ng new my-app
创建了新的Angular应用程序。 - 已在VSCode中打开应用程序。
- 已检查应用程序是否运行:
ng serve
。一切正常。 - 已安装Chrome调试器
- 按照说明添加了launch.json配置
- 已按F5开始调试...
根据文档,它必须启动应用程序并命中我的断点。相反,我得到的是:
我不知道为什么这不起作用。请建议。谢谢。
还有,为什么我们需要这个扩展?
看起来调试模块现在内置在VSCode中,并且执行完全相同的操作:
但也不工作(这里我禁用了扩展并使用了内置调试器):
3条答案
按热度按时间qf9go6mv1#
1.从工作区的.vscode文件夹中删除任何现有的launch.json。
1.按下F5键(在vscode工作区中)并选择“Chrome”。请注意,launch.json将重新创建。
1.从终端启动Angular 应用程序:'ng serve --port= 8080'。请等待它启动。
1.返回您的vscode工作区。按F5以两柴模式启动Chrome。您的应用程序应该会载入Chrome。
1.现在,您可以在vscode**内的原始程式码中设定中断点。如往常一样与您的应用程序互动。vscode应该会在您触及中断点时暂停。
qojgxg4l2#
我曾经遇到过你的问题。我会努力找到一个解决方案,然后一段时间后再次同样的事情。总是一些混乱的错误与调试从VS代码。
我转向直接从浏览器调试我的Angular 应用程序,我总是很高兴。Chrome和Firefox在调试过程中从来没有让我失望过。
请记住,由于某些奇怪的原因,
webpack
将所有文件放在.
源文件夹下下面是一张结构图,以及如何直接从Chrome中找到要调试的文件
您也可以移动到
console
选项卡并执行所需的每个语句。此外,在代码上移动鼠标将给予变量在执行过程中的值。
0dxa2lsx3#
安装了
npm安装--全局@azure/静态Web应用程序客户端@最新
将launch.json设置为
现在去调试它