Show TOC

DiagnosticsLocate this document in the navigation structure

SAPUI5 diagnostics is a support tool that runs within an existing SAPUI5 application.

To call the support tool, use the following shortcut: CTRL+SHIFT+ALT+S. The following sections describe the functions SAPUI5 provides in the support tool.

Activating the Debug Sources

To use the debugging function, it is important to use the debug sources. For this, set the Debug Sources function to ON.

SAPUI5 Diagnostics Debug Sources
Control Tree

The control tree shows all controls that are contained in the application in a tree view. You can select controls either directly in the application by choosing CRTL+SHIFT+ALT 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. In the example below, you can change the value, the text direction, and enable or disenable the control.

    SAPUI5 Diagnostics Changing Control Properties
  • The Binding Infos tab shows all existing bindings for the selected control together with additional information. To update the binding, choose Refresh.

    SAPUI5 Diagnostics Binding Information

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

  • On the Properties tab, you can add or remove breakpoints. Use the respective checkbox to add or remove a breakpoint for the get/set method of a control property.

    SAPUI5 Diagnostics Property Breakpoints

  • On the Breakpoints tab, you can add or remove breakpoints for methods. 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.

    SAPUI5 Diagnostics Method Breakpoints
Debugging a Method

To debug a method, open and activate you browser's debugging tool. If you execute a method with an active breakpoint, the script stops at the debugger statement. To open the method, use the step-over/into function of your debugger.

SAPUI5 Diagnostics Debugging a MethodSAPUI5 Diagnostics Debugging
Debugging View

The Debugging view allows you to set breakpoints for methods on class level. Select the class from the dropdown box or enter the name of the class. Choose Add to set the breakpoint. For each class, the system shows the number of active breakpoints and all methods.

SAPUI5 Diagnostics Debugging View
XML View Conversion

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

  1. Run the SAPUI5 app in your browser, for example, open a page in the test suite.
  2. Open the support tool by choosing CTRL+ALT+SHIFT+S.
  3. Open the Control Tree panel.
  4. Select the root UI area in the tree on the left hand side.
  5. Open the Export tab and choose Export XML.
  6. 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.