loio

6ec18e80b0ce47f290bc2645b0cc86e6
view on: demo kit nightly build | demo kit latest release

Diagnostics
The Diagnostics window available in OpenUI5 is a support tool that runs within an existing
OpenUI5 app.
To open Diagnostics, use the following shortcut: CTRLSHIFTALTS in the app.

Technical Information
This section provides the same features as the technical information dialog. You can view
the technical details of the app, and turn on the debug sources. For more information, see
Technical Information Dialog.
In addition, you can see the following information:
• The jQuery version that is loaded from the server. If you want to use a specific jQuery
feature, you should check whether the feature is supported in the loaded version.

• The bootstrap configuration, where you can check, for example, the resource root, the
theme, or the libraries. The libraries should be listed in the libs configuration
parameter or in the descriptor file (recommended), see Descriptor for Applications,
 Components, and Libraries. To improve performance, remove unused libraries and
add the libraries that you use and are not yet listed. These libraries are loaded as a
preload file. We recommend to also add the async configuration option to the
bootstrap. This configuration option enables asynchronous loading of modules and
preload files and can, thus, further improve performance. For more information, see
Performance: Speed Up Your App.

• The computed configuration

• The version of each library that is available and of the libraries that are loaded

• A list of all loaded modules

• URI parameters that are set

• End-to-end (E2E) trace function

The E2E Trace is used to create an XML file that traces the communication to a
different part of your app.

Start the E2E trace and navigate in the app. Afterwards, a dialog opens indicating that
your transaction has finished. Choose OK to continue running the current trace.
Choose Cancel to stop the trace and display the result in a new window.

After stopping the trace, you can view the result and (optionally) upload it to a server
by entering a host name and a port number, and then choosing Submit.

Control Tree
The control tree shows all controls that are used in the app. You can select controls either
directly in the app by choosing CTRLSHIFTAlt and clicking on the control, or by selecting
the control in the control tree.
The following functions are available in the dialog:
• On the Properties tab, you can change the defined properties of the selected control,
and you can add or remove breakpoints. Use the respective checkbox to add or remove
a breakpoint for the get and set method of a control property.
• The Binding Infos tab shows all existing bindings for the selected control together with
additional information. To update the binding, choose Refresh Binding.

You can also see the binding context for the selected control. To navigate to the
respective controls, use the hyperlinks.

• On the Breakpoints tab, you can add or remove breakpoints for methods on object
level. You can either select the method from the dropdown box, or use auto-
 completion. To set the breakpoint, select the method and choose Add breakpoint. To
remove a breakpoint, select the red x.

For more information, see Breakpoints on the Object Level.

• Many code samples are written in JavaScript. To facilitate the conversion of these code
samples into XML or HTML, OpenUI5 provides a generic conversion tool. To run the
tool, proceed as follows:

1. Select the root UI area in the tree on the left-hand side.

2. Open the Export tab and choose Export.

3. Open the ZIP archive and extract the files to your file system.

If your app does not contain views, the content is put in one view in the output. If your
app contains views and all views are loaded, the content is output as separate files.
Note: The conversion captures the runtime status of the app. This can differ from the build declaration.

Breakpoints on the Object Level

In the Control Tree of the Diagnostics window, you can set breakpoints on the object level.
1. Open the Control Tree view of the Diagnostics window.

2. Select a control in the tree.

You can also press and hold CtrlShiftAlt and select a control in your app to select it in
the tree.

3. Select the Breakpoints tab on the right.

4. From the dropdown list, select the method for which you want to set the breakpoint
and choose Add breakpoint.

The selected methods are listed below the dropdown list.

5. Open the developer tools of your browser. Whenever the selected methods are called
for any instance on the control, the code execution is paused in the debugger.
6. To remove a breakpoint, select the red x.

Debugging
The Diagnostics window provides you with the following features that help you when
debugging your app:
• You can switch the OpenUI5 version you want to debug with.

• You can set breakpoints for methods on class level.

Switching the OpenUI5 Version

Open the Diagnostics window with the shortcut CTRLSHIFTALTS.

At the top of the Debugging view, you can configure a custom URL from which the
application should load OpenUI5 the next time that the app opens.
Either select a known OpenUI5 installation from the dropdown box, or enter a different
URL that points to the sap-ui-core.js file within a complete OpenUI5 runtime.
Once you have entered the URL, press Activate Reboot URL. When you then reload the
application page, the application loads OpenUI5 from the alternative URL. This only
happens for the next single reboot; after that, OpenUI5 is loaded again from the standard
URL referenced within the app.
This feature can be used to test an application against a newer or older version of OpenUI5
as part of compatibility testing, or for verifying a bug fix or regression.
Breakpoints on the Class Level
In the Debugging section of the Diagnostics window, you can set breakpoints on the class
level.
1. Open the Debugging view of the Diagnostics window.

