Erste Schritte

Installieren

FrontTailor läuft in Chrome und Edge ab Version 137. Ab dieser Version prüft der Browser Ed25519-Signaturen, auf denen die Lizenzprüfung beruht. Der Eintrag im Chrome Web Store folgt; bis dahin bekommst du die Version 1.0.0 als Paket, mit 7 Tagen Testphase für alle Editionen – siehe Installieren auf der Startseite.

1. Das ZIP in einen eigenen Ordner entpacken.
2. chrome://extensions öffnen (in Edge edge://extensions).
3. Den Entwicklermodus einschalten.
4. Entpackte Erweiterung laden wählen und den entpackten Ordner auswählen.

Beim Installieren zeigt Chrome die Warnung „Alle Ihre Daten auf allen Websites lesen und ändern“. Sie kommt von einem kleinen Skript, das auf jeder Seite nur prüft, ob es SAP-UI5-Merkmale gibt. Es liest keine Inhalte und sendet nichts. Zugriff auf eine App bekommt FrontTailor erst, wenn du ihre Domain freigibst – siehe Berechtigungen und Datenschutz.

Die Domain der App freigeben

Öffne eine SAP-Fiori- oder UI5-App. FrontTailor erkennt sie innerhalb weniger Sekunden; das Symbol zeigt dann ein ! auf blauem Grund: Die Domain ist noch nicht freigegeben.

1. Die Ampel steht auf Blau – Freigabe erforderlich.
2. Die Frage „FrontTailor für <Host> aktivieren?“ mit der Erklärung und dem Knopf Aktivieren.

1. In der App auf das FrontTailor-Symbol klicken. Das Popup öffnet sich.
2. Aktivieren klicken.
3. Den Dialog des Browsers bestätigen. Die Freigabe gilt für den Host mit allen Ports, deshalb nennt die Frage den Hostnamen ohne Port.
4. FrontTailor verbindet sich ohne Neuladen. Das Symbol wird grün und zeigt UI5 oder das Kürzel deines Host-Profils.

Erscheint statt der Frage „Diese Domain ist durch Ihre Administration nicht freigegeben.“, lässt eine Richtlinie deines Unternehmens FrontTailor auf diesem Host nicht zu. Eine Freigabe widerrufst du jederzeit unter chrome://extensions bzw. edge://extensions.

Das Popup

Ein Klick auf das Symbol öffnet das Popup. Es zeigt auf einen Blick, ob FrontTailor mit der App verbunden ist, und bietet die häufigsten Aktionen.

1. Die Ampel: grau ohne UI5, grün bei erkannter App, gelb bei Fehlern in dieser Sitzung, rot auf PROD, blau, solange die Freigabe fehlt.
2. Side-Panel öffnen und die weiteren Schnellaktionen: Palette, Debug an, Profil (URL-Profile) und Cache-Reset. Darunter startet Problem melden einen Fehlerbericht (Problem melden).
3. Der kurze Steckbrief: UI5-Version, Theme und App mit Typ. Den vollen Steckbrief zeigt der Tab Übersicht (Übersicht & Systemsteckbrief).
4. Das Profil für den Host: Name, Farbe und PROD-Kennzeichen – siehe Host-Profile und PROD.

Das Side-Panel

Das Side-Panel steht rechts neben der App und bleibt offen, während du in der App klickst. Du öffnest es über Side-Panel öffnen im Popup oder mit Alt+Shift+F; das Kürzel startet zugleich den Pick-Modus des Inspectors.

1. Der Verbindungsstatus mit Seite, UI5-Version und Roundtrip.
2. Weitere öffnet die Tabs, die nicht in die Leiste passen.

Das Side-Panel ist für 420 Pixel Breite gebaut. Einige Ansichten gibt es nur im breiten DevTools-Panel, etwa den Tab Models; die OData-Konsole blendet im Side-Panel die Spalten Zeit und Größe aus.

Das DevTools-Panel

Für die tiefe Arbeit öffnest du die DevTools (F12) und wählst den Tab FrontTailor. Das Panel gehört zu dem Browser-Tab, in dem du die DevTools geöffnet hast.

1. Verbunden erscheint erst nach einem erfolgreichen Ping bis in die UI5-Seite; danach prüft das Panel alle 5 Sekunden.
2. Das Design: wie Browser, hell oder dunkel (SAP Horizon).
3. Die Sprache der Oberfläche: wie Browser, Deutsch oder Englisch.

Status und Ampel

Was tun, wenn es nicht klappt: Fehlerbehebung.

Einstellungen

Die Grundeinstellungen sitzen oben rechts in jeder Oberfläche: das Design (Palettensymbol) und die Sprache (Globus). FrontTailor merkt sich beides im Browserprofil. Alles Weitere steht im Tab Werkzeuge (Werkzeuge), darunter die Karte Lizenz (Lizenz und Editionen).

Die Kürzel änderst du unter chrome://extensions/shortcuts.