Comment déboguer les liaisons d'événements JavaScript / jQuery avec Firebug ou des outils similaires ?

Question

Je dois déboguer une application web qui utilise jQuery pour effectuer des manipulations du DOM assez complexes et désordonnées. À un moment donné, certains des événements liés à des éléments particuliers ne se déclenchent pas et cessent simplement de fonctionner.

Si j'avais la possibilité de modifier le code source de l'application, je descendrais en profondeur et ajouterais un tas de déclarations Firebug console.log() et commenterais/décommenterais des morceaux de code pour essayer de cerner le problème. Mais supposons que je ne puisse pas modifier le code de l'application et que je doive travailler entièrement dans Firefox en utilisant Firebug ou des outils similaires.

Firebug est très utile pour me permettre de naviguer et de manipuler le DOM. Jusqu'à présent, cependant, je n'ai pas réussi à comprendre comment faire du débogage d'événements avec Firebug. En particulier, je veux juste voir une liste des gestionnaires d'événements liés à un élément donné à un moment donné (en utilisant les points d'arrêt JavaScript de Firebug pour retracer les changements). Mais soit Firebug n'a pas la capacité de voir les événements liés, soit je suis trop bête pour le trouver. :-)

Des recommandations ou des idées? Idéalement, j'aimerais simplement voir et modifier les événements liés aux éléments, de la même manière que je peux modifier le DOM aujourd'hui.

Answer 1

Voir Comment trouver les écouteurs d'événements sur un nœud DOM.

En résumé, en supposant qu'à un moment donné un gestionnaire d'événement soit attaché à votre élément (par exemple) : $('#foo').click(function() { console.log('cliqué !') });

Vous pouvez l'inspecter de la manière suivante :

• jQuery 1.3.x

  var clickEvents = $('#foo').data("events").click;
  jQuery.each(clickEvents, function(key, value) {
    console.log(value) // imprime "function() { console.log('cliqué !') }"
  })

• jQuery 1.4.x

  var clickEvents = $('#foo').data("events").click;
  jQuery.each(clickEvents, function(key, handlerObj) {
    console.log(handlerObj.handler) // imprime "function() { console.log('cliqué !') }"
  })

Voir jQuery.fn.data (où jQuery stocke votre gestionnaire de manière interne).

• jQuery 1.8.x

  var clickEvents = $._data($('#foo')[0], "events").click;
  jQuery.each(clickEvents, function(key, handlerObj) {
    console.log(handlerObj.handler) // imprime "function() { console.log('cliqué !') }"
  })

Answer 2

Il existe un joli bookmarklet appelé Visual Event qui peut vous montrer tous les événements attachés à un élément. Il dispose de mises en surbrillance codées par couleur pour différents types d'événements (souris, clavier, etc.). Lorsque vous survolez ces mises en surbrillance, il affiche le corps du gestionnaire d'événements, la manière dont il a été attaché, et le fichier/numéro de ligne (sur WebKit et Opera). Vous pouvez également déclencher manuellement l'événement.

Il ne peut pas trouver tous les événements car il n'y a pas de méthode standard pour rechercher quels gestionnaires d'événements sont attachés à un élément, mais il fonctionne avec des bibliothèques populaires comme jQuery, Prototype, MooTools, YUI, etc.

Answer 3

L'extension Eventbug a été publiée hier, voir : http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/

Honza

Answer 4

Vous pourriez utiliser FireQuery. Il affiche tous les événements attachés aux éléments du DOM dans l'onglet HTML de Firebug. Il montre également toutes les données attachées aux éléments via $.data.

Answer 5

Voici un plugin qui peut répertorier tous les gestionnaires d'événements pour n'importe quel élément/événement donné :

$.fn.listHandlers = function(events, outputFunction) {
    return this.each(function(i){
        var elem = this,
            dEvents = $(this).data('events');
        if (!dEvents) {return;}
        $.each(dEvents, function(name, handler){
            if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ')$' ,'i')).test(name)) {
               $.each(handler, function(i,handler){
                   outputFunction(elem, '\n' + i + ': [' + name + '] : ' + handler );
               });
           }
        });
    });
};

Utilisez-le comme ceci :

// Répertorier tous les gestionnaires onclick de tous les éléments ancre :
$('a').listHandlers('onclick', console.info);

// Répertorier tous les gestionnaires pour tous les événements de tous les éléments :
$('*').listHandlers('*', console.info);

// Écrire une fonction de sortie personnalisée :
$('#whatever').listHandlers('click',function(element,data){
    $('body').prepend('' + element.nodeName + ':