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

flvlnr44  于 2022-11-30  发布在  Vscode
关注(0)|答案(3)|浏览(374)

我按照官方文件:https://code.visualstudio.com/docs/nodejs/angular-tutorial#_debugging-angular

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

根据文档,它必须启动应用程序并命中我的断点。相反,我得到的是:

我不知道为什么这不起作用。请建议。谢谢。

还有,为什么我们需要这个扩展?
看起来调试模块现在内置在VSCode中,并且执行完全相同的操作:

但也不工作(这里我禁用了扩展并使用了内置调试器):

qf9go6mv

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应该会在您触及中断点时暂停。

qojgxg4l

qojgxg4l2#

我曾经遇到过你的问题。我会努力找到一个解决方案,然后一段时间后再次同样的事情。总是一些混乱的错误与调试从VS代码。
我转向直接从浏览器调试我的Angular 应用程序,我总是很高兴。Chrome和Firefox在调试过程中从来没有让我失望过。
请记住,由于某些奇怪的原因,webpack将所有文件放在.源文件夹下
下面是一张结构图,以及如何直接从Chrome中找到要调试的文件

您也可以移动到console选项卡并执行所需的每个语句。
此外,在代码上移动鼠标将给予变量在执行过程中的值。

0dxa2lsx

0dxa2lsx3#

安装了
npm安装--全局@azure/静态Web应用程序客户端@最新
将launch.json设置为

{
linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "SWA: Run Angular",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:4280",
            "preLaunchTask": "swa: start Angular",
            "webRoot": "${workspaceFolder}/",
            "timeout": 30000
        }
    ]
}

现在去调试它

相关问题