Event Listeners décrivent chaque élément doté d'un event listener, coloré par type (clic, survol, défilement, toucher, clavier et formulaire) et montre d'où vient chaque gestionnaire et fait clignoter les éléments à mesure que le DOM change.
Déterminer pourquoi quelque chose réagit – ou ne réagit pas – commence généralement par une question à laquelle la page ne répondra pas: existe-t-il un gestionnaire de clics sur cet élément? Quel élément possède réellement le comportement de survol? Qu'est-ce qu'écouter défiler et faire bégayer la page? Browser DevTools peut répertorier les listeners d'un élément à la fois, si vous savez déjà quel élément sélectionner.
Cet outil répond à la question pour toute la page à la fois. Chaque élément avec un listener obtient un contour dans la couleur de son type - cliquez, survolez, faites défiler, touchez et faites glisser, clavier ou formulaire et focus - et le survol de l'un d'entre eux affiche les événements exacts et l'origine de chacun: un attribut en ligne, un sur la propriété, un gestionnaire React ou Vue, jQuery ou addEventListener. Les vignettes de catégorie activent et désactivent chaque type, et la liste en dessous nomme chaque élément, donc un clic vous y fait défiler.
Les frameworks sont gérés correctement. React attache ses listeners à la racine et distribue les événements en interne, ce qui donnerait l'impression que l'ensemble de l'application est cliquable; l'outil met de côté ces enregistrements racine et affiche les gestionnaires React sur les éléments qui les déclarent. L'analyse rapide ne nécessite aucun rechargement et couvre les gestionnaires en ligne, React, Vue et jQuery. Listeners ajoutés avec addEventListener avant l'ouverture de l'outil ne peuvent être vus qu'à partir du début du chargement d'une page, donc Reload & record recharge la page une fois avec l'enregistrement activé - l'outil se rouvre ensuite tout seul avec chaque listener inclus, ceux au niveau de la page sur window et document également.
Le deuxième onglet surveille le DOM lui-même. Chaque nœud ajouté ou supprimé, changement d'attribut et changement de texte clignote sur la page, les compteurs affichent les mutations par seconde et une liste classe les éléments qui changent le plus, avec les attributs impliqués. Un flux constant alors que personne ne touche la page signifie généralement une minuterie, une animation pilotée par JavaScript ou un framework restituant plus qu'il ne le devrait – exactement ce qui décharge les batteries et fait bégayer les pages.
Les éléments avec clic, survol, défilement, toucher, clavier et listeners de formulaire sont décrits dans leur propre couleur, avec des vignettes pour afficher ou masquer chaque type.
Attributs en ligne, propriétés sur propriété, gestionnaires React et Vue, événements jQuery et appels addEventListener, étiquetés sur chaque élément.
listeners au niveau racine de React sont mis de côté et ses gestionnaires sont affichés sur les éléments qui les déclarent plutôt que sur l'ensemble de l'application.
Reload & record intercepte chaque appel addEventListener depuis le début du chargement d'une page, y compris listeners window et document, pour ce chargement uniquement.
Les nœuds ajoutés et supprimés, les modifications d'attributs et les modifications de texte clignotent sur la page, avec un compteur de mutations par seconde.
Une liste classée des éléments qui changent le plus, avec les attributs impliqués, pointe directement vers des rendus incontrôlables.
Voyez d'un coup d'œil si un bouton a réellement un listener ou si le gestionnaire se trouve à la place sur un élément wrapper.
Trouvez tous les éléments écoutant le défilement, la molette ou le déplacement tactile, y compris listeners sur window et document.
Vérifiez quels contrôles répondent aux événements du clavier et lesquels ne répondent qu'à la souris.
Surveillez le compteur de mutations pendant que la page est inactive; les éléments qui changent constamment pointent vers une minuterie ou un framework effectuant un travail supplémentaire.
Survolez un site inconnu pour voir quelles parties sont interactives et quel framework les a câblées.
Cliquez sur l'icône Event Listeners dans le dock DevSuite Pro. Une analyse rapide s'exécute immédiatement et décrit chaque élément trouvé.
Survolez n’importe quel élément souligné pour voir ses événements et leurs sources. Utilisez les vignettes de catégorie pour afficher uniquement listeners qui cliquent, survolent ou font défiler.
Appuyez sur Reload & record pour recharger la page une fois avec l'enregistrement activé. L'outil se rouvre tout seul et inclut désormais chaque appel addEventListener.
Cliquez sur une ligne de la liste pour faire défiler la page jusqu'à cet élément et le flasher. Copy report vous donne la liste complète sous forme de texte.
Ouvrez l'onglet DOM mutations et utilisez la page. Les éléments changeants clignotent et les plus occupés montent en haut de la liste.
Installez DevSuite Pro gratuitement et débloquez plus de 74 outils de développement pour votre navigateur.
