Debug with Visual Studio Code not working

Question

I'd like to be able to debug an Angular2 application with Visual Studio Code.

Here's my environment:

OS: Ubuntu 16.10 x64
Browser: Chromium 53.0.2785.143
Node: 6.8.0
Angular-cli: 1.0.0-beta.19-3

Creating a new project with angular-cli :

ng new test-VSC-debug
cd test-VSC-debug

Then I open VSC and load the project : File/open folder

I click on the debug logo and I configure launch.json by selecting chrome. It generates the following file :

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

Then I just start the angular2 project by running :

ng serve

Once it has started, in VSC I select : "Launch Chrome against localhost, with sourcemaps".

Then, I get the following error :
"Can't find chrome : Install it or set the runtimeExecutable field in the launch config."

So I set :
"runtimeExecutable": "chromium-browser"
(as I do not have chrome but chromium on my Ubuntu).

Angular-cli default port to launch the app is 4200. Change url from : "http://localhost:8080" to "http://localhost:4200".

Now the browser is opening the app but VSC has the following error: "Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONREFUSED 127.0.0.1:9222".

From other answers found on stackoverflow/github issues, I've read that I might have to kill all chrome instances before trying to do that, so I just close chromium and run killall chromium-browser.

I try to run the debug again : Same error as before (cannot connect).

I've also seen that the following arguments might help :

"runtimeArgs": [
  "--remote-debugging-port=9222",
  "--user-data-dir"
]

But it does not change anything.

I decided to use VSC for my typescript devs (mostly angular2) and this way of debugging seems very powerful. I have the feeling that it'd be too bad not to use it :).

Thanks for any help !

PS: Some related stackoverflow questions and github issues :
- Debug & Run Angular2 Typescript with Visual Studio Code?
- https://github.com/angular/angular-cli/issues/2453
- https://github.com/angular/angular-cli/issues/1936
- https://github.com/angular/angular-cli/issues/1281

EDIT 1: !!! Partial improvement !!! I found a way to have debug info within Visual Studio Code console ! So it's not perfect yet as breakpoints doesn't work but here's the thing. So far, if I opened http://localhost:9222 I was not able to see anything. ("localhost doesn't authorized the connection").

BUT, if I launch chromium like that :

chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

The important thing is to notice that argument : --user-data-dir=remote-profile. If you just pass --user-data-dir it launches a new window with no one connected. But it's not enough. You need to pass remote-profile as value.

it opens a new browser window
I open http://localhost:4200 AND I can also reach http://localhost:9222 !
I'm able to connect VSC with "Attach to chrome with source map" option ! (as you can see, I do have the "Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode." displayed in console and the footer now has an orange background)

So far, I hope it can help some people. But the problem now is that breakpoints are not working.

I keep digging and 'll make another edit if I found why.

Working with Angular 2.4.8 http://stackoverflow.com/questions/42495655/how-to-debug-angular-with-vscode — Asesjix, Feb 27 '17 at 21:31

score 23 · Accepted Answer · edited Oct 15 '20 at 00:54

I was able to solve this problem on OSX. The reason it's such a pain is there are multiple things causing the issue.

You hit on the first with --user-data-dir=remote-profile: If you're already running Chrome (for example, already have tabs open - who doesn't?), you have to use a different userDataDir to have Chrome launch an independent instance.
The correct way to do this, however, is to add "userDataDir": "${workspaceRoot}/.vscode/chrome", to your launch.json configuration (see below). This needs to be a path. If 'remote-profile' is used it attempts to find a relative directory named 'remote-profile'.
You need to set sourceMapPathOverrides in your launch.json config, the value of which depends on your OS:
OSX: "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
Windows: "sourceMapPathOverrides": { "webpack:///C:*":"C:/*" }
Linux: "sourceMapPathOverrides": { "webpack:///*": "/*" }
(Note: I have not tested the Windows or Linux versions)

Here is my working launch.json on OSX:

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            // This forces chrome to run a brand new instance, allowing existing
            // chrome windows to stay open.
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            //"diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "url": "http://localhost:4200",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        }
    ]
}

For this to work, run ng serve in a terminal, then hit F5 inside of Visual Studio Code.

Here are the versions I'm working with:

angular-cli: 1.0.0-beta.24
node: 7.3.0
Chrome: 55.0.2883.95
Visual Studio Code: 1.8.1
VSCode Extension "Debugger for Chrome" msjsdiag.debugger-for-chrome: 2.4.2

@fuzz Do you have the extension [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) installed? — Aaron F., Mar 17 '17 at 17:41
Thank you so much for providing the `launch.json` file. It works perfectly! — gotnull, Mar 20 '17 at 04:38

score 17 · Answer 2 · edited Oct 15 '20 at 00:50

I finally get it fully working!

For those interested:

(using chromium-browser on Linux but you can easily just replace by "chrome").

First, here's the launch.json config:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src",
            "url": "http://localhost:4200/",
            "sourceMapPathOverrides": {
              "webpack:///*": "/*"
            }
        }
    ]
}

I decided to remove the part with "request": "launch" as I need to launch a new browser window.

Then, launch the browser like that:

chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

In the new window, access to http://localhost:4200.

Then from VSC, run the debug.

Everything should work just fine and you should be able to use breakpoints :)

GIF available here to see it in action: http://hpics.li/0156b80

Just a note for Windows users: `sourceMapPathOverrides` has to include your relevant drive letter. Eg. `"webpack:///c:*": "c:/*"` when you run your project from _C: drive_. — Yuri, Nov 06 '16 at 13:10
Bravo! I've tried this on and off a few times and could never get it to work. The sourceMapPathOverrides are the key! — Daniel Patrick, Nov 15 '16 at 12:32

