16

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

Improve this question

7 Answers 7

Reset to default
23

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I tried the steps you listed. My debug icon is a green bug as opposed to a red bug. Dose that make a difference? In any case when I clicked the green bug it opened an empty chrome window and then after a few seconds a message appeared in webstorm saying Waiting for connection to localhost:63276
May be the color depends on the theme color scheme you have. Did you follow my screen shot and set the URL to localhost:4200. If so once everything is set then you have to choose the profile from the drop down . Updated my answer with more steps
Thank you! Webstorm detects the configuration of an angular project when you're on te project folder. When you're in the parent folder of the project (1 layer above the project) no config is loaded. The steps above helped me to create a config for this situation.
6

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

Improve this answer

3 Comments

so, how can we do with node > 16?
@G.M stackoverflow.com/a/60402728/929209
I actually got it working with node v18.19.0 by using a JavaScript Debug configuration. No need to install a different node version
5

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

Improve this answer

Comments

2

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
Improve this answer

Comments

1

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

Improve this answer

Comments

0

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

Improve this answer

4 Comments

JetBrains IDE Support Chrome Extension is NOT required since 2019.x (moreover, it's not reliable, debugging works much better without it). The key point is the JavaScript Debug run configuration that was created and started for you when choosing Inspect in WebStorm - it is indeed required for client-side debugging. But you can easily create it manually (moreover, WebStorm normally auto-creates it for you when opening Angular cli app). See jetbrains.com/help/webstorm/2019.2/…
@lena What you are saying doesn't apply to my situation.I am running Angular via the NPM CLI. You are talking about setting up a JavaScript debug configuration. They are not the same thing.
sure they aren't. Angular CLI apps are usually run with npm, this is nothing unusual in your setup - you need running scripts to build the application and start the dev server; but you need using JavaScript debug configuration to debug it.
It works which is more than I can say for WebStorm's documentation
0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.