¿Cómo depurar los enlaces de eventos de JavaScript / jQuery con Firebug o herramientas similares?

Question

¿Cómo depurar los enlaces de eventos de JavaScript / jQuery con Firebug o herramientas similares?

Preguntado el 20 de Febrero, 2009: Cuando se hizo la pregunta
181051 visitas: Cuantas visitas ha tenido la pregunta
5 Respuestas: Cuantas respuestas ha tenido la pregunta
Resuelta: Estado actual de la pregunta

Necesito depurar una aplicación web que utiliza jQuery para hacer algunas cosas bastante complejas y desordenadas DOM manipulación. En un momento dado, algunos de los eventos que estaban vinculados a determinados elementos, no se disparan y simplemente dejan de funcionar.

Si tuviera la capacidad de editar el código fuente de la aplicación, profundizaría y añadiría un montón de Firebug console.log() y comentar/descomentar trozos de código para intentar localizar 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 para permitirme navegar y manipular el DOM. Sin embargo, hasta ahora no he sido capaz de averiguar cómo hacer la depuración de eventos con Firebug. Específicamente, sólo quiero ver una lista de manejadores de eventos ligados a un elemento en particular en un momento dado (usando Firebug JavaScript breakpoints para rastrear los cambios). Pero, o bien Firebug no tiene la capacidad de ver los eventos vinculados, o soy demasiado tonto para encontrarla. :-)

¿Alguna recomendación o idea? Idealmente, sólo me gustaría ver y editar los eventos vinculados a los elementos, de forma similar a como puedo editar el DOM hoy en día.

Preguntado el 20 de Febrero, 2009 por Jaanus

Answer 1

5 Respuestas

Answer 2

315voto

Crescent Fresh Puntos 54070

Ver Cómo encontrar oyentes de eventos en un nodo del DOM .

En pocas palabras, suponiendo que en algún momento un controlador de eventos se adjunta 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!') }"
})

Ver jQuery.fn.data (donde jQuery almacena su manejador 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!') }"
})

Respondido el 20 de Febrero, 2009 por Crescent Fresh (54070 Puntos )

Answer 3

151voto

Matthew Crumley Puntos 47284

Hay un bonito bookmarklet llamado Evento visual que puede mostrarte todos los eventos adjuntos a un elemento. Tiene un código de colores para resaltar los diferentes tipos de eventos (ratón, teclado, etc.). Cuando pasas el ratón por encima de ellos, muestra el cuerpo del manejador de eventos, cómo se adjuntó y el número de archivo/línea (en WebKit y Opera). También puedes activar el evento manualmente.

No puede encontrar todos los eventos porque no hay una forma estándar de buscar qué manejadores de eventos están adjuntos a un elemento, pero funciona con bibliotecas populares como jQuery, Prototype, MooTools, YUI, etc.

Respondido el 20 de Febrero, 2009 por Matthew Crumley (47284 Puntos )

Answer 4

65voto

Jan Odvarko Puntos 671

La extensión de Eventbug ha sido lanzada ayer, ver: http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/

Honza

Respondido el 30 de Octubre, 2009 por Jan Odvarko (671 Puntos )

Answer 5

39voto

Shrikant Sharat Puntos 3207

Puede utilizar FireQuery . Muestra cualquier evento adjunto a los elementos del DOM en la pestaña HTML de Firebug. También muestra cualquier dato adjunto a los elementos a través de $.data .

Respondido el 7 de Octubre, 2009 por Shrikant Sharat (3207 Puntos )

Answer 6

25voto

James Puntos 56229

Aquí hay un plugin que puede listar todos los manejadores de eventos para cualquier elemento/evento dado:

$.fn.listHandlers = function(events, outputFunction) {
    return this.each(function(i){
        var elem = this,
            dEvents = $(this).data('events');
        if (!dEvents) {return;}
        $.each(dEvents, function(name, handler){
            if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ')$' ,'i')).test(name)) {
               $.each(handler, function(i,handler){
                   outputFunction(elem, '\n' + i + ': [' + name + '] : ' + handler );
               });
           }
        });
    });
};

Úsalo así:

// List all onclick handlers of all anchor elements:
$('a').listHandlers('onclick', console.info);

// List all handlers for all events of all elements:
$('*').listHandlers('*', console.info);

// Write a custom output function:
$('#whatever').listHandlers('click',function(element,data){
    $('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>');
});

Fuente: (mi blog) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

Respondido el 20 de Febrero, 2009 por James (56229 Puntos )

¿Cómo depurar los enlaces de eventos de JavaScript / jQuery con Firebug o herramientas similares?

Respuestas

Preguntas Destacadas

Etiquetas mas usadas

Iteramos.com

Powered by:

¿Cómo depurar los enlaces de eventos de JavaScript / jQuery con Firebug o herramientas similares?

Respuestas

Preguntas relacionadas

Preguntas Destacadas

Etiquetas mas usadas

En nuestra red

Iteramos.com

Powered by: