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

In diesem Artikel wird erläutert, wie Sie clientseitige Probleme in AEM Touch-Benutzeroberfläche und/oder der klassischen Benutzeroberfläche anhand der folgenden Kennzahlen beheben können:

  • Debuggen von Ereignishandlern, die mit einer Schaltfläche in der Benutzeroberfläche verknüpft sind
  • Aktivieren des Debug-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.

JavaScript-Fehlerbeispiel

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 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 => Weitere Tools => Entwicklertools

  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 dem 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 Haltepunkt im Code, indem Sie mit der rechten Maustaste auf die Zeilennummer klicken und  Haltepunkt hinzufügen.   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  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.

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f