62

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
gsharp
  • 27,557
  • 22
  • 88
  • 134

4 Answers4

56

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.

Moin Zaman
  • 25,281
  • 6
  • 70
  • 74
  • Not if you have to take over a solution and you have no idea what event causes the bug. – gsharp Jun 19 '12 at 08:38
  • @gsharp Can't you use profiling, logging to console and breakpoints to figure out the bug? Does it provide any errors to console? Firebug is pretty much the ultimate choice in JS debugging. – dakdad Jun 19 '12 at 08:46
  • I'm working already with Firebug. Just wishing a tool that shows me what event is fired in what order. Indeed I could do it with logging and breakpoints, but if the *.js is super and you are not yet familar with the code, it could help a lot. – gsharp Jun 19 '12 at 08:58
  • 1
    Incompatible with latest firefox. Is there some trick to install incompatible plug-ins (provided this won't break the browser)? – Tomáš Zato Jun 29 '13 at 17:08
  • Note that Eventbug is integrated in Firebug since version 2.0 – Forage Jul 06 '16 at 12:58
  • 2
    This answer is outdated. Firebug has since been incorporated into the developer tools. – Geremia Jan 09 '20 at 18:04
19

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/

AxeEffect
  • 6,345
  • 4
  • 37
  • 33
  • 4
    That's cool, but what I need to "see" is what event is triggered. Is that possible too? – gsharp Mar 20 '15 at 14:01
  • 1
    That feature bundled starting from Firefox 33: https://hacks.mozilla.org/2014/07/event-listeners-popup-media-sidebar-cubic-bezier-editor-more-firefox-developer-tools-episode-33/ Firefox 34 able to resolve jQuery wrapper to actual event code: https://hacks.mozilla.org/2014/09/webide-storage-inspector-jquery-events-iframe-switcher-more-firefox-developer-tools-episode-34/ – gavenkoa Jun 07 '15 at 12:34
  • Is this something that exists in Chrome/Edge too? If so, where is it? – not_a_generic_user Jun 06 '22 at 15:26
9

[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 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

Domi
  • 22,151
  • 15
  • 92
  • 122
4

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

  • 1
    To clarify, each dev tool has its strengths. Firebug, for example, has support for showing inherited properties as well as accessor values as properties, and has settings controlling some of these settings. The webkit debugger, on the other hand, has no option at all for showing inherited properties or for resolving accessors to their value. Unless you count overwriting Object.getOwnProperty[Names|Descriptor] with your own custom functions. –  Jul 04 '12 at 06:06
  • See my updated answer above. Firefox / Firebug does allow you to do this. – Moin Zaman Jul 04 '12 at 08:21
  • 1
    Also I sort of take another thing I said back. I'm not aware of something ie's dev tools excel at.. –  Jul 04 '12 at 08:33