Comment déboguer les problèmes côté client dans AEM IU tactile ou classique

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

Résolution

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 Chrome Google, 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.
  • Mise en forme du code JavaScript minimisé ou difficile à lire - Activez la variable jolie impression dans le débogueur Chrome pour faciliter la lecture et le débogage de JavaScript.
  • Modifier JavaScript localement pour tester les correctifs potentiels - Utilisez la variable Remplacements locaux dans 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.

  1. Ouvrez la page dans le navigateur Chrome à la page qui comporte une erreur.

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

  3. Dans le navigateur Chrome (en haut à droite), accédez à Outils = Plus d’outils = Outils de développement

  4. Cliquez sur "Console" du "Outils de développement".

  5. L’erreur JavaScript doit être répertoriée. À droite de l’erreur se trouve un lien vers le fichier et le numéro de ligne dans lequel le code JavaScript échoue. Cliquez sur le lien du fichier.

  6. Maintenant, vous devriez être sur le Sources sur 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.  Voir Documentation de Google Chrome pour plus d’informations sur les points d’arrêt.

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

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

Sur cette page