Question

因此，我有一个Angular项目，并且确实希望使用VSCode和Chrome进行调试。我已经阅读了关于配置和不同调试配方的约30种不同指南和教程，并全部尝试了它们。我在这里检查了堆栈溢出的所有地方，许多帖子似乎已被弃用，并且没有提供解决方案。我想使launch配置正常工作（而不是附件）。这是我当前的launch.json：

  {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "Angular Launch",
          "url": "http://localhost:4200/#",
          "webRoot": "${workspaceFolder}",
          "sourceMaps": true,
          "sourceMapPathOverrides": {
            "./*": "${webRoot}/*",
            "src/*": "${webRoot}/*",
            "*": "*",
            "./~/*": "${webRoot}/node_modules/*"
          }
        }
      ]
    }

每当我按下运行调试时，它就会像这样永久加载，并且什么也不会发生：

我尝试更改不同的参数，已在Chrome中启用了远程调试，并使用userDir设置为true和false。我已经启动了几次，没有更改启动chrome的配置，然后调试工具栏消失了，没有日志，警告或错误。我尝试禁用除Chrome调试器插件以外的所有扩展程序。

当前版本：

Angular CLI: 6.0.7
Node: 8.11.3
OS: win32 x64
Angular: 6.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.7
@angular/cli                      6.0.7
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.7
@schematics/update                0.6.7
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.8.3

VSCode：最新

Answer 1

确保.vscode/文件夹位于根文件夹中。然后确保已安装Debugger for Chrome。使用以下配置重构您的launch.json：

{
 "name": "Angular Launch",
 "type": "chrome",
 "request": "launch",
 "url": "http://localhost:4200/",
  "webRoot": "${workspaceFolder}"   // <- make sure here you have not subfolder.
}

然后使用ng serve或npm run start之类的npm脚本启动您的角度应用程序。导航到调试器菜单并运行启动。

Answer 2

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Angular Launch",
      "type": "chrome",
      "request": "launch",
      "url": "https://localhost:4200/",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "smartStep": true,
      "internalConsoleOptions": "openOnSessionStart"
    }
  ]
}

显然，这是一个完美的答案。

VSCode调试器只是坐在那里什么也不做

2 个答案: