Angular-cli: Debug component in vs code - source map problem

[doczoidberg]

OS?

Windows 10 64bit

Versions

@angular/cli: 1.0.0-beta.30
node: 6.9.5
os: win32 x64
@angular/common: 2.4.6
@angular/compiler: 2.4.6
@angular/core: 2.4.6
@angular/forms: 2.4.6
@angular/http: 2.4.6
@angular/platform-browser: 2.4.6
@angular/platform-browser-dynamic: 2.4.6
@angular/router: 3.4.6
@angular/cli: 1.0.0-beta.30
@angular/compiler-cli: 2.4.6

Repro steps.

vs code chrome debugging extensions is installed
create new project via ng new
add to launch.json in vscode:

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

ng serve
attach debugger in vs code

debugging console works in vs code so that I think chrome is attached to vs code right.

but when settings a breakpoint in app.component.ts line 9 vs code says 'Breakpoint ignored because generated code could not be found (source map problem?)

What am I doing wrong?

[badre429]

debug angular-cli application in google chrome with vscode

i use @angular/[email protected]

1. install Debbuger For Chrome extention in vscode

2. Close all instances of chrome and run command line

> <path to chrome>/chrome.exe --remote-debugging-port=9222

C:Program Files (x86)GoogleChromeApplicationchrome.exe --remote-debugging-port=9222 on windows

1. run ng serve with source map option

 ng serve --sourcemap

1. change ./.vscode/launch.json to

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome against localhost, with sourcemaps",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}",

      "sourceMapPathOverrides": {

        "webpack:///./*":"${workspaceRoot}/*" 
      }
    } 
  ]
}

1. run debug in vscode

you can check the source Map Path Overrides value "webpack:///./*" inside chrome source tab and navigate to you "app.module.ts" file

[doczoidberg]

breakpoints work now in the app.component.ts but not in an addional generated component. any ideas?

[doczoidberg]

this is my code:
https://github.com/doczoidberg/ang1

[doczoidberg]

.

[doczoidberg]

this problem does not occur in webstorm 2017. Not sure if it is a VS code issue nevertheless.

Breakpoints are sometimes also set on the wrong line in VS code

[filipesilva]

Heya @doczoidberg, I'm sorry but I don't really have an answer for you. I flagged this for community help.

Might be related to https://github.com/webpack/webpack/issues/316, there's reports of sourcemap issues there.

[doczoidberg]

I have to delete %temp% directory before each debugging session. Then it works.

[filipesilva]

Oh cool, glad to hear that was it!

[Verbon]

@badre429 thanks, that worked for me, though on Windows you should try instead of this

    "sourceMapPathOverrides": {      
        "webpack:///./*":"${workspaceRoot}/*" 
      }

this

    "sourceMapPathOverrides": {      
        "webpack:///./*":"${workspaceRoot}\\*" 
      }

Note backslashes after {wordspaceRoot}.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}