Debugging in IDE

[doczoidberg]

is it or will it ever be possible to debug angular-cli (typescript) based projects inside the IDE?

[filipesilva]

Something like this? https://www.jetbrains.com/webstorm/help/debugging-typescript.html

I haven't used it, but Angular 2 in typescript is a TS project just like any other. You should be able to debug it with normal TS debugging tools.

[pauleveritt]

I'm developer advocate for PyCharm/WebStorm and do a bunch of Angular. @doczoidberg if you have some specifics, give me a nudge. But I suspect this question might be a little too broad for the angular-cli team.

[doczoidberg]

I installed the jetbrains chrome extension and the console ouput is send to webstorm. Also chrome says "JetBrains IDE Support" is debugging this browser. But breakpoints in my ts files are not hit.

[filipesilva]

@doczoidberg This might be related to the brocolli build step and code transpilation in angular-cli.

@pauleveritt does jetbrains debugging tools output instrumented code, and rely on that instrumentation to trigger editor behaviour?

[filipesilva]

@doczoidberg can you try debugging the quickstart example?

[pauleveritt]

@doczoidberg I asked the WebStorm folks for some help, but surprisingly, it just worked with Tour of Heroes. I pointed the Debug run config at http://localhost:3000 and had to configure my Chrome extension's port to match what WebStorm was expecting. After that it worked.

If you'd like, I can make a little screencast with an illustration.

[doczoidberg]

that would be awesome. I think i am doing something wrong.

[filipesilva]

No I don't think it's you. I think the the build process and concat, there was some talk about debugging tools and this within the team.

We might need to make a few adjustments to the CLI for IDE debugging to work well.

[pauleveritt]

@filipesilva Here you go: https://www.youtube.com/watch?v=RQSRKi3VZ3I

[doczoidberg]

thanks. But this does not work with angular cli projects as filipesilva also mentioned

[filipesilva]

@pauleveritt this is pretty cool! Thank you for making this video!

[pauleveritt]

@doczoidberg Ah, sorry, I got mixed up in the issue thread, I thought I was responding to when @filipesilva asked you to try it with Tour of Heroes. Like you, I badly want to switch to angular-cli, but as it's still baking in the oven, if we try now we'll burn our fingers. :) Things like this (debugging the brocolli'd output) and trying to get third-party libs into the bundles are still raw.

[pauleveritt]

@filipesilva My pleasure, but a bigger thanks to all of you for working on angular-cli. The amount of complexity you're dealing with, and the rate of change by all variables, I can't imagine how you keep it all in your head.

[filipesilva]

I'll keep this issue open, the goal is to have good tooling when using the CLI, it's just not there yet.

[hansl]

There's nothing particularly difficult or impossible about using an IDE to debug. Closing this, but maybe we should add information on some README or wiki about how to configure your favorite IDE to run ng serve.