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

Utilisez $._data(htmlElement, "events") in jquery 1.7+;

ex:

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

Answer 2

Wie ein Kollege vorschlug, console.log > alert:

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

Answer 3

JQuery speichert Ereignisse im Folgenden:

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

Die Durchführung einer console.log($("a#somefoo").data("events")) sollte die Ereignisse auflisten, die mit diesem Element verbunden sind.

Answer 4

Mit DevTools in der neuesten Chrome (v29) Ich finde diese beiden Tipps sehr hilfreich für die Fehlersuche Ereignisse:

1. Auflistung der jQuery-Ereignisse des zuletzt ausgewähltes DOM-Element

   • Ein Element auf der Seite inspizieren

   • geben Sie Folgendes in die Konsole ein:

     $._data( $0 , "events") //Annahme jQuery 1.7+

   • Er listet alle mit ihm verbundenen jQuery-Ereignisobjekte auf, erweitert das betreffende Ereignis, klickt mit der rechten Maustaste auf die Funktion der Eigenschaft "handler" und wählt "Show function definition". Daraufhin wird die Datei geöffnet, die die angegebene Funktion enthält.

2. Die Nutzung der monitorEvents () Befehl

Answer 5

ev Symbol neben den Elementen

Innerhalb der Firefox-Entwicklerwerkzeuge Inspektor listet alle Ereignisse auf, die an ein Element gebunden sind.

Wählen Sie zunächst ein Element mit Ctrl + Shift + C z.B. Stack Overflow's upvote arrow.

Klicken Sie auf das ev Symbol rechts neben dem Element, und es öffnet sich ein Dialog:

Klicken Sie auf das Pausenzeichen || Symbol für das gewünschte Ereignis, wodurch der Debugger in der Zeile des Handlers geöffnet wird.

Sie können dort nun wie gewohnt im Debugger einen Haltepunkt setzen, indem Sie auf den linken Rand der Zeile klicken.

Dies wird erwähnt unter: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

Leider konnte ich keinen Weg finden, wie dies mit prettyfication zusammenspielt, es scheint sich nur an der Minified-Zeile zu öffnen: Wie kann man Javascript und CSS in Firefox / Firebug verschönern?

Getestet mit Firefox 42.