Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Debug cli-generated project with Visual Studio Code #1223

Closed
daverupp opened this issue Jun 27, 2016 · 14 comments
Closed

Debug cli-generated project with Visual Studio Code #1223

daverupp opened this issue Jun 27, 2016 · 14 comments

Comments

@daverupp
Copy link

@daverupp daverupp commented Jun 27, 2016

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
Copy link

@guidorice 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
Copy link
Author

@daverupp daverupp commented Jun 28, 2016

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

@guidorice
Copy link

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

@code1line
Copy link

@code1line code1line commented Sep 17, 2016

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

@filipesilva
Copy link
Member

@filipesilva 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
Copy link
Author

@daverupp daverupp commented 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?

@cjrosa
Copy link

@cjrosa 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
Copy link

@ufleisch 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
Copy link

@cjrosa 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
Copy link
Member

@filipesilva 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
Copy link

@rafalkasa rafalkasa commented 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

@amitvchaudhary
Copy link

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

@filipesilva
Copy link
Member

@filipesilva filipesilva commented Sep 12, 2017

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

@angular-automatic-lock-bot
Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Sep 7, 2019

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants
You can’t perform that action at this time.