Provide tutorial for debug in Webstorm/Phpstorm

[castamir]

gitter seems to be to much messy to get these kind of information...

repro steps:

• Installed Phpstorm (improved Webstorm)
• installed angular-cli beta.17
• created new app using ng new
• builded app using ng build

my app works, but I cannot get debugger work with original typescript files

• installed jetbrains IDE extention into chrome
• created debug config
  • new javascript debugger
  • www.example.com // url where my app is - I CAN'T use ng serve
  • since there is no way to select a file I just keep the default project dir which was created by ng new
• after debugger was started, the chrome window opened and app worked but debugger didn't stop on breakpoint in app.component.ts. Chrome only showed an info bar "Jetbrains IDE support" is debugging this browser, Cancel?

any idea how to get it work? Btw similar tips for Visual Studio 2015 will come handy as well (another project)

[filipesilva]

There's a similar thread going on for VSCode (#2453) where the community has been awesome and found a config that works. I can't provide you one for Phpstorm/Webstorm/VS2015 but I'll leave the issue open and flagged for help.

[jwoehrle]

I'm successfully using intellij idea to debug an angular-cli app. The way it works should be similar if not same with Webstorm.
I followed the guide here [https://stackoverflow.com/questions/34254820/intellij-idea-typescript-webpack-debugging-only-works-with-javascript-breakpoint]
Basically you have to link the sources within the debug->elements tab with the correct location of your projects files. What you have to do is:

• run the project with ng serve
• start the debug configuration from webstorm/intellij
• in the debug->elements tab underneath "scripts" locate the correct folder which contains your sources. In my case it's "webpack:///src". Right click on that folder and chose "Specify Local Path".
• in the popup choose your project's location which corresponds to the webpack folder
• now your breakpoints should show the tick and the debugger should stop at them

[castamir]

add last point to tutorial:

• refresh browser

---

@jwoehrle Thank you very much!

I still have some use cases to test but so far it seems working

[gkaran]

I am not sure this is the same as @jwoehrle solution but here is goes:

• Create a new run/debug configuration for "Javascript Debug"
• In URL set: `http:.//localhost:4200'
• Choose the project's dir in the panel underneath and set remote URL: http://localhost:4200
• Now choose the src dir and set as remote URL: webpack://

Here is also a screenshot of the configuration:

Now run in debug mode the configuration and voila, your breakpoints work as expected.

[prigara]

I wrote this blog post some time ago. I can adapt it to fit the Angular CLI documentation.

[mgechev]

@prigara thanks for sharing the blog post! I think we can use it as a reference. Closing the issue for now :)

[angular-automatic-lock-bot]

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