Skip to content

Latest commit

 

History

History
87 lines (43 loc) · 4.07 KB

Step_5_UI5_Inspector_76e789e.md

File metadata and controls

87 lines (43 loc) · 4.07 KB
loio
76e789ea418a48a1a27916b63a30fb72

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

Step 5: UI5 Inspector

In this tutorial step, we will have a closer look at UI5 Inspector - an open source Chrome DevTools extension specifically created for analyzing and debugging OpenUI5 code.

With UI Inspector, you can find answers to the following questions, for example:

  • What is the structure of your app?

  • How are the elements related to each other?

  • Which controls are involved when a function is performed?

  • Which data is bound to a specific control and how (model and path)?

Note:

UI5 Inspector is only available for browsers, like Google Chrome and Microsoft Edge (Chromium), that support standard extensions from the Chrome Web Store.

Preview

Opening the Example App and the UI5 Inspector

  1. Add the UI5 Inspector as a standard extension to your Chromium-based browser from the Chrome Web Store.

  2. Download the example app with errors from the Demo Kitat Troubleshooting and run the app.

  3. Open the Developer Tools in Google Chrome by pressing [F12].

  4. Choose the UI5 tab on the right side of the developer tools panel.

  5. Choose Control Inspector.

    You now see a list of all of the controls that are used in the current view of the app. When you select an entry, you see the properties and their values in the Properties area on the right. You can analyze line by line without being overwhelmed by too much information.

Simulating UI Changes

The app contains a Do Something button with meaningless icon (sap-icon://action) and text. We want to use the sap-icon://activate icon instead and change the text. With UI Inspector, we want to simulate how that will effect the UI change.

  1. Right-click the Do Something button and from the context menu select Inspect UI5 Control.

    The corresponding line in the Control Inspector is highlighted and you can view its properties.

  2. Double-click the value for the icon property, which is currently sap-icon://action.

  3. Replace action with activate and confirm with [Enter].

    The icon on the button in the app is updated to show the new icon Activate.

  4. Double-click the value for the text property and change the value to Activate.

  5. The changes that you make in the UI5 Inspector are only temporary, and the icon will be reset to the default when the page is reloaded. To make your change permanent, you have to change the app code.

Parent topic:Troubleshooting Tutorial

Next:Step 4: Diagnostics Window

Previous:First-Aid Kit

Related Information

UI5 Inspector