Wednesday, December 3rd, 2008

Visual Event: See where behaviour has been added to a page

Category: Utility

Wouldn’t it be nice to take a view of your application and see where the behaviour has been added? That is what is shown above, and it is courtesy of Allan Jardine and his new Visual Event tool.

Once you hover over an event, you get to see the code that will run:

Each type of event has its own icon, and all you need to do is use the bookmarklet to run it on any page.

When working with events in Javascript, it is often easy to loose track of what events are subscribed where. This is particularly true if you are using a large number of events, which is typical in a modern interface employing progressive enhancement. Javascript libraries also add another degree of complexity to listeners from a technical point of view, while from a developers point of view they of course can make life much easier! But when things go wrong it can be difficult to trace down why this might be.

It is due to this I’ve put together a Javascript bookmarklet called Visual Event which visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered. This is primarily intended to assist debugging, but it can also be very interesting and informative to see the subscribed events on other pages.

It turns out that there is no standard method for finding out what listeners have been attached to any particular node in a document, so I’ve resorted to parsing the event cache stored by the various Javascript libraries. Currently only jQuery and YUI are supported, but additional libraries can be added with ease.

Allan is keen to hear your thoughts. What would you like to see?

Posted by Dion Almaer at 8:28 am
15 Comments

++++-
4 rating from 37 votes

15 Comments »

Comments feed TrackBack URI

I feel like this promotes lazy coding. Any experienced coder knows that you save a ton of memory by assigning a couple top level events and using event delegation to capture the real target.

Comment by camwest — December 3, 2008

Link is broken.
http://www.sprymedia.co.uk/article/Visual+Event

Comment by Seanodotcom — December 3, 2008

I think this is great and will be really useful. Only issue I’ve had (I’ve not fully read the attached article) is that on a site with a lot of events there is some overlap with the hotspots.

I don’t get why a tool such as this would promote lazy coding, maybe I don’t have enough experience.

Comment by kim3er — December 3, 2008

@camwest is there a good example of how to set this up? I’ve read about the concept and setup some things that I _think_ are based on this idea, but I’ve never seen good example code.

Comment by jonhartmann — December 3, 2008

I will use it a lot. In my quick test, the mouseout and mouseover event where show, but not the method they trigger.

Comment by olivvv — December 3, 2008

… Oops for some reason blocks still rendered HTML. You get the point.

Comment by camwest — December 3, 2008

This tool sounds great. Sometimes I end up debugging other people’s code and when different tools collide it would be useful to know who is listening what.

Comment by icoloma — December 3, 2008

garann: You can close Visual Event by pressing the ‘Esc’ key. That will remove the rendered display and kill off the Javascript control for it (there appears to be a bug which means this doesn’t work in Safari at the moment – I’ll address this shortly). Your second point about opening the info in a new page I fully agree with and I’ll put that in as well.
Allan

Comment by theallan — December 3, 2008

I think this is pretty awesome. I’m excited to see when this will implement MooTools.

Comment by GCheung55 — December 3, 2008

I use event delegation a lot, but still this is a great tool.
Just a couple of days ago i searched my a.. off to find attached events and their programm flow. This was my own code, and it isnt too dirty. But i had some real probs finding out the side effects.

Comment by Schorsch — December 3, 2008

I found a good page discussing good example for Event Delegation with jQuery : http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery

jQuery.fn.delegate = function(eventType, rules) {
return this.bind(eventType, function(e) {
var target = $(e.target);
for(var selector in rules)
if(target.is(selector))
return rules[selector].apply(this, arguments)
})
}

And the way you would use it:

$(“#thing”).delegate(“click”, {
“.quit”: function() { /* do quit stuff */ },
“.edit”: function() { /* do edit stuff */ }
})

Comment by vsync — December 3, 2008

First, @theallan Thanks. Great stuff and really interesting discussion. Seems like I’ve been adding a new truly useful bookmarklet to my nav bar every couple days now.

You might want to look at the recently posted WTFramework bookmarklet. It toggles on and off when you click the bookmarklet. Quite clever. It appears that if you keep clicking on Visual Event it will load an increasing number of instances. Not that anyone would actually do this, but the usability addition in WTF is a really nice touch.

http://ajaxian.com/archives/detect-ajax-framework-with-ajaxianramework

Cheers,
– D.

Comment by dshaw — December 3, 2008

This is pretty darn usefull.
Well done.
I wish it was integrated into Firebug for even more convenience.

Comment by Jaaap — December 3, 2008

Thanks very much for the feedback everyone – it’s been absolutely brilliant to hear what you all think of this tool.
.
I’ve just put together an upgrade which includes a number of enhancements:
– Clicking the bookmarklet toggles it’s display (WTFramework style :-) )
– Add support for MooTools
– Looked into support for Prototype – doesn’t appear to cache the information that is needed (and is a private variable)
– Looked into support for Dojo – doesn’t appear to cache events at all
– API variable ‘VisualEvents’ for easy integration with libraries

Comment by theallan — December 4, 2008

This looks awesome. Any plans for Ext JS support?

Comment by dwong — December 7, 2008

Leave a comment

You must be logged in to post a comment.