UI5 Inspector
Featured

UI5 Inspector

Inspect, modify, and debug OpenUI5/SAPUI5 controls and properties directly from Chrome DevTools.

★★★★★ 4.6 114 reviews 50K+ users · Developer Tools
Developer SAP SE Dietmar-Hopp-Allee
Install from Chrome Web Store ↗

Description

The UI5 Inspector is a Chrome DevTools extension designed for developers and support engineers working with OpenUI5 or SAPUI5 applications. It integrates directly into the browser's developer tools, providing a dedicated panel for inspecting and debugging UI5-based user interfaces. This tool is essential when you need to understand how a UI5 application is structured, identify issues in control properties or data bindings, or experiment with changes without modifying the source code.

Features

  • Inspect UI5 Controls: Browse the hierarchical tree of UI5 controls in the application. For each control, you can view detailed properties, data bindings, and the associated model context. This is useful for verifying that controls are configured correctly and for understanding how data flows from the model to the view.
  • Modify Control Properties in Real Time: Change property values directly in the inspector and see the effects immediately on the rendered page. This allows rapid experimentation with different settings (e.g., visibility, text, layout) to test behavior or debug rendering issues without reloading the app.
  • Access Framework Information: Retrieve metadata about the OpenUI5 or SAPUI5 version, loaded libraries, and configuration used by the application. This information helps in diagnosing compatibility issues or verifying that the expected framework version is in use.

The UI5 Inspector streamlines debugging by eliminating the need to manually search through DOM elements or console logs. It is particularly valuable during development to quickly validate control states, during testing to simulate different property values, and during support to analyze live applications without requiring source access.

Related