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

Beschreibung

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)

Auflösung

A. Tipps zum Debugging von JavaScript

  • Suchen und Debuggen von Ereignishandlern, die mit einer UI-Schaltfläche verknüpft sind - Wenn der Fehler oder das Problem in der Touch-optimierten Benutzeroberfläche mit einer klickbaren Schaltfläche verbunden ist, kann es hilfreich sein, alle mit diesem Element auf der Seite verknüpften Ereignishandler anzuzeigen.  In Google Chrome Browser, klicken Sie mit der rechten Maustaste auf die Schaltfläche, das Bild, den Link usw. und wählen Sie "Inspect". Im unteren linken Bereich wird das Element HTML ausgewählt.  Wählen Sie im unteren rechten Bereich die Registerkarte "Event Listeners", um die mit dem Element verbundenen Ereignis-Listener anzuzeigen.
  • Formatieren von minimiertem oder schwer lesbarem JavaScript-Code - Aktivieren Sie die pretty-print in der 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 Funktion in Chrome um JavaScript-Dateien im Browser zu bearbeiten, um Änderungen zu testen, bevor sie auf dem AEM Server vorgenommen werden.

B. Debug-Modus der Client-Bibliothek

Die Aktivierung des Debug-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 in Chrome Browser zur Seite, die einen Fehler aufweist.

  2. Fügen Sie in der Adressleiste am Ende der URL vor einem URL-Anker diesen Abfragezeichenfolgenparameter hinzu debugClientLibs=true.

    Beispiel: http://localhost:4502/siteadmin?<b>debugClientLibs=true</b>#/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 Debug-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. In Chrome Browser (oben rechts), navigieren Sie zu Tools =More Tools =Developer Tools

  4. Klicken Sie auf "Konsole"im Bedienfeld "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 Google Chrome Dokumentation Weitere Informationen zu Haltepunkten.

  7. Aktualisieren Sie die Seite, und Sie können mit dem Debugging des JavaScripts beginnen.

C. Minimierung deaktivieren

Wenn das JavaScript beim Debugging minimiert wird, ist es hilfreich, es entweder im Browser zu formatieren oder die Minimierung zu deaktivieren.

  • Öffnen von http://aemhost/system/console/configMgr/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl

  • Deaktivieren Minimieren

  • Klicken Speichern

  • Aktualisieren Sie die Seite, auf der Sie debuggen, und das JavaScript ist leichter zu lesen und Haltepunkte festzulegen.

Debugging-Tipp

Wenn Sie die Minimierung in den Client-Bibliotheken nicht deaktivieren können, können Sie das JavaScript zumindest für ein besseres Debugging ziemlich ausdrucken. Siehe diesem Artikel für die Vorgehensweise in Google Chrome Browser.

Auf dieser Seite