Glue42 Developer Tools

Overview

The Glue42 Developer Tools are meant to help both developers and non-technical users to better understand the processes taking place inside the Glue42 application. They deliver useful internal framework information in a very intuitive and user-friendly UI.

This information is especially useful when testing app integration, app performance or app interaction with other apps or contexts within the Glue42 environment. Testing your app behavior will not require the use of dummy apps for the debugging process - you can directly see and interfere with the processes taking place between real apps, in real time. Whether you are a single developer, working on the compatibility of an app with Glue42, or you collaborate with other dev teams and ensuring cross-team method implementation consistency is a must, the Dev Tools give you powerful means to extract and monitor the necessary information.

You can launch each Developer Tool from the Dev Tools Launcher Application accessible through the Glue42 toolbar.

Image of DevTools Launcher

Available applications:

In addition, you can also use the following tools when debugging:

  • Applications View - Glue42 Enterprise offers an Applications View, which provides a general overview of all running hidden or visible applications.
  • Press F12 on a focused Glue42 window to open the built-in browser developer console.
  • You can also add DevTools Extensions supported by Electron to Glue42 Enterprise. See Adding DevTools Extensions

Application Monitor

The Application Monitor gives an overview of all applications running in Glue42 Enterprise and their performance. This tool is useful when you want to gain a general perspective of how an app (or several apps) behaves within Glue42 Enterprise. You can see how much time it takes for Glue42 Enterprise to load your app, how long has the app been running, what potential issues your app has or may cause. You can also compare the performance of different apps.

Toolbar

The Application Monitor toolbar offers grid display controls for:

Button Description
Clear Removes all currently displayed apps from the grid. Use when you want to monitor only newly launched apps.
Show All Shows all cleared apps again.
Pause Freezes the Application Monitor to its current state and ignores all new updates.
Issues Opens a window with issue messages.
Help Opens a browser window with the Dev Tools documentation.

The Show All and Clear buttons do not work when you use Pause.

Toolbar

Right click anywhere on the grid and select Export to Excel from the context menu to export the statistics to Excel.

Export

Rows

Each row represents an application and the information inside it is updated every 2 seconds. If a row is expandable, the row represents an Activity. When you expand an Activity, you can see all apps participating in it.

Activity

  • Report button - opens a new window with a Performance Report for an individual application.
  • Performance Report button - select several apps and click the Performance Report button at the bottom to open a Performance Report for the selected apps.

To focus an application, double click anywhere on its row. This action will also show a hidden application for a limited period of time (about 20 seconds), in case you need to open a browser dev console for it, for example.

Focus

Columns

Columns can be classified in 3 logical groups:

  • Application information - Type, PID, Window ID, State, Glue Version
  • Resource consumption - CPU, Memory, Max CPU, Max Memory (hidden by default).
  • Internal performance information - Creation Time, Load Time (hidden by default), Glue Load and Issues.

Right click anywhere in the application information grid to choose which columns to show/hide. CPU, Max CPU, Memory, Max Memory and Load Time are hidden by default. You can also drag and drop columns to reorder them.

Reorder

Column Description
NAME The name is either the application name or the Activity name registered in the App Manager.
TYPE The type of the monitored application, which can only be Application or Activity.
PID The ID of the window process.
WINDOW ID The Glue42 window ID.
CREATION TIME The exact time the window was created.
STATE The current window state: maximized, minimized or normal.
ISSUES The number of issues found.
CPU The current CPU usage of the process. (There might be multiple windows in one process and all will show the same CPU usage.)
GLUE VERSION The Glue42 framework specific version (JavaScript, .NET, Java) that the app uses.
GLUE LOAD The time that Glue42 Enterprise takes to load your app.
MAX CPU The maximum CPU usage recorded since the start.
MEMORY The memory used by the process.
MAX MEMORY The maximum private memory recorded since the creation of the window.
LOAD TIME The time between the first and the last recorded events for the application - e.g., from creating the window to the last request made.

Performance Report

Performance Report is a tool for finding performance issues of applications running in Glue42 Enterprise. It is useful for delving into performance, requests, issues and it also gives you the ability to compare app performance. To initiate a Performance Report for a single app, click the Report button at the end of the row of the respective application. You can also have a Performance Report for multiple apps - simply select the desired apps and click the Performance Report button at the bottom of the window.

Initiate

The Performance Report visualizes all events happening during the life cycle of an application. The tool shows information about all requests, redirects, console messages and errors, and about predefined issues. There are 4 groups of built in events.

Built-in Event Types

Browser Events

