Finding jQuery Event Handlers with Visual Event

Monday, January 14, 2013

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. image

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.

image

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!


Comments
gravatar jan Monday, January 14, 2013
Great tool! But will not work on https pages. Chrome blocked it because of mixed content issue: [blocked] The page at https://www.google.com.sg/ ran insecure content from http://www.sprymedia.co.uk/VisualEvent/VisualEvent_Loader.js?rand=1358214800392 A workaround is to temporarily turn on --allow-running-insecure-content setting while using the tool.
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!