Debug cli-generated project with Visual Studio Code

[daverupp]

Version:
Windows 10
angular-cli: 1.0.0-beta.8
node: 6.2.2
os: win32 x64

I changed nothing in the code, I am just trying to get it working with Visual Studio Code :-)

Here is my launch.json content:

`
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch index.html with sourcemaps",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/src/index.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/dist/"
},
{
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200/index.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/dist/"

    },
    {
        "name": "Attach with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "port": 9222,
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}/dist/"
    }
]

}
`

[guidorice]

@daverupp - just an aside question- in general, are you able to do angular2 development on Windows? I tried on windows10, but I ran into some npm module that was trying to create symlinks, which was failing on windows. I do not remember which module it was- it could have been part of the quickstart project.

[daverupp]

So far everything is working. Honestly I just started with developing with Angular2. But the "Hero" quickstart works properly.

[guidorice]

@daverupp sorry my bad- I must have been remembering some other node modules which fail on windows because of symlinking. Angular2 quickstart works great on Win10.

[code1line]

@daverupp - this doesn't work for me. Do you start with "ng serve" and then run the debug-session?

[filipesilva]

Can't answer this myself as I don't use the functionality you're trying to use, but will flag it for community help.

[daverupp]

Yes I tried to run with ng serve. The angular app is running in localhost:4200.

Then I tried to attach to port 9222 via chrome (I attached this to the chrome launch: --remote-debugging-port=9222)

when run visual studio code, in the console is written: "SW registered". So that seems to be promising.

But when I go to localhost:4200 and click on a button to hit the breakpoint, still nothing happens...

Anyone can help?

[cjrosa]

To too am unable to debug angular-cli created application in VC Code. Seemingly no combination of launch.json setting will enable breakpoints being hit. There is alot of chatter in the debug console related to "webpack" when the "diagnosticLogging": true is set, but no obvious indications.

I added as tcs task to force the creation of the *.js and *.map files to be co-resident with the *.ts files to no avail (this worked on an non-cli app served from iisExpress, not via tsserver).

Thanks!

[ufleisch]

I can debug from Visual Studio Code after adding a sourceMapPathOverrides to launch.json (Linux, project created with current angular-cli):

{
  "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:///*": "/*"
        // "webpack:////absolute/path/to/workspaceRoot/*": "${webRoot}/*"
        // works too, but this will not work:
        // "webpack:///${workspaceRoot}/*": "${webRoot}/*"
      }
    },
    {
      // For this to work, start chrome using
      // google-chrome --remote-debugging-port=9222 http://localhost:4200
      // and do not use its developer tools simultaneously.
      "name": "Attach to Chrome, with sourcemaps",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}",

      "sourceMapPathOverrides": {
        "webpack:///*": "/*"
      }
    }
  ]
}

See also Microsoft/vscode-chrome-debug#226 for a sourceMapPathOverrideswith an absolute Windows path.

[cjrosa]

@ufleisch Thanks! I've confirmed that I too can debug given the launch.json you've provided. Note I'm using windows and an absolute path was necessary.

[filipesilva]

Closing in favor of #2453 since there's more investigation and solutions there.

[rafalkasa]

If you are windows users try to change in your launch.json sourceMapPathOverrides from default: "webpack:///*": "/*"
to:

"sourceMapPathOverrides": {
    "webpack:///C:*":"C:/*"
}

and Launch Chrome against localhost, with sourcemaps from VSCode

[amitvchaudhary]

Hi All,

I am still facing the problem.

Below is the launch.json file:

{
"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:///C:*":"C:/*"
}
},
{

  "name": "Attach to Chrome, with sourcemaps",
  "type": "chrome",
  "request": "attach",
  "port": 9222,
  "sourceMaps": true,
  "webRoot": "${workspaceRoot}",

  "sourceMapPathOverrides": {
    "webpack:///C:*":"C:/*"
}
}

]
}

Please help me out.

[filipesilva]

There's an official VSCode guide in https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI as well.

[angular-automatic-lock-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.}