The browser events are defined using the Performance Timing API which has smart mappings defining when the browser considers a page as loaded, how much time CSS and media take to load, etc.

Here are some use-cases we have defined as browser events:

  • TcpConnection - Measure the TCP connection time (the establishing of a connection) using the connectStart and connectEnd events;
  • DNS - DNS lookup time using the events domainLookupStart and domainLookupEnd;
  • DomProcessing - HTML parsing time using the events domLoading and domInteractive;
  • subresourceLoadTime - Sub resources (CSS, images) loading time using the domInteractive and domContentLoaded events
  • loaded - document loading time using the loadEventStart and loadEventEnd events;
  • request - Measure the HTTP request/response transaction time using the requestStart and responseEnd events;

Glue42 Events

All events grouped as Glue events (like connection, interop, appManager, glue, etc.) measure the time it takes to initialize the respective Glue42 components. These events mark the important initialization stages Glue42 goes through so you can use it in your application.

System Events

All Electron events, like refreshes, interactions, events concerning browser/window creation, etc.

Requests

Network requests and redirects made by the monitored application(s).

Event Visualization

Events are visualized in 2 different ways - Data Grid and Timeline.

Data Grid

Data Grid

Gives you an easy filtering, sorting and exporting to Excel. It also has a visual representation in time in the last column.

Timeline

Timeline

The Timeline View gives you the opportunity to see the events on a time chart. If you want to get a better understanding of which apps/events are taking the most time, you can do that from here. You can zoom and drag the timeline chart. It helps you understand when events actually take place in comparison to other events. The chart supports comparison of events with a big time difference between them. Unused space on the chart is cut off and is marked as a "hole".

Requests View

Requests

All requests grouped by application with their time, status code, status text and size.

Console Messages View

Console Messages

A unified view of all console messages of all monitored applications. You can start the Chrome Dev Tools from this tab (which is convenient for hidden applications).

Issues View

Issues

An Issue is a broken rule that has been pre-defined:

  • Long Requests: Request that take more than 2 sec.
  • Duplicated Requests: This informs you when a request was made more than once in a single run - it might be an unnecessary duplicate request.

Context Viewer

The Context Viewer tool helps you edit the contexts and track the changes made. Many applications use some kind of Glue42 context to interact with other applications in the Glue42 development environment. The Context Viewer provides an easy and convenient way for a developer to edit and track changes within the context. This developer tool is most useful when monitoring app behavior within a shared context or an activity.

If you are developing an app, you will naturally want to see how your app interacts with the context:

  • Does it update the context correctly, or does it wipe out the data?
  • Does it respond to a context update accordingly?
  • What are the specific cases when the process breaks?

The Context Viewer supplies you with the necessary visual aid and action options to handle this easily.

In other cases, a rogue app may update the context in a way that breaks the accepted format, in turn breaking all other apps within the same context. And on top of that, the context updates may be happening very fast and very frequently, which will make the task of retracing the processes and finding the breaking point even harder. This makes the Context Viewer all the more useful in a situation like this.

Using the Context Viewer

There are 3 types of contexts in the Glue42 Framework:

  • Global/Shared Context (channels)
  • Activity Context
  • Window Context

Image of context types

Choose a context type and click on a specific context to go to the main Editor page.

Image of Main Editor

The UI consists of:

  1. Sidebar: Here you choose the context to be displayed in the editor.
  2. Editor: You can make all kinds of text manipulations, updates and changes to the context to see how apps react to them. There are two editor modes to choose from: Tree and Code. Use whichever you find more convenient.

There are tooltips on the buttons to help you understand what they do.

Image of Editor icons

The image above shows all icons that may appear on the Editor toolbar:

  1. Window/Activity Closed: you won't be able to make any manipulations to the context.
  2. Save Context: Saves the current context.
  3. Out of Date: indicates that the context displayed in the editor is not the latest one. This icon will appear only if the Live Updates is disabled. Click on it to update the context.
  4. Live Updates: When enabled, the Context Viewer will always display the latest context in the editor. When another app makes a change, the content in the editor will be automatically updated.

The example below demonstrates how to use the Context Viewer to update a context and see the response of your app to the update you have introduced in real time:

Response to a context update

Tracking Context Change

From the Context Viewer you can track how contexts change. You can also compare different states of the context. Click the history icon next to the context name in the Sidebar. You can start tracking the changes in multiple contexts.

Image of context types

  • The Diff Tool is displayed below with a list of all context states and a timestamp. In Global/Shared contexts you can see which app made the change.
  • Click on 2 states to select them as A and B. The differences between them can be seen on the right. The values in red are from state A and the values in green are from state B.
  • Click the button next to each context state to display it in the Editor.

