tag - Wie Debuggen von JavaScript/jQuery-Ereignisbindungen mit Firebug(oder einem ähnlichen Tool)




title tag definition (11)

Ich muss eine Webanwendung debuggen, die jQuery verwendet, um einige ziemlich komplexe und unordentliche DOM Manipulation DOM . An einem Punkt werden einige der Ereignisse, die an bestimmte Elemente gebunden waren, nicht ausgelöst und hören einfach auf zu arbeiten.

Wenn ich die Anwendungsquelle bearbeiten könnte, würde ich einen Drilldown durchführen und eine Reihe von Firebug console.log() hinzufügen und Code-Teile kommentieren / console.log() , um das Problem zu lokalisieren. Aber nehmen wir an, ich kann den Anwendungscode nicht bearbeiten und muss komplett in Firefox mit Firebug oder ähnlichen Tools arbeiten.

Firebug ist sehr gut darin, mich das DOM navigieren und manipulieren zu lassen. Bisher war es mir jedoch nicht möglich, das Debuggen von Ereignissen mit Firebug durchzuführen. Insbesondere möchte ich nur eine Liste von Event-Handlern sehen, die zu einem bestimmten Zeitpunkt an ein bestimmtes Element gebunden sind (mithilfe von JavaScript-Breakpoints von Firebug, um die Änderungen zu verfolgen). Aber entweder Firebug ist nicht in der Lage gebundene Ereignisse zu sehen, oder ich bin zu dumm um es zu finden. :-)

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



Es gibt ein nettes Bookmarklet namens Visual Event , das Ihnen alle Ereignisse anzeigen kann, die an ein Element angehängt sind. Es verfügt über farblich markierte Hervorhebungen für verschiedene Arten von Ereignissen (Maus, Tastatur usw.). Wenn Sie den Mauszeiger darüber bewegen, werden der Hauptteil des Ereignishandlers, die Art des Anhangs 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 standardmäßige Möglichkeit gibt, nachzusehen, welche Event-Handler an ein Element angehängt sind, aber es funktioniert mit gängigen Bibliotheken wie jQuery, Prototype, MooTools, YUI usw.


Gemäß diesem Thread gibt es in Firebug keine Möglichkeit zu sehen, welche Ereignisse an Listener eines DOM-Elements angehängt sind.

Das Beste, was Sie tun können, ist entweder das, was tj111 vorschlägt, oder Sie klicken mit der rechten Maustaste auf das Element im HTML-Viewer und klicken auf "Ereignisse protokollieren", 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.


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

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


Mit DevTools im neuesten Chrome (v29) finde ich diese zwei Tipps sehr hilfreich für das Debugging von Ereignissen:

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

    • Untersuchen Sie ein Element auf der Seite
    • Gib folgendes in die Konsole ein:

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

    • Es wird alle damit verbundenen jQuery-Ereignisobjekte auflisten, das interessierte Ereignis erweitern, mit der rechten Maustaste auf die Funktion der Eigenschaft "handler" klicken und "Funktionsdefinition anzeigen" auswählen. Es wird die Datei geöffnet, die die angegebene Funktion enthält.

  2. monitorEvents des monitorEvents ()


Mit der Version 2.0 hat Firebug ein Ereignisfenster eingeführt, in dem alle Ereignisse für das aktuell im HTML- Panel ausgewählte Element aufgelistet sind.

Es kann auch Ereignis-Listener anzeigen, die in jQuery-Ereignisbindungen eingeschlossen sind, falls die Option Eingefügte Listener anzeigen aktiviert ist, die Sie über das Optionsmenü des Ereignisfensters erreichen können.

Mit diesem Panel ist der Workflow zum Debuggen eines Event-Handlers wie folgt:

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

=> Die Ausführung des Skripts wird in der ersten Zeile der Event-Handler-Funktion beendet und Sie können es schrittweise debuggen.


Sie könnten FireQuery . Es zeigt alle Ereignisse an, die den DOM-Elementen auf der HTML-Registerkarte des Firebugs zugeordnet sind. Es zeigt auch alle Daten an, die durch $.data an die Elemente $.data .


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

Um es kurz zu machen: An einem Punkt wird ein Event-Handler an Ihr Element angehängt (zB): $('#foo').click(function() { console.log('clicked!') });

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

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

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

jQuery speichert Ereignisse im Folgenden:

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

Eine console.log($("a#somefoo").data("events")) sollte die mit diesem Element verbundenen console.log($("a#somefoo").data("events")) .


Das ev-Symbol neben einem Element im Inspector-Bereich der Firefox Developer Tools listet alle Ereignisse auf, die an ein Element gebunden sind.

Wählen Sie zunächst mit Strg + Umschalt + C ein Element aus, z. B. den Pfeil zum Hochladen von Stapelüberlauf.

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

Klicken Sie auf das Pausenzeichen || Symbol für das gewünschte Ereignis, und dies öffnet den Debugger in der Zeile des Handlers.

Sie können dort wie gewohnt einen Breakpoint 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, dies hübsch zu spielen, es scheint sich nur an der minimierten Zeile zu öffnen: Verschönern Sie Javascript und CSS in Firebug?

Getestet auf Firefox 42.







firebug