Question Comment déboguer des 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 en faire un peu complexe et désordonné DOM manipulation. À un moment donné, certains événements liés à des éléments particuliers ne sont pas déclenchés et cessent tout simplement de fonctionner.

Si j'avais la possibilité d'éditer la source de l'application, je descendrais et ajouterais un tas de Pyromane  console.log() déclarations et commenter / décommenter des morceaux de code pour tenter de localiser le problème. Mais supposons que je ne puisse pas éditer 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 laisser naviguer et manipuler le DOM. Jusqu'à présent, cependant, je n'ai pas été capable de comprendre comment faire un débogage d'événement avec Firebug. Plus précisément, je veux juste voir une liste de 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 Firebug n'a pas la capacité de voir les événements liés, ou je suis trop bête pour le trouver. :-)

Des recommandations ou des idées? Idéalement, je voudrais juste voir et éditer les événements liés aux éléments, de la même façon que je peux modifier le DOM aujourd'hui.


590
2018-02-20 19:42


origine


Réponses:


Voir Comment trouver les écouteurs d'événement sur un noeud DOM.

En un mot, en supposant qu'à un certain moment un gestionnaire d'événement est attaché à votre élément (par exemple): $('#foo').click(function() { console.log('clicked!') });

Vous l'inspectez comme ça:

  • 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!') }"
    })
    

349
2018-02-20 20:21



Il y a un joli bookmarklet appelé Événement visuel cela peut vous montrer tous les événements attachés à un élément. Il dispose de hautes lumières codées par couleur pour différents types d'événements (souris, clavier, etc.). Lorsque vous passez la souris dessus, elle affiche le corps du gestionnaire d'événements, son rattachement et le numéro de fichier / ligne (sur WebKit et Opera). Vous pouvez également déclencher l'événement manuellement.

Il ne peut pas trouver tous les événements car il n'existe aucun moyen standard de rechercher les gestionnaires d'événements attachés à un élément, mais il fonctionne avec des bibliothèques populaires telles que jQuery, Prototype, MooTools, YUI, etc.


162
2018-02-20 19:52



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


73
2017-10-30 12:05



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


41
2017-10-07 03:26



Voici un plugin qui peut répertorier 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 comme ceci:

// 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/


26
2018-02-20 21:04



La console développeur WebKit (disponible dans Chrome, Safari, etc.) vous permet d'afficher les événements associés aux éléments.

Plus de détails dans cette question Stack Overflow


22
2017-08-21 18:21



Utilisation $._data(htmlElement, "events") en jquery 1.7+;

ex:

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


11
2017-08-20 15:12



Comme un collègue l'a suggéré, console.log> alert:

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

8
2017-11-18 16:31



jQuery stocke les événements suivants:

$("a#somefoo").data("events")

Faire un console.log($("a#somefoo").data("events")) devrait énumérer les événements attachés à cet élément.


6
2018-02-20 20:12