web-dev-qa-db-de.com

Wie kann ich mit Firefox alle Ereignisse überwachen, die ausgelöst wurden?

Ich versuche, eine Webseite zu debuggen, die Ereignisse stark nutzt, und muss daher alle Ereignisse überwachen, die ausgelöst werden.

Die meisten Ereignisse werden mit jQuery gebunden. Daher wäre es besonders nützlich, wenn es eine Möglichkeit gäbe, nur diese Ereignisse gezielt zu überwachen.

45
gsharp

Natürlich können Sie mit Firebug , der Konsole und der Registerkarte "Skripte", auf der Sie Haltepunkte und Überwachungen hinzufügen können, gut zurechtkommen, aber Sie möchten es natürlich schlauer/einfacher machen.

Es gibt ein hübsches Firebug-Plugin mit dem Namen EventBug , das alle Ereignisse protokolliert und nach Ereignistyp gruppiert, sodass Sie sie erweitern und sehen können, was sie ausgelöst hat.

EventBug Screenshot

EventBug macht das nicht in Echtzeit, Sie müssen es jedoch aktualisieren.

Eine andere Möglichkeit besteht darin, die Funktion "Ereignisse protokollieren" für alle DOM-Elemente in Firebug zu verwenden. Dies geschieht in Echtzeit und Sie können auch sehen, welche Auftragsereignisse ausgelöst werden.

Versuche dies:

  • Schaltet das Öffnen von Firebug um
  • Klicken Sie mit der rechten Maustaste auf das Element in der Registerkarte HTML. Wenn Sie alle Ereignisse anzeigen möchten, klicken Sie mit der rechten Maustaste auf <body>
  • Wählen Log Events aus dem Kontextmenü
  • Stellen Sie sicher, dass die Registerkarte Konsole aktiviert ist
  • Klicken Sie hier, um den 'Persist'-Modus auf der Registerkarte "Konsole" zu aktivieren (andernfalls wird die Registerkarte "Konsole" nach dem erneuten Laden der Seite gelöscht).
  • Möglicherweise müssen Sie Closed auswählen (manuell)
  • Voila! Über die Registerkarte "Konsole" können Sie Ereignisse verfolgen

Folgendes sehen Sie bei Protokollereignissen:

enter image description here

Probieren Sie auch das Add-On FireQuery für Firebug aus, um zu sehen, welche Elemente im DOM mit jQuery-Ereignissen verknüpft sind und was sie sind.

Und wie Benvies Antwort erwähnt, ist dies auch in den Entwicklertools von webkit möglich.

51
Moin Zaman

Dies wurde vor einigen Versionen eingeführt, aber seit Firefox 35 werden Ereignisse, die mit einem Element verknüpft sind, im Informationsfenster angezeigt: Neben dem Element, dessen Ereignisse Sie anzeigen möchten (falls vorhanden), wird ein Symbol mit dem Symbol ' EV'-Briefe. Klicken Sie darauf und Sie sehen ein kleines Popup-Fenster mit den Ereignissen für dieses Element.

Firefox events inspector

Weitere Informationen: http://flailingmonkey.com/view-dom-events-in-firefox-developer-tools/

11
AxeEffect

Dies gibt es meines Erachtens in Firebug nicht und das zugrunde liegende Problem ist mangelnde Unterstützung oder mangelnde Offenlegung auf API-Ebene. Alternativ gibt es nur wenige Möglichkeiten, DOM-Ereignisse zu abonnieren: Element.prototype.addEventListener (und window.addEventListener und document.addEventListener und XMLHttpRequest.addEventListener und einige andere), abgesehen von 'onevent'-Eigenschaften, die beobachtbar und abfangbar sind.

Aber realistisch gesehen ermöglichen der WebKit-Debugger und der Chromium-Debugger (das ist ein Webkit mit zusätzlichen Punkten) das Debuggen und Beobachten angeschlossener Listener. Manchmal ist es einfacher, die Fehler eines Browsers in einem anderen Browser zu debuggen, wenn der Anwendungs-/Laufzeitstatus besser angezeigt wird, selbst wenn dieser Browser den Fehler nicht aufweist.

enter image description here

https://developers.google.com/chrome-developer-tools/docs/elements

4
user748221