2. Select a class from the dropdown list or enter the name of the class and choose Add
Class.

The selected class is now visible below the dropdown list.

The number next to the method name shows the number of methods that belong to
the class and the number of methods for which a breakpoint is set.

3. Select the class. On the right side of the view, you can now select methods of the
selected class from a dropdown list.

4. From the dropdown list, select the method for which you want to set the breakpoint
and choose Add breakpoint.
The selected methods are listed below the dropdown list.
5. Open the developer tools of your browser. Whenever the selected methods are called
for any instance of the selected control, the code execution is paused in the debugger.

In the call stack you find the method for which you set a breakpoint.

6. To remove a breakpoint, select the red x.

XML View and Templating Support Tools

This section of Diagnostics shows the code of the loaded XML view exactly as you would see
it in your development environment. This way, you can check and test your XML code
without the need to switch environments. If your app is connected to a remote service or a
back-end system, you can also view the XML metadata.
Before you can use this feature, restart your app in Support Mode (with the sap-ui-
support=true URL parameter added to the URL or your app).

XML Metadata
|You can display XML metadata by expanding the related nodes in the tree. This helps you
to better understand how the data is stored in the back end and which properties it has.
This is especially important when investigating binding issues.|

XML
metadata of a service with three main entity sets: Product, ProductCategory, and
FeaturedProduct|
XML Code
|When you expand an XML view in the tree, you can display the XML code.You can choose
the following options for this view:
• You can choose which kind of IDs you want to see:

– IDs as they are in the DOM (option Show Real IDs)

– IDs as they are defined in the XML view (option Show XML View ID)

If no stable ID is defined in the view, the ID tag is empty (id=" "), if there is an ID, the value
is set to true (id="true").
• You can show or hide the namespaces to improve readability of the code.
Warning: The below table contains complex elements that cannot not be displayed within a simple markdown
table. It has been automatically converted to an HTML table. It’s design may vary from the source page!

• Name of the control with a link to the API Reference and its ID in the DOM tree

• Instances that are cloned in the control with their IDs

• Attributes and properties of the control with their values

Similar to the Control Tree section of Diagnostics, you can change those values here for
testing purposes.
• Methods that are available for the control.
Note: When you select, for example, an aggregation, you see the name of the control which has this aggregation or
the name of the parent.
Visualizing User Interaction
With this feature, you can collect and visualize the performance data collected for the
interaction steps in an easy and intuitive way. In addition, you can enable statistics for
OData calls that give you information about the app processing time taken by the OData
back end.
Activation
You can start the interaction data collection in the following ways:
• Enable interaction steps recording:

– To measure the initial loading of the app, add the query string parameter sap-
ui-xx-fesr=true at the end of the application URL and reload.

– To measure the interaction performance, choose Start recording from the

Interaction panel and then switch back to the app to do the steps that you want
to record. Each user activity, such as clicking buttons or list items or scrolling a
list, triggers an interaction. The end of an interaction is when the UI is fully
updated by the app. The collected data is displayed once you choose Stop
Recording.

• You can enable the OData statistics by using query string URL parameter sap-
statistics=true, or from the UI by selecting Enable OData Statistics.

Output
• Interaction details - Selecting an interaction step bar, opens a dialog with details
about the selected interaction: end-to-end duration, total number of requests, the size
of the transferred data, and so on.

• Interaction requests - All interactions contain 0 to N requests, which can be

displayed in a list by selecting the expand icon.
• Request details - Selecting a request opens a dialog with details, such as request type,
URI, overall duration and how it is spread across client, server, and connection
establishing processing. When OData statistics are enabled and the request is
processed by the SAP NetWeaver OData gateway, in the details dialog there is a section
with OData times – Gateway Total, Framework, and Application processing times.
Note: The OData time (Gateway Total) is included in the total server time processing. Such requests and their
interaction are identified with a blue icon .

Additional features
• Export - Collected data can be exported as a ZIP archive for easy distribution through
e-mail.

• Import - Already collected data stored as an archive can be visualized again, using the
Import function. The input can be either an already exported archive file or directly the
JSON file that contains the performance data. This enables remote analysis of app data
by another team or expert.

Related information
Interaction Tracking for Performance Measurement