Angular debug doesn't work with Chrome

Debugging should work using the steps from https://www.jetbrains.com/help/idea/2021.1/angular.html#angular_running_and_debugging_debug; what Node.js version is used to running ng serve? Please share a screenshot of Settings | Languages & Frameworks | Node.js page

Hi
thanks for your quick reply ...
node version seems to be 10.14.2

Regards
-G

There shouldn't be any issues when using this Node version

Does debugging work with new Angular CLI apps?

Sorry, but in my team we don't use Angular CLI ... honestly I don't how to run it :-(
-G

In File > New > Project..., choose Angular CLI

Hi Elena
1st, I would underline, that my project is a "Spring" project and the Angular is the layer to handle the front-end part.

2nd, even if I'm not completely sure to have done everything fine or in a proper way, seems now I have an angular project. (see 2nd img below)
Unfortunately, the debug from Chrome still doesn't work.
here the console log, where I see an error related to WebSocket - I don't know if it is useful ...

Hmm... have never seen anything like this. Does it only happen when debugging? Please run ng serve in terminal, then open the localhost:4200 URL in Chrome and look at the Dev Tools console

The output from Intellij terminal

then the screenshot of chrome browser

Hmm.. I'm confused. This doesn't look like a new CLI app, it's your actual app, right?

Can you share a project the issue can be repeated with?

Sorry. I cannot share here the project due to confidentiality reasons.
We can arrange a MS Team session where I can share my screen showing what happens live. Would be really great.
Let me know a way to get in touch in private mode.
Tnx in advance. 

Screen sharing won't help in resolving such issues unfortunately, we need a project to play with

Could you share your idea.log, BTW (Help > Show Log in Explorer)?

I need to talk and get approval from my line managers. Anyway, the project is quite big (2.3Gb). I'll need a channel to send it to you 
Meanwhile, here the log you asked

[deleted]

Nothing in the log that looks related. I deleted it, sorry - it's so huge that makes the thread unreadable

You can upload the project to JetBrains Uploads Service: https://uploads.jetbrains.com

Hi Elena I'm back on the issue ... as explained I cannot share/upload my project with you. Sorry.

Anyway I did other test and I discovered that in truth the debug works fine in my MAIN page as described by you or offical support  - example I can stop on a breakpoint in login page. It's a good news.

But in my scenario I still cannot run the debug. Probably, I'm in a corner case. 
I want try to explain: after a few initial steps by the user (login and project selection - here debug works) editing the project a new page (url) is opened where the user can acting on project data. Here, on this new page (url) the debug doesnt'work.
I don't know if this detail can help understanding, finding the fix.
Thanks in advance.

Is this new page hosted on the same server, or you are re-directed to some other host?

same server 
http://localhost:4200/#/login   debug works
http://localhost:4200/#/design/27/map   debug fails

this should work

when you open your app in Chrome, can you see the actual source files that are executed on accessing http://localhost:4200/#/design/27/map URL in Chrome Dev Tools, Sources tab?

Yes !

below 3 snapshots that could help - pls, note in each browser page there is the DevTool opened on the bottom only to show the sources

the main page, with breakpoint active and running from Intellij

the project page opened in a new page and separated tab. You can see that breakpoint fails and doesn't stop

I copied the url of the project page (2nd tab) into address bar of the first tab.  Breakpoint works fine!

As quick analysis, seems to me that breakpoints work only on the browser tab opened by Angular javascript Debug launcher. Never in tabs opened by an user action from the initial one.

>As quick analysis, seems to me that breakpoints work only on the browser tab opened by Angular javascript Debug launcher. Never in tabs opened by an user action from the initial one.

Hmm... Normally, if you specify the app main URL in debug configuration and then use the app controls (press buttons/links/etc.) to navigate between pages, debugging should work. But, if you just open another tab in browser and enter the page URL there, debugger won't be attached to this page

So as final statement my understanding is that Angular Javascript debug works only on the tab opened by debugging itself.
Not on children tabs opened starting from the initial one.
Is it correct ??

No sure I understand what you mean by tabs opened by the debugger - please could you clarify? It's not a debugger that opens pages, this is done by the user when he interacts with the application during debugging...

yes. sure. I recap it :
- I launch Angular debug from IntelliJ. It opens a browser with only one tab where runs UI of my web application - debugging and breakpoints placed in intellij works fine.
- a user action opens a new, child tab (let's say project detail) having a its own URL different from the initial one, even if always in the same web server. Here debugging and breakpoints don't work.
- if I copy the URL of 2nd tab (project detail) and paste into address bar of the initial one - I get that debugging and breakpoints work fine again.

So, my understanding is that Angular debug is "listening" ONLY the single Tab it has opened when it started. It doesn't "listen" any new child tabs opened starting from the initial one, even if working on the same web server.

Yes, that's true - debugger attaches to a certain tab, new tabs won't have it attached