Debug issues

I can’t figure out how to debug theia browser modules. Breakpoints set in VSCode are marked ‘unbound’ and won’t fire.

It seems like some general issue with theia build pipeline, because it happens on latest theia master, on our custom IDE that depends on theia packages, and even some minimal examples I’ve built for testing purposes. There are quite a lot of warnings during build, same as described in Theia build error All seem to point to source map issues, possibly related to webpack migration to v5.

I’ve also checked an old version of our IDE based on theia 1.13, there are no warnings or any issues with breakpoints in theia modules. If anyone can give me any hints on how to fix this, I’ll be extremely happy.

The warning from the other post are due to Inversify simply not publishing their source maps. This isn’t a critical issue.

Though you are right that the migration to webpack 5 is the cause of not being able to debug the frontend from VS Code. I always used my browser’s devtools directly so I never noticed, thanks for pointing it out.

We had fixed a similar issue to debug the Electron frontend, but the same seems to apply to the web.

This should fix it:

In the meantime, you can add something like the following to your debug configuration:

      "sourceMapPathOverrides": {
        "webpack://<name-of-your-app>/*": "${workspaceFolder}/<path-to-your-app>/*"
1 Like

Thank you so much. It didn’t work out of the box with sourceMapPathOverrides, but, looking at your PR, I’ve traced it back to incorrect webRoot value in VSCode launch config.