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

Vs code debug angular 2 webpackq #367

Closed
weinand opened this issue Feb 22, 2017 · 19 comments
Closed

Vs code debug angular 2 webpackq #367

weinand opened this issue Feb 22, 2017 · 19 comments
Assignees

Comments

@weinand
Copy link
Member

@weinand weinand commented Feb 22, 2017

From @brux88 on February 20, 2017 23:55

hello, I am trying to debugging an app created with angular cli from vs code, but it does not work that way?

Copied from original issue: microsoft/vscode#20964

@weinand weinand self-assigned this Feb 22, 2017
@weinand
Copy link
Member Author

@weinand weinand commented Feb 22, 2017

@brux88 please provide details about your setup (VS Code version, platform, node version, launch.json), the exact steps you've tried and what doesn't work.

@weinand
Copy link
Member Author

@weinand weinand commented Feb 22, 2017

From @brux88 on February 22, 2017 7:55

of corse,
Vs Code : 1.9.1
node : 6.9.5
ng (angular-cli) : @angular/cli: 1.0.0-beta.32.3 [2.7.0]

my launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}/src",
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:///C:*":"C:/*"
            }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}/src",
            "sourceMapPathOverrides": {
                "webpack:///C:*":"C:/*"
            }
        }
    ]
}```

i add this string "--remote-debugging-port=9222" in target of chrome.exe ,

The step is:
open vs code, open termina and digit "ng serve" then go on debug and click on "Launch Chrome against localhost, with sourcemaps".

this is my solution:
![2017-02-22_0853](https://cloud.githubusercontent.com/assets/3495339/23202005/63165f0a-f8dc-11e6-9996-d90d259af608.png)


Finally, I wanted to know if it was possible to manage everything from "vs code", ie without have to write ng serve, automatically if you do I debug, the server is started and opens me the solution of chrome
@roblourens
Copy link
Member

@roblourens roblourens commented Feb 22, 2017

Looks like you're missing a slash in your sourceMapPathOverrides: "webpack:///C:/*":"C:/*"

@brux88
Copy link

@brux88 brux88 commented Feb 23, 2017

i try but not work, if I go in the breakpoint tells me there's something wrong, I have attached a picture
immagine

@roblourens
Copy link
Member

@roblourens roblourens commented Feb 23, 2017

Try using the .scripts command to debug it, there are details in the readme.

@brux88
Copy link

@brux88 brux88 commented Feb 23, 2017

excuse me, where I have to use .scripts?

@roblourens
Copy link
Member

@roblourens roblourens commented Feb 23, 2017

There is lots of advice in the readme on how to use .scripts and debug this problem, please try it out.

@maxime1992
Copy link

@maxime1992 maxime1992 commented Mar 14, 2017

I do have the same issue. It would be very nice to have a working repo of a fresh angular-cli project with the launch.json file in it :)

In case anyone is wondering how to create and start a project with angular-cli :
With npm :

npm i -g @angular/cli
cd /tmp
ng new --ng4 debug-test
cd debug-test
ng serve

With yarn :

yarn global add @angular/cli
cd /tmp
ng new --ng4 debug-test
cd debug-test
ng serve

I think many people are interested in that configuration because I opened a stackoverflow topic about that which has more than 1600 views. (I tagged the topic as solved because somehow I managed at this time to make it work but it's not working anymore).

@weinand weinand assigned roblourens and unassigned weinand Mar 14, 2017
@roblourens
Copy link
Member

@roblourens roblourens commented Mar 18, 2017

This works fine for me out of the box, with no special sourceMapPathOverrides config.

If breakpoints don't bind at first, try refreshing the page, because chrome may garbage collect scripts when they are done running. Chrome devtools will show the same behavior.

@roblourens roblourens closed this Mar 18, 2017
@LwaziPrusent
Copy link

@LwaziPrusent LwaziPrusent commented Apr 3, 2017

if anyone joins and wants a working example of the launch.json here it is
also as @roblourens mentioned used the .scripts command it's very useful to see why files are not mapped correctly

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/.vscode/chrome"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}
@smithag77
Copy link

@smithag77 smithag77 commented Apr 13, 2017

Thank you so much @LwaziPrusent and @roblourens for the assist. This worked perfectly.

Would either of you be able to tell me how to debug the e2e tests that the angular cli runs? That has me stumped.

@roblourens
Copy link
Member

@roblourens roblourens commented Apr 13, 2017

Here's a blog post on karma debugging if that helps: http://blog.mlewandowski.com/Debugging-Karma-tests-with-VSCode.html

Otherwise please open another issue with details

@smithag77
Copy link

@smithag77 smithag77 commented Apr 19, 2017

@roblourens thank you. That definitely helped me set up debugging for my unit tests. I'm tantalizingly close to getting my e2e tests "debuggable" but still not quite there. Per your request, I've submitted an issue.

@sebasfiorent
Copy link

@sebasfiorent sebasfiorent commented Apr 19, 2017

@roblourens you say that "If breakpoints don't bind at first, try refreshing the page, because chrome may garbage collect scripts when they are done running." Cant reproduce with devtools, are you sure that is nothing with the chrome-debug extension? I mean, if I refresh the page it always bind breakpoints, but the first time always not.

@daBishMan
Copy link

@daBishMan daBishMan commented Apr 20, 2017

I have the same issue where I can not even hit my break points for end to end test using protractor.

@ghost
Copy link

@ghost ghost commented Jun 27, 2017

How the , i can debug ANG4 with Vs code

@ghost
Copy link

@ghost ghost commented Jun 27, 2017

I have undefined breakpoint

@auchenberg
Copy link
Contributor

@auchenberg auchenberg commented Jun 27, 2017

@atlabiz Have you seen, https://medium.com/@auchenberg/super-charged-live-editing-and-javascript-debugging-for-angular-using-visual-studio-code-c29da251ec71?

Please open an new issue instead re-using this old one, if the problem/angular version is different.

@haydenhancock
Copy link

@haydenhancock haydenhancock commented Jul 28, 2017

@LwaziPrusent Thanks! Using your launch.json configuration resolved my issue ("diagnosticLogging" has been deprecated. You might want to replace that with "trace").

Visual Studio Code 1.14.2
Shell 1.6.6
Renderer 56.0.2924.87
Node 7.4.0
Angular Cli 1.2.5

@vscodebot vscodebot bot locked and limited conversation to collaborators Mar 29, 2018
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
10 participants
You can’t perform that action at this time.