CODEWITHSUNDEEP
javascriptjqueryfirefox-addonjquery-eventsjavascript-debugger
gsharp
gsharp

Reputation: 27937

Using Firefox, how can I monitor all events that are fired?

I'm trying to debug a web page that makes heavy use of events, and so I need to monitor all events that are fired.

Most of the events are bound using jQuery. Hence, it would be particularly useful if there was a way to specifically monitor only those events.

Upvotes: 72

Views: 81363

Answers (4)

Domi
Domi

Reputation: 24588

[2023]

Event Listener Breakpoints have been introduced in FF 69 (and further improved in FF 71). Relevant docs are here.

It allows you to automatically break on any event event listener of a given type. This screenshot (from the article) shows how it breaked on a Keyboard event:

enter image description here

The article further explains (1) how instead of breaking every time, it can just log matching events, and (2) how you can blackbox certain sources, to avoid having to wade through the internals of framework code (such as jquery, react etc.).

They present another screenshot of how that looks like:

enter image description here

Upvotes: 18

AxeEffect
AxeEffect

Reputation: 7501

This has been introduced some versions ago but as of Firefox 35 events associated with an element can be seen on the Inspector: next to the element which you want to see the events (in case there is any) there will be an icon with the 'EV' letters. Click it and you will see a small popup window with the events for that element.

Firefox events inspector

More info: http://flailingmonkey.com/view-dom-events-in-firefox-developer-tools/

Upvotes: 23

Moin Zaman
Moin Zaman

Reputation: 25455

Of course you can do just fine with Firebug, the console and the scripts tab where you can add breakpoints and watches, but you want to do it smarter / easier obviously.

There is a neat Firebug plugin called EventBug that just logs all the events and groups them by event type so you can expand and see what triggered them.

EventBug Screenshot

EventBug doesn't do it realtime, you have to refresh though.

One other way is to use the 'Log Events' feature against any DOM element in Firebug. This does do it realtime and you can see what order events are fired / triggered as well.

Try this:

  • Toggle open Firebug
  • Right click the element in HTML tab, if you want to see all events then right click <body>
  • Choose Log Events from the context menu
  • Make sure the Console tab is enabled
  • Click to enable the 'Persist' mode in the Console tab (otherwise Console tab will clear after the page is reloaded)
  • You may have to select Closed (manually)
  • Voila! watch events stream in the console tab

This is what you see with Log Events:

enter image description here

Also worth trying the FireQuery add-on for Firebug to see what elements in the DOM have jQuery events attached to them and what they are.

And as benvie's answer mentions, this is possible in webkit's developer tools as well.

Upvotes: 54

user748221
user748221

Reputation:

This doesnt exist in Firebug I believe, and the underlying problem is lack of support or lack of exposure at the api level. Alternatively, there's only a few ways to subscribe to DOM events: Element.prototype.addEventListener (and window.addEventListener and document.addEventListener and XMLHttpRequest.addEventListener and some others) aside from 'onevent' properties which are observable and interceptable.

But realistically, the WebKit debugger and Chromium's debugger (which is webkit's with extra points) allow one to debug and observe attached listeners. Sometimes it's easier to debug one browsers's bugs in another browser with better exposure of application/runtime state, even when that browser doesn't exhibit the bug.

enter image description here

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

Upvotes: 4

Related Questions