506 votos

Cómo depurar Javascript/jQuery enlaces de eventos con FireBug (o herramienta similar)

Necesito depurar una aplicación web que usa jQuery para hacer algunas bastante complejo y desordenado manipulación del árbol DOM. En un momento, algunos de los eventos que estaban obligados a determinados elementos, no son despedidos y simplemente dejar de trabajar.

Si yo tuviera una capacidad de editar el origen de la aplicación, me gustaría profundizar y añadir un montón de Firebug console.log() declaraciones y comentar/descomentar piezas de código para intentar localizar el problema. Pero supongamos que no puedo editar el código de la aplicación y la necesidad de trabajar completamente en Firefox usando Firebug o herramientas similares.

Firebug es muy bueno en lo que me permite navegar y manipular el DOM. Sin embargo, hasta ahora no he sido capaz de averiguar cómo hacer caso depurar con Firebug. Específicamente, quiero ver una lista de los controladores de eventos vinculados a un elemento particular en un momento dado (usando Firebug Javascript breakpoints para rastrear los cambios). Pero Firebug no tiene la capacidad para ver obligado de los acontecimientos, o yo soy demasiado tonto para encontrarlo. :-)

Las recomendaciones o ideas? Idealmente, me gustaría ver y editar los eventos vinculados a los elementos, de manera similar a cómo puedo editar DOM hoy.

315voto

Crescent Fresh Puntos 54070

Vea Cómo encontrar los detectores de eventos en un nodo DOM.

En pocas palabras, suponiendo que en algún punto de un controlador de eventos se adjunta a su elemento (por ejemplo): $('#foo').click(function() { console.log('clicked!') });

Inspecciona 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 tiendas de su controlador interno).

  • 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!') }"
    })
    

151voto

Matthew Crumley Puntos 47284

Hay un buen bookmarklet llamado Acontecimiento Visual que puede mostrar todos los eventos adjuntos a un elemento. Se ha codificados en colores destacados para diferentes tipos de eventos (ratón, teclado, etc.). Cuando se pasa sobre ellos, muestra el cuerpo del controlador de eventos, cómo se adjunta, y el archivo/número de línea (en WebKit y Opera). También se puede activar el evento de forma manual.

Que no se puede encontrar cada evento debido a que no hay una manera estándar para mirar lo que los controladores de eventos están conectados a un elemento, pero funciona con las bibliotecas populares como jQuery, Prototype, MooTools, YUI, etc.

65voto

Jan Odvarko Puntos 671

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

Honza

39voto

Shrikant Sharat Puntos 3207

Usted podría utilizar FireQuery. Muestra todos los eventos asociados a elementos DOM en el Firebug de la ficha HTML. También muestra todos los datos adjuntos a los elementos a través de los $.data.

25voto

James Puntos 56229

Aquí hay un plugin que se puede hacer una lista de todos los controladores de eventos para cualquier elemento o evento:

$.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 );
               });
           }
        });
    });
};

Utilizar como esta:

// 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>');
});

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X