webentwicklung-frage-antwort-db.com.de

Wie kann man JavaScript / jQuery-Ereignisbindungen mit Firebug oder ähnlichen Tools debuggen?

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

Wenn ich die Anwendungsquelle bearbeiten könnte, würde ich einen Drilldown durchführen und eine Reihe von Firebugconsole.log() -Anweisungen und Kommentaren/Kommentieren von Codeteilen hinzufügen, um zu versuchen, das Problem genau zu bestimmen. Angenommen, 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 werden kann. 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 nachzuverfolgen). 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 heute DOM bearbeiten kann.

601
Jaanus

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

Kurz gesagt, unter der Annahme, dass 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 (wobei 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!') }"
    })
    _
353
Crescent Fresh

Es gibt ein schönes Lesezeichen mit dem Namen Visual Event , mit dem Sie alle Ereignisse anzeigen können, die mit einem Element verknüpft sind. Es verfügt über farbcodierte Markierungen für verschiedene Ereignistypen (Maus, Tastatur usw.). Wenn Sie den Mauszeiger darüber halten, werden der Text des Ereignishandlers, seine Anhänge sowie 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 nachzuschlagen, welche Ereignishandler an ein Element angehängt sind, aber es funktioniert mit gängigen Bibliotheken wie jQuery, Prototype, MooTools, YUI usw.

162
Matthew Crumley

Die Eventbug-Erweiterung wurde gestern veröffentlicht, siehe: http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/

73
Jan Odvarko

Sie könnten FireQuery verwenden. Es zeigt alle Ereignisse an, die an DOM-Elemente in der HTML-Registerkarte von Firebug angehängt sind. Es werden auch alle Daten angezeigt, die über $.data an die Elemente angehängt wurden.

41
Shrikant Sharat

Hier ist ein Plugin, das alle Event-Handler für ein bestimmtes Element/Event 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 );
               });
           }
        });
    });
};

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

26
James

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

Weitere Einzelheiten in dieser Frage zum Stapelüberlauf

23

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

ex:

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

11
Tamás Pap

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

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

jQuery speichert Ereignisse in folgenden Verzeichnissen:

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

Durch Ausführen von console.log($("a#somefoo").data("events")) sollten die Ereignisse aufgelistet werden, die an dieses Element angehängt sind.

6
Alex Heyd

Verwenden von DevTools in den neuesten Chrome (v29) Ich finde diese beiden Tipps sehr hilfreich für das 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 ( $ , "events") // unter der Annahme von jQuery 1.7+

    • Es listet alle zugehörigen jQuery-Ereignisobjekte auf, erweitert das interessierte Ereignis, klickt mit der rechten Maustaste auf die Funktion der Eigenschaft "handler" und wählt "Funktionsdefinition anzeigen". Die Datei mit der angegebenen Funktion wird geöffnet.
  2. Verwenden Sie den Befehl monitorEvents ()

5
mateuscb

Ich habe auch jQuery Debugger im chrome Store gefunden. Sie können auf ein dom-Element klicken und es zeigt alle daran gebundenen Ereignisse zusammen mit der Rückruffunktion an. Ich habe eine Anwendung debuggt, bei der Ereignisse nicht ordnungsgemäß entfernt wurden, und dies hat mir dabei geholfen, sie in wenigen Minuten zu finden. Offensichtlich ist dies jedoch für chrome, nicht für Firefox.

4
Rob

Es sieht so aus, als würde die FireBug-Crew an einer EventBug-Erweiterung arbeiten. Es wird ein weiteres Fenster zu FireBug - Events hinzugefügt.

"Das Ereignisfenster listet alle Ereignishandler auf der Seite nach Ereignistyp gruppiert auf. Für jeden Ereignistyp können Sie die Elemente anzeigen, an die die Listener gebunden sind, und eine Zusammenfassung der Funktionsquelle." EventBug Rising

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

4
jayarjo

ev Symbol neben Elementen

Im Bereich Inspector der Firefox-Entwicklertools werden alle Ereignisse aufgelistet, die an ein Element gebunden sind.

Wählen Sie zunächst mit ein Element aus Ctrl + Shift + C, z.B. Upvote-Pfeil von Stack Overflow.

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

events tooltip

Klicken Sie auf das Pausenzeichen || für das gewünschte Ereignis, um den Debugger in der Zeile des Handlers zu öffnen.

Sie können dort nun wie gewohnt einen Haltepunkt im Debugger platzieren, 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 keine Möglichkeit finden, mit Prettyfication zu spielen. Es scheint nur an der minimierten Zeile zu öffnen: Wie verschönere ich Javascript und CSS in Firefox/Firebug?

Getestet mit Firefox 42.

Laut diesem Thread gibt es in Firebug keine Möglichkeit, die Ereignisse anzuzeigen, die Listenern in einem DOM-Element zugeordnet sind.

Das Beste, was Sie tun können, ist entweder, 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 nehme an, man könnte das tun, um zu sehen, welche Ereignisse bestimmte Funktionen auslösen könnten .

3
Daniel Lew

Mit Version 2.0 hat Firebug ein Eventspanel eingeführt, das alle Ereignisse für das aktuell ausgewählte Element innerhalb des HTMLpanel .

*Events* side panel in Firebug

Es kann auch Ereignis-Listener anzeigen, die in jQuery-Ereignisbindungen eingebunden sind, falls die Option Show Wrapped Listenersaktiviert ist, die Sie über erreichen können. Optionsmenü von Eventspanel .

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

  1. Wählen Sie das Element mit dem Ereignis-Listener aus, den Sie debuggen möchten
  2. Klicken Sie im EventsSeitenbereich mit der rechten Maustaste auf die Funktion unter dem entsprechenden Ereignis und wählen Sie Set Breakpoint
  3. Löse das Ereignis aus

=> Die Skriptausführung stoppt in der ersten Zeile der Event-Handler-Funktion und Sie können das Debugging schrittweise durchführen.

2

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

0
MRalwasser