I recently came across a handy tool for JavaScript debugging called Visual Event. Of course, modern JavaScript development would hardly even be possible without FireBug. And most advanced JS-based rich internet applications heavily leverage one of the major JavaScript framework libraries (e.g. YUI, jQuery, scriptaculous, etc.).
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.
Event messaging is not consistent across browsers, and there is no W3C specified container that can be used to store and reference the document’s event listeners. As a result, each of the major JavaScript frameworks has its own mechanism for storing and executing event listeners.
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:
All in all, Visual Event is a very quick and handy JavaScript event debugging tool, and gives you information that you would have to gather manually through logging or alerts in standard debugging.
It’s not without its limitations however:
- It only supports a sub-set of JavaScript libraries
- 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 