In the example below you can see how to track context changes, if you need to check whether your app updates the context correctly:

Tracking context changes

Interop Viewer

The Interop Viewer combines all methods and streams registered on the Interop service in a single app and lets you invoke them and observe the results.

Glue42 enabled apps usually register methods on Interop to let other Glue42 enabled apps interact with them by invoking those methods. Some of the apps publish streams so other apps can subscribe and consume the published data. Interop Viewer provides a way to easily invoke any Interop method with the desired arguments and observe the results.

If you are working on an app integration in the Glue42 environment, you will want to see what happens when your app invokes methods on Interop, or when a method of your app is invoked:

  • Does your app register methods and streams in the correct format?
  • Does your method work correctly?
  • What will happen when you invoke a method with specific data?
  • What data (if any) is returned upon method execution and how can these results help you in making your app better?

Needless to say, with the Interop Viewer you have all you need to monitor and influence the processes taking place.

In other cases, e.g., when collaborating with other dev teams on multiple apps interacting with each other, it is mandatory to comply with agreed upon general rules - method signatures, method naming, etc. The Interop Viewer lets you effortlessly discover and invoke registered methods, inspect the method signatures and check method names, to make sure they are correct and comply with the general rules. You can see whether another dev team has actually implemented and deployed a method and you can test its functionality too. If another app unexpectedly registers the same method, you will see it and you will be able to avoid the confusion of invoking that method instead. What is more, you will not need to launch an additional "dummy" app to test your registered methods - you can do it with real apps, in real time, and monitor the results in the Interop Viewer.

Interop Viewer can be used in 3 ways:

Discovering Methods

Browsing section

When you start the Interop Viewer from the Dev Tools launcher, you will see the browsing section. It consists of a table with all Interop methods, along with a Filter field. The table has the following columns:

  • Server - the name (and Window ID, if it exists) of the app, which has registered the method
  • Method Name - the name of the method
  • Accepts - an object schema the method expects to be invoked with
  • Returns - an object schema the method is supposed to return
  • Object Types - a list of object types (a.k.a tags) that are associated with the method
  • Streaming - can be either Yes or No and shows if the method is registered as a stream

Sorting

The table supports sorting by any column. To sort the methods in ascending or descending order, simply click once or twice on the desired column title. Click a third time to remove the sorting.

Sorting

Grouping

The table supports dynamic grouping by a single or multiple columns. To group by any column, click and drag its title to the Drag here to set row groups field, e.g.:

  • If you want to see all methods registered by any server, group by Server.
  • If you want to see all servers, which have registered a certain method, group by Method Name.
  • If you want to see all stream and non-stream methods, group by Streaming, etc.

Grouping

Filtering

The Filter field lets you filter the methods by a keyword. When you input a keyword, the table will only show the methods, which have the keyword in their Server, Method Name, Accepts, Returns or Object Types field.

Filtering

Reset

If you want to discard all grouping, filtering or sorting, click on the Reset button on the right side of the filter input. This will reset the table with all methods.

Reseting

If there is a method you would like to invoke, or a stream you would like to subscribe to, simply click anywhere on its table row and the Invocation (or respectively the Subscription) Dialog will open.

Invoking Methods

There are 3 sections in the newly opened tab of the Invocation Dialog:

  • Expected Input
  • User Input
  • Invocation Results

Invocation Dialog

For your convenience, these 3 sections are resizable: to make them suit your needs, simply click on, hold and drag the lines between the sections.

The Expected Input section is very straight forward and shows what this method expects you to input in the User Input section. Note that the app will not crash, and sometimes will not even warn you, if your input is incorrect. What this section does, is merely tell you what this method expects in order to execute. You are still free to feed the method any data you want and observe how it behaves.

The User Input section enables you to write a JSON you wish to execute the method with. If the Expected Input sections shows arguments which are listed as mandatory (no "?" symbol in the argument name), the JSON editor will be prefilled with dummy data, like empty strings, zeros or empty arrays in the required fields. This JSON editor also gives you 3 handy tools:

  • Compact JSON - removes all whitespaces
  • Format JSON - adds needed line breaks and indentations
  • Fix JSON - this button will attempt to fix your broken JSON, e.g. add quotes to the field keys, add commas where needed, etc.

JSON editor

Below the JSON editor you will find a drop-down menu. It lists all the servers, which have registered this method. The app considers any two or more methods the same, if their signatures are identical, that is to say - if their Method Name and Accepts fields are identical. The method you have chosen from the table of methods is preselected, since it is obvious you want to invoke it. But here you can choose to invoke any Interop method (with the same signature) registered by any server.

