CODEWITHSUNDEEP
angulardebuggingwebstorm
webworm
webworm

Reputation: 11019

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

Upvotes: 15

Views: 16990

Answers (7)

Holgrabus
Holgrabus

Reputation: 141

I'm using Angular 14 and for another project I was using Node 20.

I had to select Node 16 as interpreter to activate breakpoints. With Node 20, I only had access to the console logs.

enter image description here

Upvotes: 0

RK Dev
RK Dev

Reputation: 1

Just stumbled upon this question while researching, I had the exact same problem in WebStorm 2024.1.

Tried every answer here and none worked, my debug session opened my browser through ctrl+shift+click correctly and it didn't work. I tried creating the Javascript Debug configuration, made sure to run it after starting the app with the Debug button and it didn't work. Found a Medium post telling to add --remote-allow-origins=* in browser configuration and it didn't work.

The only thing that worked for me is the workaround I've found in JetBrains support to put --host=127.0.0.1 in the npm script that runs my app (link here). If you don't want to or cannot change the npm scripts in your package.json you can add it in the Run Configuration Arguments field but you have to add a -- before otherwise it won't work.

My script with the workaround:

scripts: {
   "dev": "ng serve --configuration=dev --host=127.0.0.1"
}

Or, using the Configuration Editor (can't embed images yet, not enough reputation):

Configuration Editor Arguments

Then you can either Ctrl+Shift+click the URL in the console (will be http://127.0.0.1:4200) or execute with Debug button a separate Javascript Debug config (don't forget to change the URL to http://127.0.0.1:4200). Both worked for me.

Upvotes: 0

Connor
Connor

Reputation: 698

The other answers help, but the key for me was having the right default browser (I use Firefox by default, which is not supported, so CTRL+SHIFT was not launching a new Chrome instance). enter image description here

To start an Angular debugging session:

  • Click the "play" button for your normal ng serve config
  • CTRL + SHIFT click the http://localhost:4200 link in the output
  • IMPORTANT: Make sure a NEW Chrome window opens (this will be linked to the debugger)
  • Ensure the autogenerated JavaScript Debug run config is running in debug mode

Upvotes: 1

Dawid D
Dawid D

Reputation: 1151

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

Upvotes: 5

Andrzej Krawczuk
Andrzej Krawczuk

Reputation: 409

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

Upvotes: 5

webworm
webworm

Reputation: 11019

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

Upvotes: 0

Ragavan Rajan
Ragavan Rajan

Reputation: 4397

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.

Upvotes: 22

Related Questions