UI5 Inspector Phoenix illustration

UI5 Inspector

With the UI5 Inspector, you can easily debug and
support your OpenUI5 or SAPUI5-based apps.

Download
Magnifier illustration

Inspect OpenUI5 controls and review their properties, bindings, and data model

Package illustration

Find relevant
framework
information for your OpenUI5 app

Gear illustration

Modify control properties on the fly and see how this affects rendering and behavior

Example App

Step 1 illustration

Download UI5 Inspector and add it to your Chrome browser as a standard extension

Step 2 illustration

Download the example app with errors from the Demo Kit at Troubleshooting and run the app

Step 3 illustration

Open the
Developer Tools in
Google Chrome by
pressing F12

Step 4 illustration

Choose the UI5 tab on the right side of the developer tools panel and choose Control Inspector

Main Features

Gear illustration

Browser Action

Clicking the browser action icon in the address bar provides you with: information on the used OpenUI5 version, links to the What's New in OpenUI5 section and the OpenUI5 documentation and link to the OpenUI5 website.

Magnifier illustration

Control Inspector

This tab shows the structure and nesting of the OpenUI5 controls. You can search and filter for specific controls. You have the options to show/hide the control's namespace and attributes in the tree.

Checklist illustration

Properties

In this tab, you can see the properties that have been set for the selected control. Additionally, the inherited properties are also listed.

Graph illustration

Bindings

In this tab, you can see the bindings for a specific control. The number of bindings is displayed in parentheses in the tab title. Selecting the tab gives you more information about individual models, paths and values.

Web page illustration

Application Information

In this tab, you can see overall information for your app – for example, the exact OpenUI5 version you are running, the version of your browser, and the app URL.