Unable to debug Angular with WebStorm

Question

I have an Angular application (Angular 2) that I can launch without issue from WebStorm, however when I try and set breakpoints none of them are ever hit. WebStorm reports that the debugger is attached and that webpack has compiled successfully. I open my browser to localhost:4200 and my app loads fine, it's just that none of my breakpoints are hit. I also have the JetBrains IDE extension installed but my understanding was that it wasn't necessary anymore.

Answer 1

Step 1 : Click on the top right corner drop down > edit configuration

Step 2: Under the run debug configurations> hit the + symbol and select Javascript Debug

Step 3: Make sure you have created new profile under Javascript debug (In my case profile name is Angular Applicaiton > URL: http://localhost:4200

Step 4: Once everything is set properly. Make sure you select the proper profile from the dropdown like below

Step 5: Make sure you are serving your application via ng s in terminal then click on the Debug button (Remember do not hit the play green button). Press the Red bug button as per above screenshot..

It should now open the localhost:4200 in new window

Note: Make sure you added enough breakpoints in your ts file to debug it

Now your breakpoints will definitely work.

Answer 2

Worked for me I hope it will help:
1.run with debug mode
2.Hold Ctrl+Shift and click this URL ex.(http://localhost:4200)

WebStorm starts a debugging session with an automatically generated Angular Application configuration of the type JavaScript Debug as written in official documentation https://www.jetbrains.com/help/webstorm/angular.html#angular_running_and_debugging_debug