One of the limitations of Firebug in run-time debugging is it doesn’t have a good way to inform you of what methods are subscribed a DOM element’s events. If an element in the DOM is clicked on, moused over, value changed, etc. a JS event is fired. Any number of functions may be listening for that event and may get executed.
As applications become more complex, event subscriptions are spread across many files and those subscriptions can be conditional on particular logic flows. It becomes more and more difficult to determine what actions are performed during certain events.
Enter Visual Event. Written in jQuery, it’s compatible with YUI, MooTools, and of course jQuery. When run, it overlays the elements of your page with icons for each type of basic event associated with a DOM node that has listeners.
Here’s a basic DIV element with the text “Pull the trigger”:
On the left hand side is the basic DIV, on the right hand side is the visual event overlay. The DIV background color has been highlighted, and three icons have been displayed, each representing a listener and the type of icon indicates what event it is listening on.
This DIV has three listeners: one each for the click event, mouseover event, and mouseout event.
In these images there is also a red icon partially hidden, and this appears to be one of the jQuery listeners associated with Visual Event. This is unnecessary and adds noise to the tool, which has the potential to confuse the user.
If you click on any of the icons, an overlay is displayed that contains the source code for the listener:
It’s not without its limitations however:
- It doesn’t work in IE
- It doesn’t support custom events, but only handles the standard user interaction events supported by the browser
- The listener display doesn’t indicate what file the function is located in, or it’s true line numbers
It’s important to note that this is a young tool, still classified as ‘beta’, and despite its limitations it can still come in extremely handy.
I wish I’d had it two years ago 🙂