Debugging Javascript plugins

[wreid]

Good day, we're using the Oxygen Web XML Editor embedded into our web application, version 25.1, using the WAR distribution along with tomcat 9.0.88

We have a number of internally developed plugins and frameworks, 3 of which are Java based but our main UI and actions plugin is Javascript based. We compile our JS one to the /web/plugin.js file and are using the plugin.redirect file. We want to be able to debug our javascript code (specifically in VS Code). We are already able to debug the Java based code through the remote debugger like you would with Intellij or Eclipse.

If possible can we have some guidance about UI / plugin development best practices and how to debug this code? Of course we are able to use Browser debugging tools but in IDE breakpoints are preferred for our use case.

Our goals are to use react and other component packages to develop things like custom modals/pop ups, menus, etcetera.

Thanks!

[wreid]

For some additional context this UI plugin adds a number of new configurations, actions, and menus. If a plugin is not the proper utility for these types of responsibilities we can adjust to whatever we need.

[cristi_talau]

Hello,

One option to debug your code is to run webpack in watch mode to continuously build your code in the "web/" folder of the plugin. If you disable Js name mandling, the output will be very similar to your code. You can add "debugger" statements in your IDE and have the browser stop at them when debugging.

Regarding your other question, a framework can also be used to customize menus or the toolbar for a specific document type. If you have generic actions that do not depend on the type of the edited document, a plugin works fine. If you want to display a different toolbar according to the type of edited document, you can use a framework.

Best,
Cristian

[wreid]

Hello,

One option to debug your code is to run webpack in watch mode to continuously build your code in the "web/" folder of the plugin. If you disable Js name mandling, the output will be very similar to your code. You can add "debugger" statements in your IDE and have the browser stop at them when debugging.

Regarding your other question, a framework can also be used to customize menus or the toolbar for a specific document type. If you have generic actions that do not depend on the type of the edited document, a plugin works fine. If you want to display a different toolbar according to the type of edited document, you can use a framework.

Best,
Cristian

Hi Cristian, thanks for your reply!

I actually have such a setup working now with Vite, I was hoping we could get full IDE based debugging (with breakpoints and so forth) without needing browser tools -- but it sounds like this may be what's required.

As for frameworks, thanks for that information, it sounds like we are using them correctly -- we have a handful to support custom schemas.

All the best!