10 comments
Comment actions Permalink

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?

0
Comment actions Permalink

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

0
Comment actions Permalink

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)

2
Comment actions Permalink

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" (....)

2
Comment actions Permalink

> 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/...

0
Comment actions Permalink

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

0
Comment actions Permalink

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!

0
Comment actions Permalink

>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/

 

 

 

0
Comment actions Permalink

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
0
Comment actions Permalink

> 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.

0

Please sign in to leave a comment.