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

J'ai besoin de déboguer une application web qui utilise jQuery pour effectuer des manipulations 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 capacité de modifier le code source de l'application, je creuserais et ajouterais une multitude de déclarations console.log() de Firebug et je commenterais/décommenterais des morceaux de code pour essayer d'identifier 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 bon pour me permettre de naviguer et de manipuler le DOM. Jusqu'à présent, cependant, je n'ai pas été capable de comprendre comment faire du débogage d'événements avec Firebug. Plus précisément, je veux juste voir une liste des gestionnaires d'événements liés à un élément particulier à un moment donné (en utilisant les points d'arrêt JavaScript de Firebug pour tracer les changements). Mais soit Firebug n'a pas la capacité de voir les événements liés, soit je suis trop stupide 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.

Réponse #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énements soit attaché à votre élément (par exemple) : $ ('#foo').click(function() { console.log('cliqué !') });

Vous l’inspectez comme ceci :

• jQuery 1.3.x

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

• jQuery 1.4.x

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

Voir jQuery.fn.data (où jQuery stocke votre gestionnaire en interne).

• jQuery 1.8.x

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

Réponse #2

Il y a un joli bookmarklet appelé Visual Event qui peut vous montrer tous les événements attachés à un élément. Il dispose de surlignages en couleur pour différents types d'événements (souris, clavier, etc.). Lorsque vous passez la souris dessus, il affiche le corps du gestionnaire d'événements, comment il a été attaché et le fichier/numéro de ligne (sur WebKit et Opera). Vous pouvez également déclencher l'événement manuellement.

Il ne peut pas trouver chaque événement parce qu'il n'existe pas de manière standard de vérifier 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.

Réponse #3

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

Réponse #4

Voici un plugin qui peut lister tous les gestionnaires d'événements pour un é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 ainsi :

// List all onclick handlers of all anchor elements:
$('a').listHandlers('onclick', console.info);

// List all handlers for all events of all elements:
$('*').listHandlers('*', console.info);

// Write a custom output function:
$('#whatever').listHandlers('click',function(element,data){
    $('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>');
});

Src : (mon blog) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

Réponse #5

La console de développement WebKit (présente dans Chrome, Safari, etc.) vous permet de voir les événements attachés aux éléments.

Plus de détails dans cette question Stack Overflow

Réponse #6

Utilisez $._data(htmlElement, "events") dans jQuery 1.7+

ex :

$._data(document, "events") ou $._data($ ('.class_name').get(0), "events")