Werkzeuge

Der Tab im Überblick

Öffne in den DevTools (F12) das Panel FrontTailor oder das Side-Panel und wähle den Tab Werkzeuge. Er besteht aus Karten, die du auf- und zuklappen kannst; der Zustand bleibt gespeichert. Im DevTools-Panel stehen die Karten ab etwa 1100 Pixel Breite in zwei Spalten, im Side-Panel in einer.

1. Wie viele Cache-Ziele ausgewählt sind. Ziele, die die Seite nicht hat, zählen nicht mit.
2. Zurücksetzen und neu laden löscht die gewählten Ziele – mit doppelter Bestätigung (siehe Cache).
3. Neu laden ohne Cache lädt die Seite am HTTP-Cache vorbei neu und löscht nichts.
4. Die Debug-Schalter: URL-Parameter vor dem #, darunter die Adresse des UI5-Bootstraps.
5. Anwenden und neu laden wird aktiv, sobald du einen Schalter änderst.

Alle Schalter, die neu laden, setzen ihre Parameter vor den Hash der Adresse. Der Launchpad-Hash (#Objekt-aktion?…&/route) und fremde Parameter bleiben Zeichen für Zeichen erhalten.

Cache gezielt leeren

1. Wähle in der Karte Cache die Ziele: Browser-Cache, Service Worker, Web Storage, UI5-Cache und im Launchpad Launchpad-Personalisierung.
2. Klicke Zurücksetzen und neu laden.
3. Der Dialog Caches zurücksetzen? nennt alle Ziele. Kreuze Mir ist klar, dass diese Daten gelöscht werden. an – erst dann wird Zurücksetzen aktiv.
4. FrontTailor löscht die Ziele, lädt die Seite ohne Cache neu und zeigt je Ziel erledigt, übersprungen, nicht verfügbar oder fehlgeschlagen.

Cookies und Passwörter fasst FrontTailor nie an.

Debug-Schalter

Ein Tag im Kopf der Karte zeigt, wie viele Schalter in der Seite gerade aktiv sind und wie viele Änderungen ausstehen. Anwenden und neu laden setzt die Parameter und lädt den Tab neu.

Nur eigenen Code debuggen

sap-ui-debug=true lädt alle Module als Debug-Quellen – im Launchpad dauert das oft Minuten. Meist reicht der eigene Code. Die Karte Nur eigenen Code debuggen setzt dafür sap-ui-debug auf den Namensraum der App.

1. Erkannte Namensräume der geladenen Apps, als Kästchen. Weitere, etwa eine Bibliothek des Teams, trägst du darunter ein und klickst Hinzufügen.
2. Lädt neu mit: der Parameter, mit dem neu geladen wird.
3. Neu laden: nur eigener Code. Debug ausschalten entfernt den Parameter wieder.

1. Öffne die Karte Nur eigenen Code debuggen und prüfe die erkannten Namensräume.
2. Klicke Neu laden: nur eigener Code.
3. Nach dem Neuladen steht im Kopf der Karte Eigener Code. Deine Module kommen als -dbg.js mit Kommentaren, die UI5-Bibliotheken bleiben gebündelt.

Gebaute Apps (ui5 build) haben -dbg-Dateien; fehlt eine, lädt UI5 die normale Datei. Im Launchpad steht der Parameter in der äußeren URL; für eine App im iframe ergänzt FrontTailor sap-iframe-params=sap-ui-debug, damit das Launchpad ihn weitergibt.

URL-Vorlagen und Profile

1. Vorlagen ankreuzen. Mehrere lassen sich kombinieren; Vorlagen mit demselben Parameter schließen sich aus.
2. Neu laden mit Auswahl – die Zahl nennt die gewählten Vorlagen.
3. Als Profil speichern legt die Auswahl als Profil für diesen Host ab.

Vorlagen-Parameter entfernen nimmt die Parameter wieder aus der Adresse. Unter Gespeicherte Profile stehen bis zu 20 Profile je Host; Anwenden lädt mit einem Profil neu, Entfernen löscht es. Über Exportieren und Importieren tauschst du Profile als JSON aus. Profile nehmen nur sap-*-Parameter an und lehnen Namen ab, die nach Zugangsdaten aussehen (token, password, session …).

Sprache und RTL

1. Sprache: setzt sap-ui-language in der URL. Die Liste enthält auch Testsprachen (SAP-Pseudosprachen).
2. Rechts nach links (RTL): sap-ui-rtl=true spiegelt das Layout, ohne die Sprache zu ändern.
3. Neu laden mit Sprache.
4. Ohne Neuladen umschalten: UI5 aktualisiert gebundene i18n-Texte und formatierte Datums- und Zahlenwerte sofort. Texte aus OData, Annotationen von Fiori Elements und fest im Code gesetzte Texte bleiben bis zum nächsten Neuladen in der alten Sprache.

Browsersprache entfernt sap-ui-language und sap-ui-rtl wieder. Fehlende Übersetzungen findest du mit Qualität: i18n & Barrierefreiheit.

Im Editor öffnen

Vom Control im Inspector oder von der sichtbaren View springst du direkt in die Quelldatei – bei XML-Views in die Zeile des Controls. Dafür sagst du FrontTailor einmal, welcher Editor es ist und in welchem lokalen Ordner die Dateien einer App liegen.

1. Öffne die Karte Im Editor öffnen und wähle unter Editor deinen Editor.
2. Klicke unter Pfadzuordnung auf den erkannten Namensraum der App oder auf Zuordnung hinzufügen.
3. Trag als Lokaler Ordner den absoluten Pfad ein, in dem die Dateien liegen – meist webapp, etwa /Users/ich/projekte/demo-freestyle/webapp oder C:\dev\app\webapp.
4. Klicke Speichern. Unter Aktuelle App stehen jetzt Views, Controller, Component.js und manifest.json als Links.
5. Im Inspector wählst du ein Control und klickst Im Editor öffnen. Der Browser fragt, bevor er den Editor startet.

1. Editor: öffnet Dateien über sein Link-Schema.
2. Pfadzuordnung: Namensraum → Lokaler Ordner, mit Papierkorb zum Entfernen.
3. Speichern.
4. Aktuelle App: alle sichtbaren eigenen Views mit Controller, dazu Component.js und manifest.json. Das Symbol daneben liest die sichtbare View neu.

1. Im Editor öffnen in den Details des Controls.
2. Der Link auf die View, hier mit der Zeile, in der die ID des Controls steht. Darunter der Controller; Pfadzuordnung führt zur Karte.

• Bis zu 30 Zuordnungen. Gibt es für ft.demo und ft.demo.freestyle je eine, gewinnt der längere Namensraum.
• Steht die ID nicht in der View, sucht FrontTailor in den eigenen Fragmenten der View (eine Ebene tief). Findet er sie nicht, öffnet der Link die View oben.
• Views von Fiori Elements gehören zum Framework; dafür gibt es keine eigene Quelldatei. Component.js und manifest.json der App sind trotzdem verlinkt.
• Die Zuordnung bleibt in diesem Browser: nicht in sync, nicht in Exporten oder Team-Paketen, weil lokale Pfade je Gerät verschieden sind.
• Die Quelle der View liest FrontTailor nur vom Server der App selbst (same-origin); nichts geht an Dritte.

Deployment prüfen

Die Karte Deployment beantwortet die Frage nach jedem Transport: Läuft im Browser die Version, die auf dem Server liegt? Ein Klick auf Deploy prüfen vergleicht die App- und UI5-Version im Browser mit der deployten Version und die Cache-Buster-Tokens der geladenen Dateien mit dem aktuellen Index.

1. Das Urteil.
2. Je App-Komponente und für UI5: Version Läuft und Server mit Status.
3. Cache-Buster: Zähler für Dateien mit Token, App-Dateien ohne Token und veraltete Tokens, darunter die Liste – veraltete zuerst – und die ETag-Prüfung der Component.js.

Die Prüfung liest nur: Sie fragt manifest.json, sap-ui-cachebuster-info.json und sap-ui-version.json nach dem Klick beim eigenen Server der App ab, ohne Cache und ohne den Cache zu verändern. Andere Origins ruft sie nicht ab. Für Administratoren, die FrontTailor im Unternehmen verteilen, gibt es die eigene Seite Enterprise-Deployment.

Flex & Adaptionen

Die Karte zeigt, ob SAPUI5 Flexibility für die App aktiv ist, welche Connectoren konfiguriert sind und wie viele Änderungen und Sichten auf welchem Layer (USER, CUSTOMER, VENDOR …) liegen, dazu jede Variantenverwaltung mit aktueller Sicht und Standardsicht und, soweit UI5 sie im Speicher hat, die Key-User-Versionen. Das Lesen schickt keine Requests.

• Erneut prüfen liest den Stand neu.
• Zurücksetzen löscht nur deine eigene Personalisierung im USER-Layer. Daneben gibt es Control zurücksetzen für die Änderungen an einem Control und Sichten zurücksetzen für die eigenen Sichten einer Variantenverwaltung. Key-User- und öffentliche Sichten bleiben erhalten.
• Jeder Reset fragt doppelt nach und listet vorher die betroffenen Objekte.

Lädt die App sap.ui.fl nicht – wie die Freestyle-Demo-App –, steht im Kopf der Karte sap.ui.fl nicht geladen.

UI5-Version vom CDN

Die Karte UI5-Version (CDN) lädt die App mit einer anderen UI5-Version vom offiziellen SAP-CDN – nur in diesem Tab und ohne Deployment. Eigene Bibliotheken außerhalb von sap/ und die App selbst bleiben auf dem Server.

1. Gib die Version ein. Versionsliste laden holt die Liste vom CDN – nur auf Klick, die Adresse steht daneben.
2. Klicke Einschalten und neu laden. Der Dialog zeigt genau, welche Adressen wohin umgeleitet werden, und warnt vor Grenzen wie der Content Security Policy der Seite. Lädt die App UI5 schon vom CDN, fragt der Browser zusätzlich nach der Freigabe für dessen Adresse.
3. Nach dem Neuladen steht über den Tabs ein Banner mit der aktiven Version. Override ausschalten stellt die ursprüngliche Version wieder her; das geht immer, auch auf PROD.

Den Override beenden auch das Schließen des Tabs und ein Neustart des Browsers. Bei einer strengen Content Security Policy der Seite startet UI5 mit der umgeleiteten Version nicht; der Banner zeigt das an.

Weitere Werkzeuge, Palette und UI5-Log

Viele Aktionen des Tabs gibt es auch in der Palette und im Popup der Extension (Cache-Reset, Debug an/aus, URL-Profile). Sie laufen über dieselben Prüfungen.

Auf PROD

Typische Probleme