Debugging in Angular not working? Breakpoints never hit

Debugging angular works out of the box for me.

Can you recreate the issue using a new Angular Cli app? What IDE version do you use?

I am using the last version of everything, ultimate. Anyway I made it work following this guide https://itnext.io/debugging-your-angular-application-in-intellij-idea-411a9b08759f

Strange - normally Remote URL mappings are not required to debug Angular apps served by ng serve.

Neither the  JetBrains IDE Support Chrome extension is required (if you have it installed, I'd actually recommend turning it off in Settings | Build, Execution, Deployment | Debugger | Live Edit as it's unstable and not up-to-date)

Thanks for the info. You're right, the chrome extension doesnt seem to be needed. I guess that I had to first "Run Angular CLI Server", and then "Debug Angular Application"... ( https://www.jetbrains.com/help/webstorm/angular.html )

Instead I was just doing "Debug CLI Server" (....)

> I guess that I had to first "Run Angular CLI Server", and then "Debug Angular Application"... ( https://www.jetbrains.com/help/webstorm/angular.html )

Yes, sure - "Run Angular CLI Server" starts the app (by running ng serve), and "Debug Angular Application" opens the browser, attaching the debugger to page. These steps are described in https://blog.jetbrains.com/webstorm/2017/01/debugging-angular-apps/...

In the help link (not the blog article) it's explained, and formatted, better. So harder to miss, especially when speedreading and in a hurry

Thanks, John! Your case saved me hours!
Elena, you need to update the blogpost, the info there is confusing, and it's the first thing you see when googling the corresponding topic!

>the info there is confusing

Please could you clarify what's wrong with it? The first step mentioned in the blog post is starting the server with npm start:

• Run npm start to get the app running in the development mode.
  You can do this either in the terminal or by double-clicking the task in the npm tool window in WebStorm.
• Wait till the app is compiled and the Webpack dev server is ready. You can see the app running in the browser at http://localhost:4200/
• Check if a run/debug configuration named Angular Application already exists in WebStorm. If not, create a new JavaScript debug configuration in WebStorm (menu Run – Edit configurations… – Add – JavaScript Debug) to debug the client-side TypeScript code of your app. Paste http://localhost:4200/ into the URL field.
• Save the configuration, place breakpoints in your code and start a new debug session by clicking the Debug button next to the list of configurations on the top right corner of the IDE. The browser will open on http://localhost:4200/

If you are like me, and you want to see the line numbers as well for the NGXLogger, which you might be using, it took you probably ages to find out that you have to add --eval-source-map to your `ng` command for NGXLogger to be able to actually do that. This is broken for a while now and has the side effect, that it also seems to break the debugging for WebStorm.

After following

https://blog.jetbrains.com/webstorm/2017/01/debugging-angular-apps/?_ga=2.232824798.1797096833.1579949999-366091200.1573768370&_gac=1.150886980.1579851407.Cj0KCQiApaXxBRDNARIsAGFdaB8E5u4U5mAxXMGdesxj2EweCBcjbmpXJcJNSNtsaIR7PDJTkCPl-1YaAk9GEALw_wcB

and

https://itnext.io/debugging-your-angular-application-in-intellij-idea-411a9b08759f

It still did not work.

So, if you're running something like

ng serve --ssl --host 0.0.0.0 --port 4201 --eval-source-map

try this instead:

ng serve --ssl --host 0.0.0.0 --port 4201

> I guess that I had to first "Run Angular CLI Server", and then "Debug Angular Application"

Thank you John!  You made it more clear than the instruction on debugging an Angular application (https://www.jetbrains.com/help/pycharm/angular.html#angular_running_and_debugging)

Don't know if it's just me but on that page, it laid out as if the two boxes titled "Run and Angular application" and "Debug an Angular application" are separate. 

I already have been doing the first part all this time and couldn't get it to break on the set breakpoint, that's why I ignored the former and only followed the latter because it specifically titled "Debug".

It immediately started working after I tried what you said, and now I understand that the page really is saying you're supposed to do one after another.

Just wanted to come here to say thanks. You've saved me from wasting time digging around more even though I actually found the answer but was just confused.

As Elena stated quite a while ago (13 august 2019):

Neither the  JetBrains IDE Support Chrome extension is required (if you have it installed, I'd actually recommend turning it off in Settings | Build, Execution, Deployment | Debugger | Live Edit as it's unstable and not up-to-date)

My debugger problems were solved once I switched off the Live Edit. 

Chrome extension doesn't work reliably in new Chrome versions (WEB-37230), and it seems that the most recent Chrome update has introduced breaking changes that made it non-functional. Since WebStorm 2018.3 this extension is not required for debugging/Live Edit, it's not actively maintained, we plan to sunset it completely in the upcoming release

In my case, I got debugging to work by following advice from Stackoverflow, changing the value of

projects > [project] > architect > build > configurations > development > sourceMap

in angular.json from false to true and by making sure the application is launched with the correct configuration:

ng serve --configuration development`

Please remember that currently "Debugging of Angular applications is only supported with Node.js version 16 and earlier."
https://www.jetbrains.com/help/idea/angular.html#create_new_angular_app

This was the reason why my breakpoints were not hitting. After downgrading from node 18 to 16 everything worked fine. 

Indeed, Node.js 17+ is known for network connectivity issues because of changes in respect to the host system's DNS resolving, this can cause problems attaching the debugger, loading sourcemaps, etc. For some reason, this problem most often exhibits itself when debugging Angular. If downgrading Node is not an option, you can try adding --host=127.0.0.1 parameter when launching ng serve

opened issues:

https://youtrack.jetbrains.com/issue/WEB-53610/Angular-app-cant-be-debugged-when-using-Node-17 

Please try a workaround from https://youtrack.jetbrains.com/issue/WEB-53610/Angular-app-cant-be-debugged-when-using-Node-17#focus=Comments-27-5546282.0-0 - does it help?