Wie debugge ich JavaScript / jQuery-Ereignisbindungen mit Firebug oder ähnlichen Tools?

Ich muss eine Webanwendung debuggen, die jQuery verwendet, um einige ziemlich komplexe und unordentliche DOM- Manipulationen durchzuführen . Zu einem bestimmten Zeitpunkt werden einige Ereignisse, die an bestimmte Elemente gebunden waren, nicht ausgelöst und funktionieren einfach nicht mehr.

Wenn ich in der Lage wäre, die Anwendungsquelle zu bearbeiten, würde ich einen Drilldown durchführen und eine Reihe von Firebug- console.log() Anweisungen sowie Code-Kommentare / Kommentare hinzufügen , um zu versuchen, das Problem zu lokalisieren. Nehmen wir jedoch an, ich kann den Anwendungscode nicht bearbeiten und muss vollständig in Firefox mit Firebug oder ähnlichen Tools arbeiten.

Firebug ist sehr gut darin, mich im DOM navigieren und manipulieren zu lassen. Bisher konnte ich jedoch nicht herausfinden, wie das Debuggen von Ereignissen mit Firebug durchgeführt wird. Insbesondere möchte ich nur eine Liste von Ereignishandlern anzeigen, die zu einem bestimmten Zeitpunkt an ein bestimmtes Element gebunden sind (mithilfe von Firebug-JavaScript-Haltepunkten, um die Änderungen zu verfolgen). Aber entweder kann Firebug gebundene Ereignisse nicht sehen, oder ich bin zu dumm, um sie zu finden. :-)

Irgendwelche Empfehlungen oder Ideen? Im Idealfall möchte ich nur Ereignisse sehen und bearbeiten, die an Elemente gebunden sind, ähnlich wie ich DOM heute bearbeiten kann.

Siehe So finden Sie Ereignis-Listener auf einem DOM-Knoten .

Kurz gesagt, wenn irgendwann ein Ereignishandler an Ihr Element angehängt ist (z. B.): $('#foo').click(function() { console.log('clicked!') });

Sie inspizieren es so:

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

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

Es gibt ein schönes Lesezeichen namens Visual Event , das Ihnen alle Ereignisse anzeigen kann, die an ein Element angehängt sind. Es verfügt über farbcodierte Highlights für verschiedene Arten von Ereignissen (Maus, Tastatur usw.). Wenn Sie mit der Maus darüber fahren, werden der Hauptteil des Ereignishandlers, der Anhang und die Datei- / Zeilennummer (in WebKit und Opera) angezeigt. Sie können das Ereignis auch manuell auslösen.

Es kann nicht jedes Ereignis finden, da es keine Standardmethode gibt, um festzustellen, welche Ereignishandler an ein Element angehängt sind. Es funktioniert jedoch mit gängigen Bibliotheken wie jQuery, Prototype, MooTools, YUI usw.

Sie könnten FireQuery verwenden . Es zeigt alle Ereignisse an, die mit DOM-Elementen auf der HTML-Registerkarte des Firebugs verknüpft sind. Es werden auch alle Daten angezeigt, die an die Elemente durch angehängt sind $.data.

Hier ist ein Plugin, das alle Ereignishandler 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>');
});

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

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

Weitere Details in dieser Frage zum Stapelüberlauf

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

Ex:

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

Wie ein Kollege vorgeschlagen hat, wird console.log> alert:

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

jQuery speichert Ereignisse wie folgt:

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

Wenn Sie a ausführen, console.log($("a#somefoo").data("events"))sollten die mit diesem Element verbundenen Ereignisse aufgelistet werden.

Verwenden von DevTools in der neuesten Version von Chrome (Version 29) Ich finde diese beiden Tipps sehr hilfreich beim Debuggen von Ereignissen:

