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

609

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.

Jaanus
quelle

Antworten:

355

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!') }"
    })
Halbmond frisch
quelle
21
Zu Ihrer Information: Dies zeigt keine Ereignisse an, die nicht mit jQuery
Juan Mendes verbunden waren.
10
Stimmen Sie voll und ganz mit console.log () überein, es sollte jedoch mit etwas abgesichert werden, if (window.console)falls es im Code verbleibt ( viel einfacher als mit alert ()) und den IE kaputt macht.
Thepeer
14
@thepeer Persönlich bevorzuge ich es, am Anfang der Datei nach der Konsole zu suchen und, falls sie nicht existiert, ein Dummy-Objekt zu erstellen.
Andrew
Unten ist ein ähnlicher Ausschnitt zum Debuggen aller Ereignisse (entschuldigen Sie bitte die fehlende Formatierung):$('#foo').click(function(event) { var events = $(this).data('events'); $.each(events, function(event, handlers) { $.each(handlers, function(key, handlerObj) { console.log("--------------------------------------"); console.log(event+"["+key+"] | "+handlerObj.handler) ; }); });
Corey O.
3
@ BrainSlugs83: Siehe die verknüpfte Antwort in dieser Antwort. (tl; dr: du kannst nicht).
Crescent Fresh
162

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.

Matthew Crumley
quelle
8
Da dies in Inhalts-JavaScript ausgeführt wird, werden die Daten durch Abfragen von JavaScript-Bibliotheken abgerufen. Daher werden nur Ereignisse angezeigt, die mit einer unterstützten Bibliothek hinzugefügt wurden (einschließlich jQuery).
Matthew Flaschen
41

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.

Shrikant Sharat
quelle
1
Dieses Plugin hat einen großen Nachteil: Wenn Sie debuggen und den Wert einer Variablen überprüfen möchten, die eine JQuery-Sammlung enthält, können Sie den Wert nicht überprüfen, wenn Ihr Code angehalten wird. Dies ist nicht die Ursache für Firebug. Der Grund für mich, es zu deinstallieren. allein
Maarten Kieft
1
FireQuery scheint keine angehängten Ereignisse mehr anzuzeigen :(
Matty J
26

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/

James
quelle
11

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

Ex:

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

Tamás Pap
quelle
8

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

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

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.

Alex Heyd
quelle
5

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 ()

mateuscb
quelle
4

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.

Jayarjo
quelle
2
Diese Funktion wurde veröffentlicht und in FireBug 2.0.1 aufgenommen. Wenn Sie jetzt ein HTML-Element auf einer Seite untersuchen, gibt es ein neues Fenster "Ereignisse", in dem Sie angehängte Ereignisse und ihre Handler sehen können.
Derloopkat
4

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.

rauben
quelle
4

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:

Tooltip für Ereignisse

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.

Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
quelle
Leider funktioniert dies nicht gut zum Auffinden geerbter Listener.
Chukko
3

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.

Dan Lew
quelle
2

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 .

* Ereignisse * Seitenbereich in Firebug

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.

Sebastian Zartner
quelle
0

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

MRalwasser
quelle