Is it possible to debug front-end javascript in a hosted Theia instance?

Is possible to use Theia IDE to debug frontend javascript? I would like to be able to use Theia’s debugging interface to step through javascript code, see variable values within a frame, etc. I know this is possible using Chrome Dev Tools, but I’m curious if this can be done within the Theia IDE.

@bendavis yes it is possible given that your application includes the necessary extensions.
In fact, in the upstream repository we have debug launch configurations to debug the example frontend application for instance:

You will need to configure your own launch configuration, and you should be able to debug a JavaScript app successfully. You may want to refer to the documentation provided by VS Code regarding debugging:

@vince-fugnitto what are the necessary extensions to enable client-side js debugging? Also, do you mean open-vsx extensions or build-time theia extensions?

@bendavis you will need extensions which provide debug support for whichever languages you require.
In the case of JS/TS the upstream repository has the necessary extensions already for debugging.

In addition, you can reference the theia-apps apps for other examples of setups for different languages.

Also, do you mean open-vsx extensions or build-time theia extensions?

It depends on the language, for JS/TS the builtins (provided by default in VS Code) already support JS/TS debugging. For other languages, external extensions are required (ex: python).

@vince-fugnitto does typescript-language-features provide vanilla javascript debugging in Chrome?

When I use the launch.json you referenced, it says “chrome” is not a valid type.

@bendavis the example I provided is of course an example, the chrome type is supported with the following extension (which I include in my VS Code setup):

There is also the following related question:

Ah, I see. Thanks! I will have to experiment with this.

@vince-fugnitto it looks like what I want to achieve is likely impossible. I’m building Theia for use in an educational context. Many students will be using school-issued Chromebooks, and those tend to be locked down with Developer Tools disabled.

With Theia running on a server, I don’t think there’s a way for the debugger to launch an instance of Chrome in “debug mode” (unless I’m mistaken – I’ve tried this with our setup and it doesn’t seem to work). I also can’t expect students to have the access to launch chrome from command-line on their computer with a debug port. So, this rules out using the Debugger for Chrome plugin.

I’m hoping to find a workaround to allow Chromebook students to debug their front-end javascript projects in Theia, but right now I’m at a loss. I’d appreciate any ideas anyone has that I might be able to explore.