Inspector

Der Tab im Überblick

Öffne in den DevTools (F12) das Panel FrontTailor oder das Side-Panel über das Symbol der Extension und wähle den Tab Inspector. Links steht der Control-Baum der App, rechts die Details des gewählten Controls. Im schmalen Side-Panel stehen beide untereinander.

1. Control wählen startet den Pick-Modus: Danach klickst du ein Control in der Seite an. Daneben lädt Baum neu laden den Baum von vorne.
2. ID, Typ oder Text suchen – gesucht wird in allen drei. Treffer behalten ihre Vorfahren, damit du siehst, wo das Control hängt.
3. Filter: Nur sichtbare, Nur gebundene und Nur Custom Controls (Typ nicht aus sap.*). Rechts davon steht, wie viele Knoten der Baum hat und wie lange das Lesen gedauert hat.
4. Der Control-Baum: UI-Bereiche, Komponenten, Views und Controls in der Reihenfolge der App. Pfeiltasten bewegen die Auswahl.

Der Baum folgt der laufenden App: Öffnet die App einen Dialog oder lädt eine Liste nach, erscheinen die neuen Controls von selbst. Sehr große Apps zeigt der Inspector bis 20.000 Knoten; darüber steht der Hinweis „Baum gekürzt: nur die ersten … Knoten werden angezeigt.“

Ein Control in der Seite wählen

1. Klicke Control wählen oder drücke Alt+Shift+F – das Kürzel funktioniert auch, wenn die DevTools geschlossen sind, und öffnet dann das Side-Panel.
2. Fahre mit der Maus über die App. Ein Rahmen zeigt das Control unter dem Zeiger, mit Typ, ID und – falls gebunden – dem Binding-Pfad.
3. Klicke das Control an. Die App bekommt den Klick nicht mit: Kein Button löst aus, kein Popover schließt sich. Esc bricht ab.
4. Der Inspector springt im Baum zum Control und zeigt rechts die Details.

Das funktioniert auch in Dialogen, Popovern und in Apps, die im Launchpad in einem iframe laufen. Ein Klick in einem Frame schaltet den Inspector auf diesen Frame um; die Auswahl Frame über dem Baum zeigt, welcher gerade gemeint ist (Haupt-Frame ist die Seite selbst).

Details eines Controls

1. Typ und ID, darunter View und Komponente. Daneben öffnet API-Referenz die Klasse in der UI5-Doku genau der Version, die die App lädt; Fiori Design Guidelines öffnet die passende Seite der Guidelines, wenn es eine gibt.
2. Parent-Kette: jeder Vorfahre bis zum UI-Bereich, anklickbar.
3. Kopieren als… – ID, OPA5-Selektor, wdi5-Selektor, Playwright-Locator oder XML-Snippet (siehe unten).
4. Als Variable speichern legt das Control für die DevTools-Console ab (siehe unten).
5. gebunden unter einem Property-Namen öffnet die Herkunft des Werts.

Die Details haben fünf Tabs:

Property-, Aggregations- und Event-Namen in den Tabellen sind Links auf ihren Eintrag in der API-Referenz der Klasse, die sie deklariert. Steht ein Control nicht im Baum – etwa ein Dialog, der noch nie geöffnet war –, erklärt ein Hinweis in den Details, warum, und nennt die Wurzel.

Woher kommt der Wert? Bindings lesen

1. Wähle das Control (Pick oder Suche).
2. Klicke im Tab Properties unter dem Namen der Property auf gebunden.
3. Das Popover Binding von … zeigt Pfad wie geschrieben, Aufgelöster Pfad, Model, Model-Typ (OData V2, OData V4, JSON, Resource (i18n), XML), Wert im Model, Aktueller Wert, Binding-Modus, Typ und Formatter – bei i18n-Texten Schlüssel und Text.
4. Mit Pfad kopieren nimmst du den Pfad mit, Im Bindings-Tab anzeigen hebt die Zeile im Tab Bindings hervor, Im Model Explorer anzeigen öffnet den Tab Model Explorer genau an dieser Stelle.

1. Pfad wie im View geschrieben.
2. Model-Typ – hier ein Resource-Model mit den i18n-Texten.
3. Pfad kopieren.
4. Im Bindings-Tab anzeigen.

Wenn ein Feld leer bleibt, sagt dir der Tab meist schon, warum: „nicht aufgelöst“ heißt, dass das Control noch kein Model oder keinen Kontext hat – typisch für einen relativen Pfad ohne Element-Binding.

Properties live ändern

Im Tab Properties ist jeder Wert ein Editor: Booleans als Kästchen, Enums als Auswahl, Zahlen als Zahlenfeld, alles andere als Textfeld. Objekte und Arrays bleiben schreibgeschützt.

• Enter oder Verlassen des Felds übernimmt den Wert; Esc holt den Wert der Seite zurück.
• Der Inspector prüft den Wert gegen den Datentyp. Passt er nicht, erscheint „Ungültiger Wert: …“, und das Control behält seinen Wert.
• Bei gebundenen Properties warnt ein Hinweis: „Gebunden: Das nächste Model-Update überschreibt eine Änderung.“ Bei TwoWay-Bindings landet die Änderung auch im Model.

Selektoren und XML kopieren

Generierte IDs wie __button3 landen nie in einem Selektor. Stattdessen nimmt der Inspector den Control-Typ und ein Merkmal, das das Control eindeutig macht: einen Text, einen i18n-Schlüssel oder einen Binding-Pfad. Die Selektoren werden in den automatischen Tests gegen die Demo-Apps ausgeführt.

Als Variable speichern (DevTools-Console)

1. Wähle das Control und klicke Als Variable speichern.
2. Der Inspector legt es als $ft0 ab (das nächste als $ft1 …, das letzte immer auch als $ft) und zeigt einen Beispielaufruf wie $ft0.getText().
3. Wechsle in die Console der DevTools und arbeite mit der Variable. Läuft die App im Launchpad in einem iframe, nennt der Inspector den Frame, den du oben links in der Console wählen musst.

Das Menü daneben speichert statt des Controls einen Bindungskontext oder ein Model. Die Variablen leben nur in der Seite, bis sie neu lädt; FrontTailor speichert nichts davon. Alle löschen räumt sie wieder ab.

Weitere Aktionen in den Details

• Im Editor öffnen springt zur Quelldatei des Views in deinem lokalen Editor. Dafür richtest du einmal in Werkzeuge die Pfadzuordnung ein (Namensraum → lokaler Ordner).
• Im Elements-Tab zeigen wählt das DOM-Element des Controls im Elements-Panel der DevTools aus.
• Mit ab Pro stehen hier die KI-Einstiege Control erklären, Warum nicht sichtbar? und wdi5-Test – mit deinem eigenen Schlüssel, siehe KI-Assistent.

Typische Probleme