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

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 来判断真假。我已经让它启动了几次，没有更改启动 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 脚本启动您的 angular 应用程序。导航到调试器菜单并运行您的启动。

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 调试器只是坐在那里什么都不做

VSCode Debugger Just sits there and does nothing

visual-studio-code

vscode-settings

angular