Fehlerbehebung bei Client-seitigen Problemen in der Touch-optimierten oder klassischen AEM-Benutzeroberfläche
In diesem Artikel wird erläutert, wie Sie Client-seitige Probleme in der AEM Touch-Benutzeroberfläche und/oder der klassischen Benutzeroberfläche mit den folgenden Maßnahmen beheben können:
- Debuggen von Ereignis-Handlern, die an eine UI-Schaltfläche gebunden sind
- Aktivieren des Debugging-Modus der Client-Bibliothek
- Deaktivieren von minimiertem JavaScript
Beschreibung description
Umgebung
Experience Manager
Probleme/Symptome
In dieser Anleitung erfahren Sie, wie Sie JavaScript-Probleme in Ihrem Browser diagnostizieren.
Beispiel für einen JavaScript-Fehler
Uncaught TypeError: $(...).not(...).draggable is not a functionat HTMLDocument. (lightbox.js:45)at HTMLDocument.dispatch (jquery.js:4665)at HTMLDocument.elemData.handle (jquery.js:4333)at Object.trigger (jquery.js:4574)at HTMLElement. (jquery.js:5284)at Function.each (jquery.js:384)at jQuery.fn.init.each (jquery.js:136)at jQuery.fn.init.trigger (jquery.js:5283)
Lösung resolution
A. Tipps zum Debugging von JavaScript
- Suchen und Debuggen von Ereignis-Handlern, die an eine UI-Schaltfläche gebunden sind – Wenn der Fehler oder das Problem in der Touch-optimierten Benutzeroberfläche mit einer anklickbaren Schaltfläche verbunden ist, kann es hilfreich sein, alle mit diesem Element auf der Seite verknüpften Ereignis-Handler anzuzeigen. Klicken Sie im Google Chrome-Browser mit der rechten Maustaste auf die Schaltfläche, das Bild, den Link usw. und wählen Sie "Inspect". Im unteren linken Bedienfeld wird das HTML- Element ausgewählt. Wählen Sie im unteren rechten Bedienfeld die Registerkarte „Ereignis-Listener“, um die mit dem Element verbundenen Ereignis-Listener anzuzeigen.
- Formatieren von minimiertem oder schwer lesbarem JavaScript-Code - Aktivieren Sie die pretty-print-Funktion im Chrome-Debugger, um das Lesen und Debuggen von JavaScript zu vereinfachen.
- Lokales Ändern von JavaScript, um potenzielle Fehlerbehebungen zu testen - Verwenden Sie die Funktion Lokale Überschreibungen in Chrome, um JavaScript-Dateien im Browser zu bearbeiten, um Änderungen zu testen, bevor sie auf dem AEM-Server vorgenommen werden.
B. Debugging-Modus der Client-Bibliothek
Die Aktivierung des Debugging-Modus der Client-Bibliothek kann nützlich sein, um die separaten Dateien zu durchsuchen, aus denen die Client-Bibliotheken bestehen.
-
Öffnen Sie im Chrome-Browser die Seite, die einen Fehler aufweist.
-
Fügen Sie in der Adressleiste am Ende der URL vor einem URL-Anker den Abfragezeichenfolgenparameter „debugClientLibs=true“ hinzu.
Beispiel: http://localhost:4502/siteadmin?debugClientLibs=true#/content/we-retail
Diese Option bewirkt, dass die Client-Bibliothek alle zugehörigen Dateien separat lädt, anstatt sie zu konsolidieren.
In der Touch-Benutzeroberfläche kann das Aktivieren des Debugging-Modus der Client-Bibliotheken die Seite beschädigen. Sie ist jedoch weiterhin eine nützliche Funktion, da sie verwendet werden kann, um anzuzeigen, welche Datei in der Client-Bibliothek die bestimmte Codezeile enthält, die Sie debuggen.
-
Navigieren Sie im Chrome-Browser (oben rechts) zu Tools
>Weitere Tools>Entwickler-Tools -
Klicken Sie auf Konsole des Bedienfelds Entwickler-Tools.
-
Der JavaScript-Fehler sollte aufgelistet werden. Rechts neben dem Fehler befindet sich ein Link mit der Datei und der Zeilennummer, bei der der JavaScript-Code fehlschlägt. Klicken Sie auf den Datei-Link.
-
Jetzt sollten Sie sich auf der Registerkarte Quellen in der Zeile befinden, in der der Code fehlgeschlagen ist. Setzen Sie einen Breakpoint im Code, indem Sie mit der rechten Maustaste auf die Zeilennummer klicken und Breakpoint hinzufügen“ auswählen. Weitere Informationen zu Haltepunkten finden Sie in 🔗 Dokumentation zu Google Chrome .
-
Aktualisieren Sie die Seite, und Sie können mit dem Debugging des JavaScripts beginnen.
C. Deaktivieren der Minimierung
Wenn das JavaScript beim Debugging minimiert wird, ist es hilfreich, es entweder im Browser zu formatieren oder die Minimierung zu deaktivieren.
-
Navigieren Sie zu http://aemhost/system/console/configMgr/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl .
-
Deaktivieren Sie Minimieren
-
Klicken Sie auf Speichern.
-
Aktualisieren Sie die Seite, auf der Sie debuggen, und das Javascript wird leichter zu lesen und Breakpoints werden leichter zu setzen sein.
Debugging-Tipp
Wenn Sie nicht in der Lage sind, die Minimierung auf den Client-Bibliotheken zu deaktivieren, dann können Sie zumindest das Javascript zur besseren Fehlersuche per „pretty-print“ ausdrucken. In diesem Artikel erfahren Sie, wie dies im Google Chrome-Browser geschieht.