Hemos hecho un gran avance con John J. Barton en una nueva extensión para Firebug llamada Eventbug. Un agradecimiento enorme a Olli Pettay (smaug) por arreglar los bugs #448602 + #506961 y por brindar la nuevas API de Firebug que permiten enumerar los event listeners en una página web!

Tengan en cuenta que estas APIs están disponibles en Firefox 3.7a1pre (espero que puedan lograr entrar en Firefox 3.6) y también van a necesitar  Firebug 1.5 para poder hacer las pruebas.

Esta extensión trae un nuevo panel de Eventos que lista todos los manejadores de eventos de una página, agrupados por tipo de evento. El panel también se integra de una manera prolija con otros paneles de Firebug, y permite buscar rápidamente que elemento HTML está asociado con un event listener específico o ver su código fuente JavaScript.

Así que, veámoslo en acción!

Panel de Eventos

La captura de abajo muestra el contenido del panel de Eventos y los tres paneles de costado (click para ver la imagen en tamaño original).

Los paneles de costado son sincronizados con el listener que haya sido seleccionado en el área principal de contenido.

• Targets Muestra la lista de targets de eventos que serían usados como DOMEvent.currentTarget cuando el evento burbujee (bubblee). Todos los targets son clickeables y dirijen al usuario al panel de HTML
• Script Muestra el código fuente del listener seleccionado.
• HTML Muestra el código HTML del elemento que está asociado con el listener seleccionado.

Panel HTML

La extensión también registra un nuevo panel de costado para Eventos en el panel de HTML.

En este caso, el panel lateral de Eventos muestra todos los event listeners registrados para el elemento HTML seleccionado.

Configuración Recomendada

Firefox 3.7a1pre
Firebug 1.5b1
Eventbug 0.1a2

Errores Conocidos

Eventbug todavía está en una etapa alfa, y hay algunos errores conocidos..

• El panel no es actualizado si los listeners son agregados o eliminados dinámicamente dependiendo de acciones del usuario. Tu tienes que hacer click manualmente en el botón de Actualizar (Refresh, en la barra de herramientas). esto va a ser arreglado tan pronto como se solucione el bug #524674 (gracias Smaug! )
• Si un listener es definido usando un atributo HTML (i.e. click="alert('Hola Mundo!')" ) el código fuente no es compilado hasta que el listener es efectivamente ejecutado (es una optimización de Firefox). La UI de Eventbug no indica esto, y puede pasar que el link que lleva al código fuente de un listener no funcione. El link debería ser deshabilitado si el objeto script no está disponible.
• El panel lateral de Script todavía no deja crear puntos de interrupción.

Y por cierto, como es usual, si tienes cualquier idea acerca de cómo mejorar esta característica, háznoslo saber dejando un comentario aquí o en el grupo oficial (en inglés). Si encontrás un bug, por favor reportalo.

Gracias!