Debugging is the first step in analyzing an issue. For this, you need to know how you can debug in your respective browser.
The development tools of the current browsers allow you to set JavaScript debugging breakpoints. In most browsers, setting the breakpoint is sufficient, but in Internet Explorer, script debugging needs to be turned on explicitly and the selection of the correct file can be tricky when it is loaded using Ajax requests because the file name is not listed. Once you have stopped the script execution, you can inspect and modify the variables. You can now execute the code step-by-step.
We recommend to read the basic tutorials on debugging in the different browsers that are available online. For information on browser debugging for ABAP developers, see Browser Debugging for ABAP Developers.
If you want to make sure that your application is also running on a mobile devices, you can use a simulator, or, as they all have restrictions, we recommend that you debug your application remotely on the target device. This is the only way you can make a reliable statement about the performance of your application on, for example, an iPad. The process varies depending on whether you debug on an Android device or on an Apple device. For more information, see the respective documentation for remote debugging for Android or Apple devices on the respective vendor's websites.
The following list provides some useful tips and tricks for debugging OpenUI5:
If you only see minified sources or scrambled code from OpenUI5 sources instead of the real code behind it, activate the Debug Sources option in your browser. You can enable this option as follows:
List of useful URL parameters:
| Parameter | Description |
|---|---|
| sap-ui-debug | Set this parameter to true to activate the Debug Sources option. |
| sap-ui-language | Use this parameter to change the language. |
| sap-ui-theme | Use this parameter to switch themes, for example sap-ui-theme=sap_bluecrystalor sap-ui-theme=sap_bluecrystal. |
Debugging with the support tool
You can use the support tool to get additional information about the OpenUI5 application. It provides a tree structure with all existing controls that can be used to edit properties at runtime, view binding information, and set breakpoints on instance level.
For more information, see Diagnostics Window.