Debug component in vs code - source map problem

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/cli@1.0.0-beta.30

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)\Google\Chrome\Application\chrome.exe --remote-debugging-port=9222 on windows 3. 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

[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.}