Diagnostics Panel

The Diagnostics Panel is a client-side control that provides a set of built-in tools to help configure and troubleshoot PureWeb client applications during the development phase.

The settings from the Diagnostics Panel are not saved when the session ends. If you are satisfied with a configuration change that you tried within the panel, you must implement it programmatically in your code. Cross-references to the relevant instructions are provided where appropriate below.

In addition to the Diagnostics Panel, you can also use logs and platform-specific debuggers to troubleshoot your PureWeb applications.

Adding a Diagnostics Panel to a Client

When adding user interface elements to a PureWeb client, developers use primarily the native elements present on the client platform. The same applies when adding the Diagnostics Panel. For example, in HTML5, the panel is added as a div; iOS, it is added using Storyboard.

HTML5

In your .html file, you would add:

<div id="pwDiagnosticsPanel"></div>
<script>pureweb.client.diagnostics.initialize();</script>

The panel gets initialized on connect; to make this work, add the following in your .js file:

  •   a listener for connection state change events, for example:
    pureweb.listen(pureweb.getClient(), pureweb.client.WebClient.EventType.CONNECTED_CHANGED, onConnectedChanged);
  • a handler that runs the script to initialize the panel on connect; here's the relevant excerpt from the HTML5 Scribble sample code:
    function onConnectedChanged(e) {
    	if (e.target.isConnected()) {
    		var diagnosticsPanel = document.getElementById('pwDiagnosticsPanel');
    		if (diagnosticsPanel) {
    			pureweb.client.diagnostics.initialize();
    		}
    	}
    }

iOS

To add the Diagnostics Panel in an iOS client, you add the view controller to your storyboard using Interface Builder. The view controllers that you need can be found in the sample projects:

  1. Open one of the existing storyboards included in the sample Scribble or Asteroids application. See Building a Sample iOS Client for information on getting the source files and installing the necessary pods.
  2. Select the diagnostics controllers (Diagnostics View, Tab Bar, Trace View, App State View and Options View).

  3. Copy these scenes to the storyboard of your own application.
  4. Add a modal segue between the Diagnostics button and the Diagnostics View Controller.

Most sample applications include a Diagnostics Panel; review their code for examples of how this panel has been added.

 

After you've added the panel in the code, do this to access the panel from your client:

  • For browser-based clients, provide the _diagnostics=true parameter in the client URL; see Application URLs for a list of supported parameters when launching client applications.
  • For mobile app clients, tap the relevant button in the interface; for instance, in the iOS sample application this button is labeled Diagnostics.

Options Tab

The Options tab is used to configure image type and quality, which impacts bandwidth.


Client-Side Filtering

The Client side filtering checkbox provides a shortcut to toggle client-side filtering on and off, and see the impact without the need to recompile. Filtering is enabled by default.

Client-side filtering is used to automatically filter out duplicate or redundant input event commands sent from the client to the service, thereby reducing bandwidth. For example, when drawing in the Scribble sample application, the client will send enough commands to the service to ensure the shape of the scribbles is displayed correctly, but will filter out the rest. This can prevent performance problems on the service side; an unfiltered sequence of consecutive mouse moves, for instance, could potentially trigger a expensive sequence of renders in the service.

In the APIs, this filtering is governed by the CommandFilter interface. The default implementation, DefaultCommandFilter, aggregates view resize and ping events, as well as mouse move and mouse wheel events. You can also create your own implementation of CommandFilter; see the API reference for more information.

  Command filters do not filter any command that your client sends to the service using queueCommand.

The changes made in the Diagnostics Panel will not be saved when the session ends. If you want to programmatically disable or enable the client-side command filter, set the /PureWeb/ClientCommandFiltering element in application state to either true (enabled) or false.

Encoding Configuration

The Options tab of the Diagnostics Panel provides a user-friendly visual interface for manipulating the image mime type and quality, in both interactive and non-interactive mode, and to see on the fly the impact of these changes. It allows you to try out various configurations before committing to one in your code.

For more information on image encoding and transmission modes, see the Defining Image Encoding and Quality topic.

To edit the configuration in the Diagnostics Panel:

  1. Select a mime type (image format) from the drop-down list for the interactive mode, and repeat for the non-interactive mode.
  2. Set a quality level value for the interactive mode by sliding the Quality cursor, and repeat for the non-interactive mode. Accepted values range from 0 (lowest quality) to 100.
  3. Click Apply to commit the changes.

Interact with the view to see the impact of the changes.

 

The settings from the Diagnostics Panel are not saved when the session ends. If you are satisfied with a configuration change that you tried within the panel, you must implement it programmatically in your code. See Defining Image Encoding and Quality.

Trace Tab

The Trace tab displays any information that developers choose to trace within a client application. In the example below, the developer has chosen to trace color changes within the sample Scribble application.


By default, no information is traced. To set a trace, use the client API’s PureWeb.Diagnostics.Trace namespace. For example, the code for implementing the above trace in an HTML5 client would be as follows:

pureweb.client.diagnostics.trace("Color is now: " + e.getNewValue());

The Diagnostics Panel’s Trace tab also offers some additional functionality:

  • To change the trace size (number of traced transactions stored in memory), type the desired size in the text box provided.
  • To reset the trace size back to the default value, click the Reset Trace Size button.
  • If the trace size is a value larger than can be displayed in the Trace tab, the system will display a scroll bar on the side, which can be used to navigate to the bottom and see the latest lines added to the trace. When the Autoscroll Trace check box is selected, the system will automatically scroll to the bottom.

In addition to this trace feature, the PureWeb server and service application also write messages to log files, which are displayed on the server. For more information, see Logs.

AppState Tab

The AppState tab allows you to see the application state at a glance.

It is a great tool to quickly determine how user interactions in the client are reflected in application state.


The content of the tab is updated in real time. Simply perform operations in your client while the tab is displayed and see how the content of the application state tree changes accordingly.

Should the content of the tab not update automatically for whatever reason, click the Refresh button.

Bandwidth Tab

The Bandwidth tab is used to test the network connection between the PureWeb server and the client application to measure latency and bandwidth and help assess network conditions.

To test latency, enter the number of iterations that should be included in the test and click the Test Latency button. The system will return results that include minimum, average, and maximum latency.

To test bandwidth, enter the number of payload bytes and click the Test Bandwidth button. The system will return results that include minimum, average, and maximum bandwidth.

Profiling Tab

The Profiling tab is available only in the Diagnostics Panel for HTML5 client applications.

Click the Enable Profiling checkbox to display a profiling report in XML format. This report contains measurements on how long it takes the PureWeb application to perform certain actions, such as building requests and parsing responses. It shows how much CPU time and bandwidth are consumed by various aspects of your application.

An example of this report is shown below.