angular - Debug with Visual Studio Code not working -

i'd able debug angular2 application visual studio code.

here's 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 new project angular-cli :

ng new test-vsc-debug cd test-vsc-debug 

then open vsc , load project : file/open folder

i click on debug logo , configure launch.json selecting chrome. generates following file :

{     "version": "0.2.0",     "configurations": [         {             "name": "launch chrome against localhost, sourcemaps",             "type": "chrome",             "request": "launch",             "url": "http://localhost:8080",             "sourcemaps": true,             "webroot": "${workspaceroot}"         },         {             "name": "attach chrome, sourcemaps",             "type": "chrome",             "request": "attach",             "port": 9222,             "sourcemaps": true,             "webroot": "${workspaceroot}"         }     ] } 

then start angular2 project running :

ng serve 

once has started, in vsc select : "launch chrome against localhost, sourcemaps".

then, following error :
"can't find chrome : install or set runtimeexecutable field in launch config."

so set :
"runtimeexecutable": "chromium-browser"
(as not have chrome chromium on ubuntu).

angular-cli default port launch app 4200. change url : "http://localhost:8080" "http://localhost:4200".

now browser opening app vsc has following error: "cannot connect runtime process, timeout after 10000 ms - (reason: cannot connect target: connect econrefused 127.0.0.1:9222".

from other answers found on stackoverflow/github issues, i've read might have kill chrome instances before trying that, close chromium , run killall chromium-browser.

i try run debug again : same error before (cannot connect).

i've seen following arguments might :

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

but not change anything.

i decided use vsc typescript devs (mostly angular2) , way of debugging seems powerful. have feeling it'd bad not use :).

thanks !

ps: related stackoverflow questions , github issues :
- debug & run angular2 typescript 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 !!! found way have debug info within visual studio code console ! it's not perfect yet breakpoints doesn't work here's thing. far, if opened http://localhost:9222 not able see anything. ("localhost doesn't authorized connection").

but, if launch chromium :

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

the important thing notice argument : --user-data-dir=remote-profile. if pass --user-data-dir launches new window no 1 connected. it's not enough. need pass remote-profile value.

• it opens new browser window
• i open http://localhost:4200 , can reach http://localhost:9222 !
• i'm able connect vsc "attach chrome source map" option ! (as can see, have "angular 2 running in development mode. call enableprodmode() enable production mode." displayed in console , footer has orange background)

so far, hope can people. problem breakpoints not working.

i keep digging , 'll make edit if found why.

i able solve problem on osx. reason it's such pain there multiple things causing issue.

1. you hit on first --user-data-dir=remote-profile: if you're running chrome (for example, have tabs open - doesn't?), have use different userdatadir have chrome launch independent instance.
   the correct way this, however, add "userdatadir": "${workspaceroot}/.vscode/chrome", launch.json configuration (see below). needs path. if 'remote-profile' used attempts find relative directory named 'remote-profile'.
2. you need set sourcemappathoverrides in launch.json config, value of depends on os:
   osx: "sourcemappathoverrides": { "webpack:///./*": "${webroot}/*" }
   windows: "sourcemappathoverrides": { "webpack:///c:*":"c:/*" }
   linux: "sourcemappathoverrides": { "webpack:///*": "/*" }
   (note: have not tested windows or linux versions)

here working launch.json on osx:

{     // use intellisense learn possible node.js debug attributes.     // hover view descriptions of existing attributes.     // more information, visit: https://go.microsoft.com/fwlink/?linkid=830387     "version": "0.2.0",      "configurations": [         {             "name": "launch chrome against localhost, sourcemaps",             "type": "chrome",             "request": "launch",             "url": "http://localhost:4200",             // forces chrome run brand new instance, allowing existing             // chrome windows stay open.             "userdatadir": "${workspaceroot}/.vscode/chrome",             "sourcemaps": true,             "webroot": "${workspaceroot}",             //"diagnosticlogging": true,             "sourcemappathoverrides": { "webpack:///./*": "${webroot}/*" }         },         {             "name": "attach chrome, sourcemaps",             "type": "chrome",             "request": "attach",             "url": "http://localhost:4200",             "port": 9222,             "sourcemaps": true,             "webroot": "${workspaceroot}",             "diagnosticlogging": true,             "sourcemappathoverrides": { "webpack:///./*": "${webroot}/*" }         }     ] } 

for work, run ng serve in terminal, hit f5 inside of visual studio code.

here 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 chrome" msjsdiag.debugger-for-chrome: 2.4.2