¿Cómo depurar enlaces de eventos de JavaScript/jQuery con Firebug o herramientas similares?
Necesito depurar una aplicación web que usa jQuery para hacer un DOM bastante complejo y desordenado. bastante compleja y desordenada . En un momento dado, algunos de los eventos que estaban ligados a elementos particulares, no se activan y simplemente dejan de funcionar.
Si tuviera la capacidad de editar el código fuente de la aplicación, profundizaría y agregaría un montón de Firebug. console.log() y comentaría o descomentaría fragmentos de código para intentar identificar el problema. Pero supongamos que no puedo editar el código de la aplicación y necesito trabajar completamente en Firefox usando Firebug o herramientas similares.
Firebug es muy bueno al permitirme navegar y manipular el DOM. Sin embargo, hasta ahora no he podido descubrir cómo realizar la depuración de eventos con Firebug. Específicamente, solo quiero ver una lista de controladores de eventos vinculados a un elemento particular en un momento dado (usando puntos de interrupción de Firebug JavaScript para rastrear los cambios). Pero o Firebug no tiene la capacidad de ver eventos vinculados o soy demasiado tonto para encontrarlo. :-)
¿Alguna recomendación o idea? Idealmente, solo me gustaría ver y editar eventos vinculados a elementos, de manera similar a como puedo editar DOM hoy.
Ver Cómo encontrar detectores de eventos en un nodo DOM .
En pocas palabras, suponiendo que en algún momento se adjunta un controlador de eventos a su elemento (por ejemplo):$('#foo').click(function() { console.log('clicked!') });
Lo inspeccionas así:
jQuery 1.3.x
var clickEvents = $('#foo').data("events").click; jQuery.each(clickEvents, function(key, value) { console.log(value) // prints "function() { console.log('clicked!') }" })jQuery 1.4.x
var clickEvents = $('#foo').data("events").click; jQuery.each(clickEvents, function(key, handlerObj) { console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }" })
Consulte jQuery.fn.data(donde jQuery almacena su controlador internamente).
jQuery 1.8.x
var clickEvents = $._data($('#foo')[0], "events").click; jQuery.each(clickEvents, function(key, handlerObj) { console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }" })
Hay un bonito marcador llamado Visual Event que puede mostrarle todos los eventos adjuntos a un elemento. Tiene resaltados codificados por colores para diferentes tipos de eventos (ratón, teclado, etc.). Cuando pasa el cursor sobre ellos, muestra el cuerpo del controlador de eventos, cómo se adjuntó y el número de archivo/línea (en WebKit y Opera). También puede activar el evento manualmente.
No puede encontrar todos los eventos porque no existe una forma estándar de buscar qué controladores de eventos están adjuntos a un elemento, pero funciona con bibliotecas populares como jQuery, Prototype, MooTools, YUI, etc.
