November 14th, 2016
by Jonas Schulte

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.

Events

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.

Extension Events

Page

This “fusebox” view of the running application visualizes which widgets are connected through shared topics.

Extension Page Inspection

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.

Log

The Log tab lists log messages that were created using the LaxarJS logging API. These messages are also logged in the browser console.

Widget Outline

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. Page Inspection

In the screenshot, the mouse cursor is over the widget on the left. The widget has the ID ax-articleBrowserWidget-id3 and the name article-browser-widget.

Getting Started

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.