Überblick
Fehlersuche UI5 Apps
Grundsätzlich bietet es sich an, UI5-Apps mit einem modernen Browser wie Google Chrome zu entwickeln. Dies hat verschiedene Gründe:
1. Hohe Kompatibilität mit modernen Frontendtechnologien
Google Chrome unterstützt nahezu alle modernen HTML & CSS-Funktionalitäten. Welche Funktionalitäten in welchem Browser verfügbar sind, lässt sich auf der Internetseite https://caniuse.com anschauen. Diese Seite ist generell empfehlenswert, wenn Apps für ältere Browser entwickelt werden müssen.
2. Geschwindigkeit
Google Chrome ist ein sehr schneller Browser. Dies spart Zeit und Nerven bei der Entwicklung und auch bei der Benutzung der Anwendungen.
3. Gute Entwickler-Tools
Google Chrome bietet mit den Google Chrome Developer Tools eine extrem gute Unterstützung für Entwickler. Dies gilt nicht nur für die UI5-App Entwicklung sondern auch für generelle Webentwicklung. In diesem Blogbeitrag werde ich die grundsätzlichen Funktionalitäten der Google Chrome Developer Tools im Hinblick auf die Entwicklung von UI5-Apps vorstellen damit du sie gezielt für die Fehlersuche in UI5-Apps einsetzen kannst.
Grundsätzlich bedeutet dies, dass Google Chrome ein geeigneter Browser ist, um UI5-Apps zu entwickeln. Dies bedeutet aber nicht, dass man seine Apps ausschließlich für Google Chrome entwickelt und optimiert. Oftmals ist der Internet Explorer bei Unternehmen der Standardbrowser. Dies sollte man bei seinen Entwicklungen immer berücksichtigen und seine Apps für die entsprechenden Endgeräte mit ihren zugehörigen Browsern optimieren.
Noch ein weiterer kleiner Hinweis: Auch Microsoft Edge (der Nachfolger vom Internet Explorer) kommt mittlerweile für die App-Entwicklung infrage, da er seit 2020 auf Google Chrome beruht.
Google Chrome Developer Tools aktivieren
Das Aktivieren der Google Chrome Developer Tools ist ganz einfach. Drücke einfach in Google Chrome die Taste F12 oder die Tastenkombination STRG+SHIFT+I. Bei Macs lautet die Tastenkombination CMD+SHIFT+I. Es sollte sich dann rechts ein Fenster innerhalb deines Browsers öffnen:
Aktivierte Developer Tools auf erpcou.ch
Innerhalb dieses geöffneten Fensters kannst du verschiedene Tabs anklicken, die jeweils verschiedene Informationen bereitstellen. Ich werde im Folgenden auf alle relevanten Tabs und deren Informationsgehalt eingehen.
Tabs der Google Chrome Developer Tools
Du kannst auch gezielt Elemente analysieren, indem du einen Rechtsklick auf das gewünschte Element auf deiner App machst und danach im Kontextmenü auf „Untersuchen“ klickst. Die Google Chrome Developer Tools bieten eine hervorragende Grundlage für die Fehlersuche in deinen UI5-Apps. Meine Empfehlung daher: Die Developer Tools beim Entwickeln immer geöffnet haben.
CSS analysieren (Custom Styling)
Wenn du Probleme mit dem Styling deiner UI5-Apps hast oder einige Sachen falsch dargestellt werden, kann dir der „Elements“-Tab helfen, diese Fehler zu finden. Der Elements-Tab beinhaltet den kompletten Quellcode der Seite (s. Screenshot). Du kannst dort einzelne Elemente anklicken (1). Dann wird auf der Webseite der markierte Bereich blau dargestellt (2) und in den Developer Tools alle CSS-Eigenschaften angezeigt, die für dieses Element relevant sind (3):
Markiertes Element in den Developer Tools
Diese Möglichkeit hilft dir dabei, herauszufinden warum ein bestimmtes Element so aussieht, wie es aussieht. Du kannst zum Beispiel sehen, warum ein Styling nicht gezogen wird, obwohl du es gesetzt hast.
Hier ein kleines Beispiel: Ich habe zwei Buttons in einer App platziert. Einer soll die Standard Textfarbe haben, der andere Button soll eine rote Textfarbe besitzen. Dafür habe ich die CSS-Klasse „buttonColorRed“ definiert und zugewiesen. Es werden nun aber beide Buttons mit roter Textfarbe dargestellt. Ein Blick in den Elements-Tab zeigt (1, 2): Ich habe aus Versehen beiden Buttons aufgrund von Copy&Paste die CSS-Klasse zugewiesen (3):
CSS-Fehler finden
Fehler in der Logik finden
Im nächsten Tab, dem Consolen-Tab, kannst du Logikfehler innerhalb deiner App finden. Versuchst du beispielsweise, in deinem Controller eine Methode aufzurufen, die gar nicht vorhanden ist, erhältst du eine Fehlermeldung. Du kannst sogar mit einem Klick direkt an die Stelle im Coding springen, die fehlerhaft ist:
Fehler im Console Tab
Ein Blick in den Console-Tab lohnt sich also immer dann, wenn irgendeine Funktionalität gar nicht oder nicht so wie gewünscht funktioniert. Die Konsole bietet aber auch die Möglichkeit, selbst Coding auf der Seite auszuführen. Du kannst auch auf die UI5-Funktionalitäten zurückgreifen. Ein Beispiel dafür siehst du im folgenden Screenshot. Weiterführe Informationen findest du in diesem Blogartikel. Dieser bezieht sich zwar auf die Firefox-Konsole, kann aber auf die Google Chrome Developer Tools übertragen werden. Der Console-Tab ist bei mir immer der erste Anlaufpunkt bei der Fehlersuche in meinen UI5-Apps. Meistens kommt man mit den Fehlermeldungen aus der Konsole schon näher an die Ursache des Fehlers heran.
Konsolenbefehl direkt eingeben
Caching-Probleme ausschließen
Browser benutzen verschiedene Caching-Methoden, damit selbe Dateien nicht unnötig oft vom Server neu geladen werden. Dies führt manchmal allerdings zu unerwünschten Effekten. Um nachzuschauen, ob tatsächlich die aktuelle Version in deiner App geladen wurde, kannst du den „Source“-Tab verwenden. Dort stehen alle Quelldateien, die geladen wurden. Vergleiche die Datei dort mit der Datei in einer Entwicklungsumgebung. Falls diese sich unterscheiden, kannst du die Seite mit STRG+F5 aktualisieren. Dann werden alle Dateien komplett neu geladen. Im folgenden Screenshot habe ich einmal die Controller-Datei im Sources-Tab anzeigen lassen:
Controller-Datei im Sources-Tab
Performance & OData-Calls analysieren
Um die Performance sowie den Aufruf von OData-Services zu analysieren, kannst du den „Network“-Tab nutzen. Dort siehst du alle Anfragen, die die Seite schickt. Sogar Bilder und CSS-Dateien werden dort angezeigt. Damit die Calls im Network-Tab angezeigt werden, musst du den „Aufnahmeknopf“ (1) und die Seite neu laden. Dann trudeln in einer Tabelle nach und nach die Einträge ein (s. Screenshot).
Wichtig hierbei sind zum Beispiel Calls, die einen 404-Error (nicht gefunden) zurückgeben (2) oder die extrem lange dauern. Du siehst zu jedem Call, wie lange dieser gedauert hat. Auch die gesamte Ladezeit deiner Anwendung wird im Network-Tab angezeigt (3). Der Network-Tab ist immer dann hilfreich, wenn ein OData-Call nicht funktioniert oder die Performance extrem schlecht ist.
Calls im Network-Tab
Ausblick: UI5 Inspector & Debugging
Dieser Blogbeitrag hat dir gezeigt, welche Funktionalitäten die Google Developer Tools für die App-Entwicklung bieten und wie du sie bei der Fehlersuche in SAP UI5-Apps nutzen kannst. Die SAP hat zusätzlich noch ein weiteres Feature veröffentlicht: Den UI5-Inspector. Der UI5-Inspector ist eine Chrome Erweiterung und kann einfach integriert werden. Wenn du den UI5-Inspector installiert hast, erscheint ein neuer Tab in den Google Chrome Developer Tools („UI5“). Was es dort zu entdecken gibt, werde ich in einem weiteren Blogbeitrag beschreiben. Daneben bietet Google Chrome auch die Funktionalität, deine App zu debuggen. Auch dies werde ich in einem weiteren Artikel erörten, da dies ein zu großes Thema für diesen Beitrag ist.
Fazit
In diesem Blogbeitrag habe ich dir die wichtigsten Funktionen bei der die Fehlersuche in SAP UI5-Apps mit den Google Chrome Developer Tools vereinfachen kann..
Die Google Chrome Developer Tools sind ein extrem mächtiges Werkzeug, die dich bei der App-Entwicklung unterstützen können.
Wie sieht es bei dir aus? Nutzt du bereit die Developer Tools? Möchtest du weitere Infos zu bestimmten Features? Hast du weitere Tipps, die dir bei der Entwicklung helfen? Lass es mich gerne in den Kommentaren wissen 🙂
