How to debug JavaScript / jQuery event bindings with Firebug or similar tools?

Browser tools and extensions: The JavaScript Sherlock Holmes toolkit

When the inspector's magnifying glass isn't enough

Native developer consoles are the detectives' trusted magnifying glass. However, some mysteries are beyond their scope. It is in such situations, where tools like the Visual Event come handy, or plugins such as FireQuery show their mettle.

Decoding the event glyphs with Visual Event

Visual Event is the Rosetta Stone of the event world. This bookmarklet deciphers all the event handlers on your page and presents you with a color-coded visualization. This isn't just for jQuery; Visual Event is multi-lingual and understands a plethora of libraries.

Firebug's concealed weapon: FireQuery

FireQuery, the masked avenger of Firebug, gives you the power to illuminate jQuery events binding to HTML elements in Firebug's HTML panel. Its radiant, color-coded data guides you through the depths of your code.

The jQuery event paradigm: Binding, triggering, iterating oh my!

Talk to the hand(ler)

jQuery maintains an internal database of its event handlers. To access this occult database, you need the combination that changes with jQuery's mood (read: version).

For jQuery less than version 1.8.x:

$('#element').data("events") // Open sesame!


For jQuery version 1.8.x and above:

$._data($('#element')[0], "events") // No, really, open sesame!


The for-each mantra for event inspection

To delve deeper into event handlers, a jQuery.each iteration is your flashlight:

$.each($._data($('#element')[0], "events"), function(eventType, handlers) {
  console.log(eventType, handlers); // The X-ray vision we all wanted
});


Unmasking the hidden event handlers

Some evasive event handlers hide in nooks and crannies of your data structure. To ferret them out, a custom function or plugin that dances to your tunes is the best bet.

Firing the events manually

To see how the events fare in the wild, it's often best to fire them on your own:

$('#element').trigger('click'); // Who's clicking now?!
