VSCode Debugger Just sits there and does nothing

Question

So I have an Angular project and really want to get the debugging working with VSCode and Chrome. I have already read about 30 different guides and tutorials on configs and different debug recipes and tried them all. I checked everywhere here on stack overflow and a lot of the posts seem to be deprecated and offer no solution. I want to get the launch config working (not the attach). Here is my current 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/*"
          }
        }
      ]
    }

Whenever I press run debug, it just loads forever like so and nothing ever happens:

I have tried changing around the different parameters, I have enabled remote debugging in Chrome, used userDir to true and false. I've gotten it to launch a couple times, with no change to the config which launches chrome, then the debug toolbar disappears with no logs, warnings, or errors. I have tried disabling all extensions except for the Chrome Debugger plugin.

Current versions:

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: Latest

billyjov billyjov · Accepted Answer · 2018-12-11T00:44:29

Ensure that your .vscode/ folder is in your root folder. Then make sure you have the Debugger for Chrome installed. Refactor your launch.json using this config:

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

then start your angular app using ng serve or npm scripts like npm run start. Navigate to the debugger menu and run your launch.

VSCode Debugger Just sits there and does nothing

2 Answers