Comment déboguer les liaisons d'événements JavaScript avec Firebug et d'autres outils ?

Débogage des liaisons d'événements JavaScript avec Firebug et d'autres outils

Le débogage de manipulations DOM complexes dans une application Web basée sur jQuery peut s'avérer difficile lorsque les liaisons d'événements échoue mystérieusement. Si l'édition du code source n'est pas une option, il devient nécessaire d'exploiter les outils du navigateur pour le débogage.

Firebug pour le débogage d'événements

Bien que Firebug excelle dans la navigation et la manipulation du DOM, ses capacités de débogage d'événements sont moins évidentes. Pour inspecter les gestionnaires d'événements liés à un élément :

• Localisez l'élément dans le panneau DOM.
• Inspectez les données sous-jacentes de l'élément sous l'onglet "HTML".
• Dans la section "Données", développez le nœud "événements".
• Développez le type d'événement spécifique (par exemple, "clic") pour voir une liste des gestionnaires d'événements attachés à cet élément.

Exemple

En supposant un élément avec un gestionnaire d'événements lié via $('#foo'). click(function() { console.log('clicked!') }):

• Inspectez l'élément, développez ses données HTML et localisez le nœud "événements".
• Développez le type d'événement "clic".
• Vous devriez voir une définition de fonction qui imprime "cliqué !" une fois exécuté.

Autres outils de débogage

Si Firebug n'est pas disponible ou approprié, envisagez ces outils alternatifs :

• Outils de développement Chrome : Dans l'onglet "Événements", filtrez par l'élément qui vous intéresse ou sélectionnez des événements spécifiques sur la timeline panneau.
• Outils de développement React : Fournit un onglet d'écoute d'événements qui répertorie les gestionnaires d'événements liés pour les composants React.
• AngularJS Batarang : Une extension pour débogage des applications AngularJS, y compris l'accès aux informations sur les écouteurs d'événements.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!