Breakpoints are not triggered when specifying a URL in the configurations for "Chrome Debug"

[Si-So]

Steps to reproduce:

1. Create a new typescript application (I created the angular example application "tour of heroes" which can be downloaded from here: https://angular.io/generated/zips/toh-pt6/toh-pt6.zip)
2. Import the Angular application into eclipse
3. Set a breakpoint in an ngOnInit()-function in one of the *.ts-files (I chose the "dashboard.component.ts")
4. Start the angular application (e.g. "ng serve")
5. Create a "Chrome Debug" instance
6. Tick the checkbox for "URL"
7. Enter the URL of the angular application (e.g. http://localhost:4200/)
8. Start the debug session (make sure that no chrome window is currently open (at least on windows) or else the debug session is not properly started; I believe the reason for this is Issue 927)
9. The break point from step 3. in the *.ts-file is ignored even though the breakpoint should be triggered.

I can give a more detailed explanation on how to setup the angular example project if necessary.

Environment

Eclipse 2023-06

Analysis

I looked into the documentation for vscode-chrome-debug (which can be found here: https://github.com/microsoft/vscode-chrome-debug#launch) to see which parameter is missing. When specifying an URL, the webRoot folder must also be specified to map the source files to the URL.

After looking through the source code of wildwebdeveloper, I realized that the webRoot parameter is never set and thus not breakpoints are triggered.

Strangely enough the webRoot parameter is set when the firefox debugger is launched (the firefox debugger also does not work, but I believe for other reasons).

[wesleybl]

Start the debug session (make sure that no chrome window is currently open (at least on windows) or else the debug session is not properly started; I believe the reason for this is Issue 927)

@Si-So I think that for debug to work, Chrome has to be closed (at least on Ubuntu). That's what I said in #927. Did you try to close Chrome before starting debug?

[wesleybl]

@Si-So I tried to debug your application and it didn't work, even with Chrome closed.

One thing you have to check is which port the debug should inspect. When you start the application, you must specify the port with the --inspect parameter. This port must be specified in the debug configuration in Eclipse. The default port is 9229. I tried this port but it didn't work. But I'm not sure what the debug port is on your npm start. I tried changing the start script to ng serve --inspect=9230 but it gave an error.

See: https://nodejs.org/en/docs/guides/debugging-getting-started

[wesleybl]

@Si-So now I see that you are talking about "Chrome Debug". But all I said is about "Running Chrome Debug Instace". Sorry for the confusion.

"Chrome Debug" never worked for me.

[Si-So]

No problem.

I am currently working on a pull request - I believe I will finish the work tomorrow...

[wesleybl]

@Si-So do you know what the difference between Chrome Debug and Running Chrome Debug Instace?

[vrubezhny]

@wesleybl The difference if that Chrome Debug starts a new instance of Chrome browser for debugging while with Running Chrome Debug Instance` it tried to connect to an already running browser.
Unfortunately both variants have numerous problems, including the well-known problems of vscode-chrome-debug extension which is an archived project and is not in development anymore.

[wesleybl]

while with Running Chrome Debug Instance it tried to connect to an already running browser.

Weird is that it only works when Chrome is closed(#927). In other words, it works the same as Chrome Debug.

Thanks for clarifying!

[wesleybl]

@Si-So I tested a react app with Chrome Debug and it worked, when Chrome is closed. But your app didn't work.

[Si-So]

I believe Issue #696 and Issue #661 are duplicates of this issue.