Selecting server

When you have selected any combination of servers, you can click on the Invoke button, which will actually invoke the Interop method, registered by the selected servers. You can observe the results of the invocation in the Invocation Results section.

Method invocation

The Invocation Results section lists all results from all invocations of the selected Interop method - either successful or failed. This section adds new results at the top every time you hit the Invoke button in the User input section and will continue to do so until you close the entire Invocation Dialog tab. This will reset the results and they will not be shown again, should you choose to invoke the same method once more.

Each Invocation Result presents you with useful data and tools. On top you can see the server name - this shows you to which server the result of the invoked method belongs. On the left side of the server name there is a colored dot. Green means the method was invoked successfully. Red means something went wrong. Also, on top you can find how long the invocation took - how much time has passed from clicking the Invoke button to receiving the result. You can also see the date and time of invocation and make use of the 2 action buttons - Expand/Collapse the result, or Close it altogether. The Close button will irretrievably remove the result from the Invocation Results section.

For a more user-friendly UI, the entire top part of the result is clickable and acts as an Expand/Collapse button.

Collapse/close

An Invocation Result consists of 3 panels:

  • Actions Panel - on the left
  • More Info Panel - on the right
  • Main Panel - in the middle

The Main Panel shows the actual returned result, if the invocation was successful, or the error message, if it failed. Here you can alternate between Returned or Called With - depending on whether you want to observe what the method returned upon invoking, or you want to see the arguments with which you called it.

Returned/called with

The Actions Panel can have one or more actions in it. It will always have the Use Call Arguments action - this will fill in the arguments from the User Input section, with which the method was invoked, so that you can easily edit them and re-invoke the method. Another possible action in this panel is the Copy To Clipboard action. This action will only appear if the invocation was successful and it does exactly what it says - it copies the returned object as an object literal to your clipboard.

Use call arguments

The More Info panel only shows additional info about the server.

Subscribing to Streams

Similarly to the Invocation Dialog, the Subscription Dialog also has 3 sections:

  • Expected Input
  • User Input
  • Subscriptions

The first two sections are identical to the ones from the Invocation Dialog, the only difference being that the Invoke button is now a Subscribe button.

Subscribing

The Subscriptions section is where all the current active and inactive subscriptions reside. A Subscription is generated every time you hit the Subscribe button. When this happens, a new tab (button) is added to the top part of the Subscriptions section. If you close the tab (button) from the "x", this action will unsubscribe from the stream and remove the subscription from the Subscriptions section. The tab also shows the exact time the Subscription was created - this will help you differentiate between multiple subscriptions. The tab contains the current status of the subscription. A subscription may have 1 of 3 statuses:

  • Connected - marked with a full blue dot. This status means that this subscription is still active and listening for data from any associated servers.
  • Disconnected - marked with an empty dot. This status appears when you have manually closed the subscription, or when all the servers, associated with the subscription, kill the connection for any reason.
  • Error - also marked with an empty dot. This status appears when the subscription has trouble initiating.

Tab

The main part of a Subscription consists of 2 panels:

  • Actions Panel - on the left
  • Main Panel - on the right

The Actions Panel will always have a Use Call Arguments action - this will fill in the arguments from the User Input section, with which the stream was subscribed to, so that you can easily edit them and re-subscribe. If the Subscription has a status other than Error, the Actions Panel will have another action - the Disconnect/Reconnect action. This action can stop or resume the subscription. If there is data in the stream, 2 additional buttons will appear - a Clear Results button (waste bin icon), which clears the current subscription results, and an Expand/Collapse button (diagonal arrows), which lets you choose whether the incoming results will be expanded or collapsed by default. Sometimes the emitted data is so much that you may want the panels collapsed and other times you may want the data to be immediately visible. The Expand/Collapse button lets you set that preference.

The Main Panel is the place where all incoming data will be aggregated. You can alternate between the Stream of data and Called With - depending on whether you want to see the incoming stream of data, or the arguments you used when subscribing to the stream.

The Stream is a list of emitted data pieces by the servers over time. Each new piece of data that is emitted by the servers is added at the top of the list. Every data piece is color coded for an easier way of differentiating between servers. The Main Panel has a Legend section, in which you can see the color code for each server, associated with the Subscription. Additionally, you can filter out some of the servers by clicking on them in the Legend. Click again and they will appear again in the Stream.

Color coding

Each piece of data in the Stream has a Copy to Clipboard button, which copies the data to your clipboard. This section also contains some additional information about the server which has emitted the data.

Data sample