Comment déboguer les problèmes côté client dans AEM IU tactile ou classique
L’article explique comment déboguer les problèmes côté client dans AEM IU tactile et/ou classique à l’aide des mesures suivantes :
- Débogage des gestionnaires d’événements liés à un bouton de l’interface utilisateur
- Activation du mode de débogage de la bibliothèque cliente
- Désactivation de JavaScript réduit
Description description
Environnement
Experience Manager
Problèmes/Symptômes
Ce guide vous explique comment diagnostiquer les problèmes JavaScript dans votre navigateur.
Exemple d’erreur JavaScript
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)
Résolution resolution
A. Conseils de débogage Javascript
- Recherchez et déboguez des gestionnaires d’événements associés à un bouton d’interface utilisateur - Si l’erreur ou le problème est associé à un bouton cliquable dans l’interface utilisateur tactile, il peut être utile de voir tous les gestionnaires d’événements associés à cet élément sur la page. Dans le navigateur Google Chrome, cliquez avec le bouton droit de la souris sur le bouton, l’image, le lien, etc., et sélectionnez "Inspect". Dans le panneau inférieur gauche, l’élément HTML est sélectionné. Dans le panneau inférieur droit, sélectionnez l’onglet « Écouteurs d’événements » pour afficher les écouteurs d’événements associés à l’élément.
- Format minimisé ou difficile à lire du code JavaScript - Activez la fonction jolie impression dans le débogueur Chrome pour faciliter la lecture et le débogage de JavaScript.
- Modifier localement javascript pour tester les correctifs potentiels - Utilisez la fonction Local Overrides de Chrome pour modifier les fichiers JavaScript sur le navigateur afin de tester les modifications avant de les effectuer sur le serveur AEM.
B. Mode de débogage de la bibliothèque cliente
L’activation du mode de débogage de la bibliothèque cliente peut s’avérer utile pour rechercher les fichiers distincts qui composent les bibliothèques clientes.
-
Ouvrez la page dans le navigateur Chrome et accédez à la page qui comporte une erreur.
-
Dans la barre d’adresse située à la fin de l’URL, avant toute ancre d’URL, ajoutez ce paramètre de chaîne de requête "debugClientLibs=true".
Par exemple : http://localhost:4502/siteadmin?debugClientLibs=true#/content/we-retail
Avec cette option, la bibliothèque cliente charge tous ses fichiers séparément au lieu de les consolider.
Dans l’interface utilisateur tactile, l’activation du mode de débogage des bibliothèques clientes peut désactiver la page. Cependant, il s’agit toujours d’une fonctionnalité utile, car elle peut être utilisée pour afficher le fichier de la bibliothèque cliente qui contient la ligne de code spécifique que vous déboguez.
-
Dans le navigateur Chrome (en haut à droite), accédez à Outils =
>Autres outils =>Outils de développement -
Cliquez sur "Console" du panneau "Outils de développement".
-
L’erreur JavaScript doit être répertoriée. À droite de l’erreur se trouve un lien avec le fichier et le numéro de ligne dans lesquels le code JavaScript échoue. Cliquez sur le lien du fichier.
-
Vous devez maintenant vous trouver dans l’onglet Sources de la ligne où le code a échoué. Définissez un point d’arrêt dans le code en cliquant avec le bouton droit sur le numéro de ligne et en sélectionnant Ajouter un point d’arrêt. Pour plus d’informations sur les points d’arrêt, consultez la documentation de Google Chrome .
-
Actualisez la page et vous pouvez commencer à déboguer le code JavaScript.
C. Désactiver la minimisation
Lors du débogage, si le code JavaScript est minimisé, il est utile de le formater dans le navigateur ou de désactiver la minimisation.
-
Accédez à http://aemhost/system/console/configMgr/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl
-
Décochez Minify
-
Cliquez sur Enregistrer.
-
Actualisez la page que vous déboguez et le code JavaScript sera plus facile à lire et il sera plus simple de définir des points d’arrêt.
Conseil de débogage
Si vous ne parvenez pas à désactiver la minimisation sur les bibliothèques clientes, vous pouvez au moins utiliser la fonctionnalité pretty-print sur le code JavaScript pour un meilleur débogage. Voir cet article pour savoir comment procéder dans le navigateur Google Chrome.