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.
if (window.console)
falls es im Code verbleibt ( viel einfacher als mit alert ()) und den IE kaputt macht.$('#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) ; }); });
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.
quelle
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
.quelle
Hier ist ein Plugin, das alle Ereignishandler für ein bestimmtes Element / Ereignis auflisten kann:
Verwenden Sie es so:
Src: (mein Blog) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/
quelle
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
quelle
Verwenden
$._data(htmlElement, "events")
in jquery 1.7+;Ex:
$._data(document, "events")
oder$._data($('.class_name').get(0), "events")
quelle
Wie ein Kollege vorgeschlagen hat, wird console.log> alert:
quelle
jQuery speichert Ereignisse wie folgt:
Wenn Sie a ausführen,
console.log($("a#somefoo").data("events"))
sollten die mit diesem Element verbundenen Ereignisse aufgelistet werden.quelle
Verwenden von DevTools in der neuesten Version von Chrome (Version 29) Ich finde diese beiden Tipps sehr hilfreich beim Debuggen von Ereignissen:
Auflisten von jQuery-Ereignissen des zuletzt ausgewählten DOM-Elements
Verwenden des Befehls monitorEvents ()
quelle
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.
quelle
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.
quelle
ev
Symbol neben ElementenIm 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
ev
Symbol 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.
quelle
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.
quelle
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:
=> Die Skriptausführung stoppt in der ersten Zeile der Ereignishandlerfunktion und Sie können sie schrittweise debuggen.
quelle
Firebug 2 enthält jetzt das Debuggen / Überprüfen von DOM-Ereignissen.
quelle