Finding jQuery Event Handlers with Visual Event

Recently I was asked to look at a "I click and the wrong thing happens" type error. I didn't know the codebase, and I wanted to start by seeing the JavaScript for the click event handler. In a project with thousands of lines of JavaScript this can be hard, but I found Visual Event 2 after a little searching and the tool took me right to the code.

Visual Event 2 is a bookmarklet, so the install is as simple as dragging a link into the bookmark area of a browser (though it took some hunting to find the link on the Visual Event 2 page - look under the section titled Make It Go).

Once I got to the page with a problem, I clicked the bookmark and the tool found all the events wired in the DOM.

All of the DOM elements with events attached become color coded, and I could hover over elements for details. In most cases, Visual Event could give me the exact line and file where the event handler lives.

Unlike the Event Listeners tab in Chrome developer  tools, Visual Event understands jQuery events (even live events), as well as YUI, MooTools, Prototype, and more.

Great tool, and free!