Fehlerbehebung bei clientseitigen Problemen in AEM Touch-Benutzeroberfläche oder der klassischen Benutzeroberfläche

Beschreibung

Umgebung

  • Experience Manager

Probleme/Symptome
In diesem Handbuch erfahren Sie, wie Sie JavaScript-Probleme in Ihrem Browser diagnostizieren.

JavaScript-Fehlerbeispiel

Uncaught TypeError: $(...).not(...).draggable is not a function
at 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

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 im Chrome-Debugger verwenden, um das Lesen und Debuggen von JavaScript zu vereinfachen.
  • Lokales Ändern von JavaScript, um potenzielle Fehlerbehebungen zu testen - Verwenden Sie die Lokale Überschreibungen in Chrome verwenden, um JavaScript-Dateien im Browser zu bearbeiten und Ä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.

  1. Öffnen Sie die Seite im Chrome-Browser, um die Seite anzuzeigen, die einen Fehler aufweist.

  2. 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.

  3. Navigieren Sie im Chrome-Browser (oben rechts) zu Tools =More Tools =Developer Tools

  4. Klicken Sie auf "Konsole" der "Entwicklertools".

  5. 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 Dateilink.

  6. Jetzt sollten Sie auf der Quellen in der Zeile, 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.  Siehe Dokumentation zu Google Chrome Weitere Informationen zu Haltepunkten.

  7. 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.

  • Gehen 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. Siehe diesem Artikel für die Vorgehensweise im Chrome-Browser von Google.

Auf dieser Seite