1. Auflisten von jQuery-Ereignissen des zuletzt ausgewählten DOM-Elements

   • Überprüfen Sie ein Element auf der Seite
   • Geben Sie Folgendes in die Konsole ein:

     $ ._ data ( $ 0 , "events") // unter der Annahme von jQuery 1.7+

   • Es werden alle damit verbundenen jQuery-Ereignisobjekte aufgelistet, das interessierte Ereignis erweitert, mit der rechten Maustaste auf die Funktion der Eigenschaft "handler" geklickt und "Funktionsdefinition anzeigen" ausgewählt. Es öffnet sich die Datei mit der angegebenen Funktion.

2. Verwenden des Befehls monitorEvents ()

Die FireBug-Crew arbeitet anscheinend an einer EventBug-Erweiterung. Es wird ein weiteres Fenster zu FireBug - Events hinzugefügt.

"Im Ereignisfenster werden alle Ereignishandler auf der Seite aufgelistet, die nach Ereignistyp gruppiert sind. Für jeden Ereignistyp können Sie die Elemente öffnen, an die die Listener gebunden sind, sowie eine Zusammenfassung der Funktionsquelle." EventBug steigt

Obwohl sie momentan nicht sagen können, wann es veröffentlicht wird.

Ich habe auch jQuery Debugger im Chrome Store gefunden. Sie können auf ein Dom-Element klicken und es werden alle daran gebundenen Ereignisse zusammen mit der Rückruffunktion angezeigt. Ich habe eine Anwendung debuggt, bei der Ereignisse nicht ordnungsgemäß entfernt wurden, und dies hat mir geholfen, sie in wenigen Minuten aufzuspüren. Offensichtlich ist dies für Chrom, nicht für Firefox.

ev Symbol neben Elementen

Im Inspektor der Firefox Developer Tools alle Ereignisse aufgelistet, die an ein Element gebunden sind.

Wählen Sie zuerst ein Element mit Ctrl+ Shift+ ausCWählen , z. B. den Aufwärtspfeil des Stapelüberlaufs.

Klicken Sie auf das evSymbol rechts neben dem Element. Ein Dialogfeld wird geöffnet:

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

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

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

Leider konnte ich keinen Weg finden, um mit Prettyfication gut zu spielen. Es scheint sich nur an der minimierten Zeile zu öffnen: Wie verschönere ich Javascript und CSS in Firefox / Firebug?

Getestet auf Firefox 42.

Laut diesem Thread gibt es in Firebug keine Möglichkeit, anzuzeigen, welche Ereignisse an Listener in einem DOM-Element angehängt sind.

Das Beste, was Sie tun können, ist entweder das, was tj111 vorschlägt, oder Sie können mit der rechten Maustaste auf das Element im HTML-Viewer klicken und auf "Ereignisse protokollieren" klicken, um zu sehen, welche Ereignisse für ein bestimmtes DOM-Element ausgelöst werden. Ich denke , man könnte das tun , um zu sehen , was Ereignisse könnten bestimmte Funktionen abzufeuern werden.

Mit der Version 2.0 Firebug eingeführt , um eine Event Panel , das listet alle Ereignisse für das Element zur Zeit innerhalb des ausgewählten HTML - Panel .

Es können auch Ereignis-Listener angezeigt werden, die in jQuery-Ereignisbindungen eingebunden sind, falls die Option Wrapped Listener anzeigen aktiviert ist, die Sie über das Optionsmenü des Ereignisbedienfelds erreichen können .

In diesem Bereich lautet der Workflow zum Debuggen eines Ereignishandlers wie folgt:

1. Wählen Sie das Element mit dem Ereignis-Listener aus, den Sie debuggen möchten
2. Im Inneren des Events Seitenwand der rechten Maustaste die Funktion unter dem zugehörigen Ereignis und wählen Sie Haltepunkt setzen
3. Ereignis auslösen

=> Die Skriptausführung stoppt in der ersten Zeile der Ereignishandlerfunktion und Sie können sie schrittweise debuggen.

Firebug 2 enthält jetzt das Debuggen / Überprüfen von DOM-Ereignissen.