Debugging in Chrome Dev Tools a Hawtio plugin (AngularJS app) deployed in Karaf

Question

I am running an AngularJS project as a Hawtio plugin and this is deployed in Karaf (as a subcomponent of JBoss Fuse ESB) as a packaged war placed in the deploy folder of Fuse. When I try to debug in Chrome Dev Tools, I have trouble debugging (setting watches, breakpoints, etc.) my JavaScript source codes as these are not visible in the Sources tab. Additionally, my console.logs in my source files do not appear in the Console of Chrome Dev Tools as well as on the Hawtio console.

Is anyone have an idea how to do this?

Thanks.

Answer 1

So for logging, create an instance of Logger in your plugin:

var log = Logging.Logger.get("MyPlugin");
log.debug("Yay, I've got a logger!");

Though console.log normally is captured by the above. You may need to set hawtio's logging to 'Debug' in the preferences if you're not seeing any logs in the console.

It's difficult to deal with breakpoints with an external plugin as dynamically loaded scripts aren't treated the same way in chrome, however you can manually set a breakpoint by putting:

debugger;

in your .js file, see Set a javascript breakpoint in code - in chrome?