unbound breakpoint in browser code when "Launch Browser Frontend" in VSCODE

[stat0s2p]

Environment

os version:macox 10.15.6
vscode version:1.49.0
google chrome version:85.0.4183.102
theia version：v1.5.0
Debugger for chrome extension:4.12.10

Description

i have run ”Launch Browser Frontend“.after it open new chrome browser,i add a breakpoint on examples/api-samples/src/browser/menu/sample-menu-contribution.ts L34 but it is grey and show unbound breakpoint.

can anyone help me debug browser code in VSCODE?

[vince-fugnitto]

@stat0s2p thank you for the discussion, have you viewed the documentation regarding debugging?

[stat0s2p]

Yes.I build and debug my project follow these steps:https://github.com/eclipse-theia/theia/blob/master/doc/Developing.md#debug-the-browser-examples-frontend-and-backend-at-the-same-time.

the backend nodejs code breakpoint in vscode work oky but chrome breakpoint not work.
I found ts file in chrome devtools source panel then set breakpoint,it not work too.

Besides,I install nodejs12 and python in conda virtual environment instead of install them globally to avoid conflicts of other projects.should these has some effects?

[vince-fugnitto]

Besides,I install nodejs12 and python in conda virtual environment instead of install them globally to avoid conflicts of other projects.should these has some effects?

I do not think so no.

I verified myself and I am able to successfully debug both the browser frontend and browser backend simultaneously using the steps mentioned here: https://github.com/eclipse-theia/theia/blob/master/doc/Developing.md#debug-the-browser-examples-frontend-and-backend-at-the-same-time.

Note that I am using vscode to launch both configurations when using theia as a workspace.

[stat0s2p]

ok,maybe some problem with my environment.I will install a new system and test it again in working days.Thank you very much.

[stat0s2p]

@vince-fugnitto
Dear,I installed a fresh ubuntu desktop os in vmware and follow every steps in https://github.com/eclipse-theia/theia/blob/master/doc/Developing.md but it is still has gray break point in vscode.

then I add a breakpoint in chrome dev tools,I found it worked and active the vscode source file,but if I add a breakpoint direct in vscode source,it is still gray.

also,If I add break point in examples/api-samples/src/browser/menu/sample-menu-contribution.ts,it canot active the breakpoint both in chrome devtool and vscode source file.

althrough I can set breakpoint in devtool,but is too hard to location the code in devtool.Is a way that I can set a break point in vscode directly?

[vince-fugnitto]

@stat0s2p I'm not sure what is incorrect about your setup, following the guide it worked correctly for me:

1. add breakpoints (added to both frontend and backend code (browser and node)
2. started a debug session with launch browser backend
3. started another debug session with launch browser frontend (this essentially will launch the application in a browser window).

It is possible you are experiencing the following bug in vscode (with their new preview debugger): microsoft/vscode#102493.
A possible solution is to the stable debugger in the preferences:

    "debug.javascript.usePreview": false

This worked correctly for me:

[stat0s2p]

I add "debug.javascript.usePreview": false in my user config and finaly the debug breakpoint enabled. very thank you for your help.