score 3 · Answer 3 · edited Oct 15 '20 at 00:52

I'm using Angular CLI 1.7.3 and Angular: 5.2.9 on Mac OSX. Here is the configuration which is working for me:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Client in Chrome",
            "sourceMaps": true,
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*",
            }
        }
    ]
}

score 2 · Answer 4 · edited Oct 15 '20 at 00:49

Similar to Aaron F.'s answer, I use the following setting for Angular 2+ develop in Windows environment.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "trace": true,
            "smartStep": true,
            "runtimeArgs": [
              "--disable-session-crashed-bubble",
              "--disable-infobars"
            ],
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }
    ]
}

score 2 · Answer 5 · edited Oct 15 '20 at 00:51

I had the same issue using windows-vscode and my launch.json is as follows:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}"
        }
        ]
}

Then I installed chrome debug extension from here and then error resolved.

You can directly install this extension from:

vscode-->Extensions-->search and select "Debugger From Chrome"-->click on install

You may need to restart vscode.

the extension is deprecated. Any way to do it without it? – alex351 Sep 02 '21 at 07:06 — alex351, Sep 02 '21 at 07:06

score 1 · Answer 6 · edited Oct 15 '20 at 00:53

1

The following configuration works well for me on macOS using VSCode v1.23, Angular 6, and Chrome 66.

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

edited Oct 15 '20 at 00:53

Pang

9,564
146
81
122

answered Jun 02 '18 at 02:54

Jose Orihuela

897
6
6

This worked for me when setting up debugging with electron + angular 7. The renderer debugging process was not working correctly, even though it was mapping fine in the electron shell chrome debugger. Setting the overrides like this worked properly for attaching VSCode to the renderer process of the launched electron shell. – Dave Ferguson Nov 23 '18 at 21:13

score 1 · Answer 7 · edited Oct 15 '20 at 00:52

1

You just need to install the Debugger for Chrome extension.

edited Oct 15 '20 at 00:52

Pang

9,564
146
81
122

answered Jul 09 '19 at 06:11

Itumeleng Tlali

131
1
4

score 1 · Answer 8 · answered Sep 02 '21 at 09:24

The chrome debug extension is deprecated. To use the equivalent native VSC debugging, refer to the launch.json docs. Github page

The difference to the old settings is the PWA part:

{
    "version": "0.2.0",
    "configurations": [
        {
          "type": "pwa-chrome",
          "request": "launch",
          "name": "Launch Chrome with ng serve",
          "url": "http://localhost:4200/",
          "webRoot": "${workspaceRoot}",
          "sourceMapPathOverrides": { "webpack:/*": "${webRoot}/*" }
        }
      ]
}

Thanks Alex, after 1 hour spent searching for solutions you've saved my day! — Alex MAN, Jan 07 '22 at 10:43

score 0 · Answer 9 · edited Oct 15 '20 at 00:53

I got wierd issue with launch.json provided by Aaron F.

".scripts" in debugger command line give urls like this:

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/webpack:/src/app/app.component.ts)

so VS Code trying to use file "/home/user/my-dream-app/src/app/webpack:/src/app/app.component.ts" (notice webpack: in the middle).

Source maps does not work, because my Chrome give url as "webpack:/" with ONE slash.

In got it working with this launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome with ng serve",
          "url": "http://localhost:4200/",
          "webRoot": "${workspaceRoot}",
          "sourceMapPathOverrides": { "webpack:/*": "${webRoot}/*" }
        }
      ]
}

and got correct mapping

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)

Ubuntu: 16.04
Chrome: 64.0.3282.186
VSCode: 1.20.1
Angular CLI: 1.7.2
Node: 7.10.1

score 0 · Answer 10 · edited Apr 26 '20 at 09:06

To test and debug in vs code with angular and karma here is a solution, angular test case to work you have to make a setting in 2 files,

Karm.conf.json ( this is a file that set your karma test runner.
LaunchSetting.json ( this is file used by your Chome Debugger extension

in vs code)

So always first you have to run your karma test runner, on that port and then you can attach debugger on running port.

Step 1) Setup Karma.conf.json, open default file created by cli, you got something like this, port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'],

if you run ng test, you see in console you got some info like is Chrome is running, as well a page will open in browser with http://localhost:9876,

Now time to add headlesschrome with port 9222,

inside config.set, add this,
```
    customLaunchers:{
          ChromeHeadless:{
            base:'Chrome',
            flags:[
              '--headless',
              '--disable-gpu',
              '--no-sandbox',
             // Without a remote debugging port, Google Chrome exits immediately.
              '--remote-debugging-port=9222',
            ]
          }
        }
```
and now go and add to the browser array ChoromeHeadless, so updated array will look like this, browsers: ['Chrome','ChromeHeadless'],

now run ng test you got in console chrome and chrome headless both running,

Step 2) Time to set up your launcher, to debug on 9222, debug to work you need sourcmap creation to work properly, that is important, so for same to work just copy-paste config setting from below configuration array to your launchsetting.json configuration array as new config,
```
configurations: [
    {
                "name": "Attach to Chrome, with sourcemaps",
                "type": "chrome",
                "request": "attach",
                "port": 9222,
                "webRoot": "${workspaceFolder}",
                "sourceMapPathOverrides": {
                    "*": "${webRoot}/*",
                },
                "sourceMaps": true,
    }
    ]
```
run ng test, and then go to debugger choose the config we add, your debugger working,

if you using npm run test, then make sure in your package.config where you define a run test, you have not set source map to false, if not then you can set debugger with, npm run test as well.

Debug with Visual Studio Code not working

10 Answers10

Linked