Debugging front-end for extension


Currently, the method I use for debugging the frontend for my extension is by rebuilding, starting the electron app and then opening the developer tools. Is there any way to get updates from code changes to an extension’s frontend and not have to rebuild everytime in order to debug?

Kaustav Das Sharma.

@kaustav-aarish there are two approaches when developing, you can either rebuild the necessary components or watch for changes, there is no need to rebuild everything.

For rebuild (example @theia/getting-started extension is modified):

  1. npx run build @theia/getting-started // rebuild the necessary extension
  2. npx run build @theia/example-electron // rebuild the example application
  3. yarn start:electron // start the example application

For watch (example @theia/getting-started extension is modified):

Use multiple terminal tabs for each step:

  1. build @theia/getting-started and @theia/example-electron once
  2. npx run watch @theia/getting-started // watch the getting-started extension for changes
  3. (cd examples/electron && yarn start) // start the example app
  4. (cd examples/electron && yarn watch) // watch the example app so it can listen to changes to other extension
  5. reload the application, the changes should apply