Comment journaliser tous les événements JavaScript dans la console pour le débogage
Outils de développement ChromeDécouvrons comment déboguer tous les événements JavaScript et les consigner dans la console grâce à une astuce astucieuse.
Par exemple, il est crucial lors du débogage d'une page Web d'observer combien d'événements de soumission un élément de formulaire déclenche.
Cette méthode de débogage aide à éviter d'envoyer et de suivre plusieurs fois les événements du navigateur..
Écoutez tous les événements en JavaScript
Il existe une API pratique dans Outils de développement Chrome qui rend cela facile.
L'API monitorEvents vous permet de journaliser tout événement JavaScript en cours dans la console de Chrome. Vous devez simplement fournir à l'API un élément et éventuellement l'événement auquel vous souhaitez écouter :
//syntaxe//monitorEvents(element,event)//écouter tous les événementsmonitorEvents(window);//arrêter d'écouterunmonitorEvents(window);
Pour écouter tous les événements submit, le code ressemblerait à ceci :
//commencer à écoutermonitorEvents(window,"submit");//arrêter d'écouterunmonitorEvents(window,"submit");
Notez que si vous souhaitez cesser d'écouter à nouveau des événements, vous utilisez simplement unmonitorEvents.
Exemple: Journalisez tous les événements de clic de l'objet window dans la console
Maintenant, avec cet outil de débogage pratique dans notre boîte à outils, nous pouvons par exemple sélectionner un élément de formulaire dans Outils de développement Chrome pour commencer à surveiller les événements de soumission.
Après avoir sélectionné l'élément dans l'onglet éléments, Outils de développement Chrome affichera un petit signe $0 à côté.
Si vous gardez l'élément HTML sélectionné, vous pouvez maintenant utiliser le $0 pour faire rapidement référence à l'élément dans la console - sans avoir besoin d'un sélecteur CSS.
Maintenant, avec l'API monitorEvents, vous pouvez rapidement et facilement écouter tous les événements JavaScript en cours et les afficher dans la console pour le débogage :
C'est utile pour toutes sortes de suivi d'événements car vous pouvez déboguer chaque événement JavaScript dans la console sans avoir à exécuter le débogueur GTM.
Alors voilà. En utilisant l'API de Outils de développement Chrome, c'est le moyen le plus rapide que je connaisse pour surveiller tous les événements JavaScript.
Dites-moi sur Twitter si cela a fonctionné pour vous et si vous avez aimé cela. ✌️
