Vs code debug angular 2 webpackq #367

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

Comments

Projects
None yet
10 participants
@weinand
Member

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

This comment has been minimized.

Show comment
Hide comment
@weinand

weinand Feb 22, 2017

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@weinand

weinand Feb 22, 2017

Member

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
Member

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

@weinand weinand referenced this issue in Microsoft/vscode Feb 22, 2017

Closed

Vs code debug angular 2 webpackq #20964

@roblourens

This comment has been minimized.

Show comment
Hide comment
@roblourens

roblourens Feb 22, 2017

Member

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

Member

roblourens commented Feb 22, 2017

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

@brux88

This comment has been minimized.

Show comment
Hide comment
@brux88

brux88 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

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

This comment has been minimized.

Show comment
Hide comment
@roblourens

roblourens Feb 23, 2017

Member

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

Member

roblourens commented Feb 23, 2017

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

@brux88

This comment has been minimized.

Show comment
Hide comment
@brux88

brux88 Feb 23, 2017

excuse me, where I have to use .scripts?

brux88 commented Feb 23, 2017

excuse me, where I have to use .scripts?

@roblourens

This comment has been minimized.

Show comment
Hide comment
@roblourens

roblourens Feb 23, 2017

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@maxime1992

maxime1992 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).

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

This comment has been minimized.

Show comment
Hide comment
@roblourens

roblourens Mar 18, 2017

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@LwaziPrusent

LwaziPrusent 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}"
        }
    ]
}

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

This comment has been minimized.

Show comment
Hide comment
@smithag77

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

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

This comment has been minimized.

Show comment
Hide comment
@roblourens

roblourens Apr 13, 2017

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@smithag77

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

@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

This comment has been minimized.

Show comment
Hide comment
@sebasfiorent

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

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

This comment has been minimized.

Show comment
Hide comment
@daBishMan

daBishMan Apr 20, 2017

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

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

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jun 27, 2017

How the , i can debug ANG4 with Vs code

ghost commented Jun 27, 2017

How the , i can debug ANG4 with Vs code

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jun 27, 2017

I have undefined breakpoint

ghost commented Jun 27, 2017

I have undefined breakpoint

@auchenberg

This comment has been minimized.

Show comment
Hide comment
@auchenberg

auchenberg Jun 27, 2017

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@haydenhancock

haydenhancock 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

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

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