We released an extension for the Google Chrome Browser to expand the developer tools with a LaxarJS tab. When running an application with LaxarJS v1.3 or newer and with activated “Tooling-API” (Key
tooling.enabled in the LaxarJS-Configuration), the developer tools are displaying information about the application such as events and page configuration.
It contains a handful great features. Inside of the developer tools there are three tabs Events, Page and Log. Each view contains information about the running LaxarJS application.
The events tab displays the latest publish/subscribe events of the currently running application, including subscribe/unsubscribe calls, as well as publication and delivery of events. Events may be filtered by name, pattern, or source/target.
This “fusebox” view of the running application visualizes which widgets are connected through shared topics.
It is possible to rearrange the boxes to get a better overview of the page setup, and to choose whether isolated widgets and containers are rendered or not. When a widget is select on this view, the events on the Events tab are filtered and only events which are received or published by this widget are shown.
The Log tab lists log messages that were created using the LaxarJS logging API. These messages are also logged in the browser console.
The button “Turn on widget outline” on the right side of the developer tools tab allows to activate a drawn outline around each widget. When the mouse cursor is over a widget its ID and its name are displayed in the left corner of the browser window.
In the screenshot, the mouse cursor is over the widget on the left. The widget has the ID
ax-articleBrowserWidget-id3 and the name
To get the extension for Google Chrome visit the Chrome Web Store.
We are developing a Version for the Mozilla Firefox now. Until then, by adding the laxar-developer-tools-widget to your LaxarJS application, you have the same features in any modern Browsers.