Umgebung
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)
A. Tipps zum Debugging von JavaScript
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 die Seite im Chrome-Browser, um die Seite anzuzeigen, 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 =More Tools =Developer Tools
Klicken Sie auf "Konsole" der "Entwicklertools".
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.
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.
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.