The UI5 Inspector is an open source
Chrome DevTools extension that helps app developers to inspect, analyze, and
support SAPUI5-based apps. It is supported for apps based
on SAPUI5 version 1.28 and higher.
Key features of UI5
Inspector
1) Inspect SAPUI5 controls and review
their properties, bindings, and data model
2) Modify control properties on the fly and see how this
affects rendering and behavior
3) Find relevant framework information for your OPENUI5/SAPUI5 app
Once installed, the UI5 Inspector is
available in Chrome DevTools (by choosing F12).
It becomes active when an SAPUI5 app is loaded.
Browser
Action
Clicking the browser action icon in the
address bar provides you with:
a) Information on the used SAPUI5
version
b) Links to the what’s New in SAPUI5
section and the SAPUI5 documentation
Control
Inspector
This tab shows the structure and
nesting of the SAPUI5 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.
Hovering over a specific branch of the
tree highlights the corresponding control in the app.
Additionally, you can right click on
any SAPUI5 control from the app and select Inspect UI5 control. This
automatically selects the control in the tree and you can review its properties
directly.
Properties
In this tab, you can see the properties
that have been set for the selected control. Additionally, the inherited
properties are also listed.
You can change the values of the
properties. The changes will be validated against the framework and rendered on
the fly.
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. The model property holds a link to the corresponding binding
file. Clicking on the link opens the Model section.
Application
Information
In this tab, you can see overall
information for your app – for example, the exact SAPUI5 version you are
running, the version of your browser, and the app URL. The information on the
loaded libraries and modules is collapsed by default.
ConversionConversion EmoticonEmoticon