'Unable to debug Angular with WebStorm

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.

enter image description here

enter image description here

angulardebuggingwebstorm


Solution 1:[1]

I finally got it to work after much trial and error.

  1. I setup a debug configuration using the WebStorm "npm" template (screen capture below). You can ignore the Script parameter in the screenshot as this is simply an alias (located in package.json) pointing to a JSON file that contains proxies for external API endpoints (DEV, Production, Stage, etc)
  2. From here I could launch my Angular application and webpack would compile everything
  3. At this point my application would run normally but no breakpoints would be hit. Then I installed the JetBrains IDE Support Chrome Extension. Once installed, I right clicked on the extension and chose "Inspect in WebStorm" option. At that point the WebStorm IDE opened a second DEBUG window named "localhost:4200". The any breakpoints I had set were hit whenever I triggered them.

So they key was the JetBrains IDE support Chrome Extension. It was my understanding that this was no longer needed in the newer versions of WebStorm but it appears that to debug my Angular application it is still required. It can be downloaded from the Chrome Extension store here.

I hope this helps someone else out because it drove me nuts for the longest time.

NPM Debug Configuration NPM Debug Configuration

Webpack compiling Webpack compiling

Debug window at http://localhost:4200 Debug window at http://localhost:4200

Solution 2:[2]

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

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

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.

Solution 3:[3]

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

Solution 4:[4]

I know that the answer is already here but may be someone may find it helpful

Acording to the documentation

 Debugging of Angular applications is only supported with Node.js version 16 and earlier.

So check the Node version, if it is higher, the debugger won't stop at the breakpoint https://www.jetbrains.com/help/webstorm/angular.html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 webworm
Solution 2
Solution 3 Andrzej Krawczuk
Solution 4 Dawid D

Related Questions