Wie debuggt man JavaScript / jQuery Event Bindings mit Firebug oder ähnlichen Tools?

Question

Ich brauche, um eine Web-Anwendung zu debuggen, die jQuery verwendet, um einige ziemlich komplex und chaotisch zu tun DOM Manipulation. An einem bestimmten Punkt werden einige der Ereignisse, die an bestimmte Elemente gebunden waren, nicht ausgelöst und funktionieren einfach nicht mehr.

Wenn ich die Möglichkeit hätte, den Quellcode der Anwendung zu bearbeiten, würde ich eine Reihe von Firebug console.log() Anweisungen und kommentierte/unkommentierte Codestücke, um das Problem zu lokalisieren. Aber nehmen wir an, dass ich den Anwendungscode nicht bearbeiten kann und vollständig in Firefox mit Firebug oder ähnlichen Tools arbeiten muss.

Mit Firebug kann ich sehr gut im DOM navigieren und es manipulieren. Bisher konnte ich jedoch noch nicht herausfinden, wie man mit Firebug Ereignis-Debugging betreibt. Genauer gesagt möchte ich nur eine Liste von Event-Handlern sehen, die zu einem bestimmten Zeitpunkt an ein bestimmtes Element gebunden sind (mit Firebug JavaScript-Haltepunkten, um die Änderungen zu verfolgen). Aber entweder Firebug hat nicht die Fähigkeit, gebundene Ereignisse zu sehen, oder ich bin zu dumm, es zu finden :-)

Irgendwelche Empfehlungen oder Ideen? Im Idealfall möchte ich nur sehen und bearbeiten Ereignisse gebunden, um Elemente, ähnlich wie ich DOM heute bearbeiten können.

Answer 1

Ver Wie man Ereignis-Listener auf einem DOM-Knoten findet .

Kurz gesagt, angenommen, irgendwann wird ein Event-Handler an Ihr Element angehängt (z. B.): $('#foo').click(function() { console.log('clicked!') });

Sie inspizieren es wie folgt:

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

Ver jQuery.fn.data (wo jQuery Ihren Handler intern speichert).

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

Answer 2

Es gibt ein schönes Bookmarklet namens Visuelles Ereignis die alle mit einem Element verbundenen Ereignisse anzeigen kann. Die verschiedenen Arten von Ereignissen (Maus, Tastatur usw.) werden farblich hervorgehoben. Wenn Sie mit dem Mauszeiger darüber fahren, wird der Text des Ereignishandlers, die Art der Zuordnung und die Datei-/Zeilennummer (bei WebKit und Opera) angezeigt. Sie können das Ereignis auch manuell auslösen.

Es kann nicht jedes Ereignis finden, da es keinen Standardweg gibt, um nachzuschauen, welche Event-Handler mit einem Element verbunden sind, aber es funktioniert mit populären Bibliotheken wie jQuery, Prototype, MooTools, YUI, etc.

Answer 3

Sie könnten verwenden FireQuery . Es zeigt alle Ereignisse an, die mit DOM-Elementen in der HTML-Registerkarte von Firebug verbunden sind. Es zeigt auch alle Daten, die mit den Elementen durch $.data .

Answer 4

Hier ist ein Plugin, das alle Event-Handler für ein bestimmtes Element/Ereignis auflisten kann:

$.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 );
               });
           }
        });
    });
};

Verwenden Sie es so:

// 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>');
});

Quelle: (mein Blog) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

Answer 5

Mit der WebKit-Entwicklerkonsole (zu finden in Chrome, Safari usw.) können Sie angehängte Ereignisse für Elemente anzeigen.

Weitere Einzelheiten in dieser Stack Overflow-Frage