Posted on Apr 7, 2011

Visual Event: The Chrome Extension

Afgelopen gite-de-vendee.com heb ik een javascript tooltje geport naar een Google Chrome extensie. Visual Event is een script geschreven door Allan Jardine en was bedoeld als bookmarklet. De functie van het scriptje is dat deze per webpage laat zien waar en wanneer er javascript delen worden aangeroepen en welke delen dit zijn.

Of zoals de maker van het javascriptje zelf beschrijft:

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.

Allan Jardine Рop  www.sprymedia.co.uk

Aangezien bookmarklets steeds meer tot de verleden tijd gaan behoren in de nieuwere browsers en ik hiernaast zelf de functie van het script liever naast de rest van mijn webdeveloper tools heb draaien, heb ik het omgebouwd in een Google Chrome extensie. Voordeel naast de vorige punten is dat de tool nu ook offline te gebruiken is. Hieronder kan je de extensie downloaden (53kb) Installeren doe je door het bestand te openen met Google Chrome. Voor vragen kan je altijd even een tweet sturen (@timvdl) of hier een comment plaatsen.

Download!

Download!