Debug cli-generated project with Visual Studio Code #1223

Closed
daverupp opened this Issue Jun 27, 2016 · 13 comments

Comments

Projects
None yet
8 participants
@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

This comment has been minimized.

Show comment
Hide comment
@guidorice

guidorice Jun 27, 2016

@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.

guidorice commented Jun 27, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@daverupp

daverupp Jun 28, 2016

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

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

@guidorice

This comment has been minimized.

Show comment
Hide comment
@guidorice

guidorice Jun 29, 2016

@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.

@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

This comment has been minimized.

Show comment
Hide comment
@code1line

code1line Sep 17, 2016

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

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

@filipesilva

This comment has been minimized.

Show comment
Hide comment
@filipesilva

filipesilva Sep 22, 2016

Member

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

Member

filipesilva commented Sep 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@daverupp

daverupp Sep 29, 2016

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?

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

This comment has been minimized.

Show comment
Hide comment
@cjrosa

cjrosa Oct 4, 2016

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!

cjrosa commented Oct 4, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ufleisch

ufleisch Oct 7, 2016

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.

ufleisch commented Oct 7, 2016

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

This comment has been minimized.

Show comment
Hide comment
@cjrosa

cjrosa Oct 8, 2016

@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.

cjrosa commented Oct 8, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@filipesilva

filipesilva Oct 9, 2016

Member

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

Member

filipesilva commented Oct 9, 2016

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

@filipesilva filipesilva closed this Oct 9, 2016

@rafalkasa

This comment has been minimized.

Show comment
Hide comment
@rafalkasa

rafalkasa Jan 7, 2017

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

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

This comment has been minimized.

Show comment
Hide comment
@amitvchaudhary

amitvchaudhary Sep 12, 2017

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.

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

This comment has been minimized.

Show comment
Hide comment
Member

filipesilva commented Sep 12, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment