Übersicht & Systemsteckbrief
Der Tab „Übersicht“ ist das Erste, was FrontTailor zeigt: den Verbindungsstatus, den Systemsteckbrief der App, die Fehler der aktuellen Sitzung und die Lesezeichen. Alles wird aus der laufenden App gelesen, ohne Einrichtung und ohne Request an das Backend.
- Edition
- Community
- Tab
- „Übersicht“ (Standard-Tab)
- Oberflächen
- DevTools-Panel und Side-Panel
- Kopieren
- Systemsteckbrief als Markdown
- Auf PROD
- nur Lesen, keine Sperre nötig
Der Tab im Überblick
Öffne in den DevTools (F12) das Panel FrontTailor oder das Side-Panel über das Symbol der Extension. Beide starten im Tab Übersicht. Oben steht, ob FrontTailor mit der App verbunden ist, darunter die Tabs der Module und die Karten der Übersicht.
- Verbindungsstatus: Verbunden, darunter Seite, UI5-Version und Roundtrip zur App. Hängen mehrere Frames an FrontTailor, steht hier zusätzlich Verbundene Frames.
- Design wechseln: wie Browser, hell oder dunkel.
- Sprache wechseln: wie Browser, Deutsch oder Englisch. Die Wahl gilt auch für Palette und Hinweise der Extension.
- Die Tabs der Module. Was nicht in die Leiste passt, steht unter Weitere.
Unter der Tab-Leiste folgen die Karte Lesezeichen für den App-Zustand, der Systemsteckbrief, die Karte Bücher vom Autor und die Sitzung mit den letzten Fehlern.
Verbindungsstatus
| Status | Bedeutung |
|---|---|
| Verbinde… · Starte… | FrontTailor sucht die UI5-Runtime in der Seite. Das dauert, bis die App gestartet ist. |
| Verbunden | Die App ist erkannt, alle Tabs arbeiten. |
| Keine UI5-App erkannt | Die Seite hat kein UI5 geladen, etwa eine Anmeldeseite. |
| Freigabe erforderlich | FrontTailor darf diese Domain noch nicht lesen. Ein Klick auf Aktivieren fragt die Freigabe im Browser an – siehe Erste Schritte. |
| Nicht verbunden · Fehler | Die Verbindung ist abgerissen, meist nach einem Neuladen. Erneut versuchen baut sie neu auf. |
| Kein Tab ausgewählt | Das Side-Panel gehört zu keinem Tab mit einer Webseite. |
Systemsteckbrief
Der Steckbrief beantwortet die Fragen, die am Anfang jeder Fehlersuche stehen: Welche UI5-Version, welches Theme, welches Launchpad, welche App, welcher Service?
- Kopieren als Markdown legt den ganzen Steckbrief als Markdown in die Zwischenablage – fertig für ein Ticket oder einen Chat.
- Datenquellen aus dem Manifest: Name, OData-Version, erkannter Backend-Typ und URI.
| Feld | Inhalt |
|---|---|
| URL | Adresse der Seite. |
| UI5-Version · Build | Version der geladenen UI5-Runtime und ihr Build-Zeitstempel. |
| Theme · Sprache · Formatsprache | Aktives Theme, Sprache der Texte und Sprache für Zahlen- und Datumsformate. |
| Debug-Modus · Asynchrones Laden | Ob sap-ui-debug aktiv ist und ob UI5 Module asynchron lädt. |
| Launchpad | Keins (eigenständig), ABAP Fiori Launchpad (mit Mandant), SAP Build Work Zone, Lokale Sandbox oder Unbekanntes Launchpad. Im Launchpad steht dazu die Launchpad-Startseite. |
| App · App-ID (sap.app.id) · App-Version | Titel, ID und Version der App aus dem Manifest. |
| Anwendungskomponente | Die SAP-Komponente für Meldungen, z. B. SD-SLS-SO. |
| Typ | Freestyle, Fiori Elements (OData V2) oder Fiori Elements (OData V4). |
| Component | ID der Komponente der App. |
| Datenquellen | OData-Services und Annotationsdateien. Der Backend-Typ heißt ABAP Gateway, ABAP RAP, CAP oder Sonstiges. |
| Geladene Bibliotheken | Die UI5-Bibliotheken, die die App geladen hat. |
- App im Browser öffnen und warten, bis oben Verbunden steht.
- Im Tab Übersicht beim Systemsteckbrief auf Kopieren als Markdown klicken.
- Den Text ins Ticket einfügen. Er enthält alle Felder des Steckbriefs, auch die Datenquellen.
Der Steckbrief zeigt, wann er gelesen wurde (Erfasst …). Navigiert das Launchpad zu einer anderen App, liest FrontTailor ihn neu.
Sitzung: Fehler seit dem Laden
Die Karte Sitzung zählt die Fehler seit dem Laden der Seite: Fehler aus dem UI5-Log und Requests, die mit Status 400 oder höher endeten. Darunter stehen die letzten Fehler mit Quelle (UI5-Log oder Request). Ohne Fehler steht dort Keine Fehler in dieser Sitzung.
- Die Zahl der Fehler in dieser Sitzung; dieselbe Zahl steht gelb auf dem Symbol der Extension.
Eine Sitzung ist ein geladenes Dokument im Tab. Navigation im Hash (Launchpad, Router der App) bleibt in derselben Sitzung, Neuladen beginnt eine neue. Ein $batch, der mit HTTP 200 antwortet und nur innen Fehler enthält, zählt hier nicht – den zeigt die OData-Konsole. Von Request-URLs speichert die Sitzung nur Schema, Host und Pfad.
Das Symbol als Ampel
Das Symbol der Extension in der Browserleiste zeigt den Zustand des Tabs, auch wenn kein Panel offen ist.
| Farbe | Bedeutung |
|---|---|
| Grau | Keine UI5-App im Tab. |
| Grün | UI5-App erkannt, keine Fehler. |
| Gelb mit Zahl | Fehler in dieser Sitzung (ab 100 steht „99+“). Der Tooltip sagt „… Fehler in dieser Sitzung“. |
| Rot | Der Host ist als PROD markiert. Tooltip: „PROD – Änderungen gesperrt“. |
| „!“ auf Blau | Die Domain braucht noch eine Freigabe. |
Wie ein Host zu PROD wird, steht unter Host-Profile und PROD.
Lesezeichen und Bücher
Ganz oben im Tab steht die Karte Lesezeichen: Zustand merken speichert Route, Filter und Tab der App, nach dem Neuladen bringt dich ein Klick zurück. Alles dazu unter Lesezeichen für den App-Zustand.
Die Karte Bücher vom Autor zeigt die SAP-PRESS-Bücher zu den Themen von FrontTailor. Empfehlungen ausblenden schaltet sie ab; unter Werkzeuge › Über FrontTailor kommen sie zurück.
Tastenkürzel
| Taste | Wirkung |
|---|---|
| F12 → Tab „FrontTailor“ | Das DevTools-Panel mit allen Tabs. Das Side-Panel weist mit „Tiefes Debugging: DevTools (F12) → Tab „FrontTailor“.“ darauf hin. |
| Alt+Shift+F | Control in der Seite wählen, siehe Inspector. |
| Alt+Shift+K | Befehlspalette in der App, siehe Befehlspalette. |
Typische Probleme
| Problem | Lösung |
|---|---|
| Oben steht Freigabe erforderlich | Auf Aktivieren klicken und die Domain im Browser freigeben, siehe Erste Schritte. |
| Oben steht Keine UI5-App erkannt | Die Seite ist (noch) keine UI5-App, etwa die Anmeldung. Nach dem Start der App verbindet sich FrontTailor von selbst. |
| Das Symbol ist gelb, obwohl die App läuft | Gelb heißt: Fehler in dieser Sitzung. Die Karte Sitzung zeigt, welche. Neuladen setzt die Zahl zurück. |
| Datenquellen fehlen im Steckbrief | Die App nennt im Manifest keine dataSources, oder sie erzeugt ihr Model im Code. Die Requests zeigt trotzdem die OData-Konsole. |
| Falscher Steckbrief im Launchpad | Der Steckbrief gehört zur App, die gerade angezeigt wird. Nach einer Navigation kurz warten, bis er neu gelesen ist. |
Siehe auch
- Funktionen im Überblick Funktionen · Inspector & Models
- Zum Nachlesen SAPUI5 – The Comprehensive Guide (SAP PRESS)
- Zum Nachlesen SAP Fiori Elements – Grundlagen, Entwicklung und Erweiterung (SAP PRESS)
- Hilfe von Menschen FrontTailor-Onboarding für euer Team
- Doku Erste Schritte
- Doku Host-Profile und PROD
- Doku Lesezeichen für den App-Zustand
- Doku OData-Konsole
- Belege ADR-0031 · ADR-0041