Allan Jardine – Visual Event

28 Sep

Events in Javascript are often seen as a bit of an enigma. This is odd given that Javascript is very much an event driven language, but it is typically down to their complex nature and difficulty to debug. To this end I’ve created Visual Event to help track events which are subscribed to DOM nodes. (source)

This little bookmarklet provides debugging information about events that have been attached to DOM elements. If you ever debugged JS then you most likely know what a pain in the neck is to find which javascript methods are called when the user interacts with different DOM objects.

A little background on JS events

There are two ways to attach JS methods to different events supported by DOM elements.

  1. One is the declarative way: <div onlick=”someMethod();”>
  2. The other one is to dynamically add methods using JS. Depending on the browser you will use element.attachEvent, element.addEventListener, element.onclick.

If the way used by the initial developer falls under #1 then you’re in luck. You can see the method name and then just add a breakpoint there.

If it’s #2, then you’re out of luck. Attaching methods to an event can happen anywhere in any file or any other method thus very hard to track.

Here comes the help

…in the form of Visual Event small bookmarklet (a small software application stored as a bookmark in a web browser, which typically allows a user to interact with the currently loaded web page in some way). You need to add it to your bookmark bar and when you need to use it just click on it and it will highlight the DOM elements and the corresponding events.

Unfortunately sometimes Visual Event cannot trace the file where the event is attached (as you can see in the first image) but at least it shows the method and you can manually search it.

The project is open source and the source code can be found on github or, you can contact the developer, Allan Jardine, on his website where you can find more interesting projects.

Anyway, I find it very useful when trying to determine which method is triggered when an action is performed in the UI especially since it is just a bookmarklet and not a browser plugin.

Nu fi egoist, dă mai departe să ajungă la tot poporul

Lasă un răspuns

Acest sit folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.