Pregunta ¿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 algo bastante complejo y desordenado DOM manipulación. En un momento dado, algunos de los eventos vinculados a elementos particulares no se activan y simplemente dejan de funcionar.

Si tuviera la capacidad de editar el origen de la aplicación, profundizaría y agregaría un montón de Firebug  console.log() declaraciones y comentar / descomentar piezas de código para tratar de 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 para dejarme navegar y manipular el DOM. Hasta el momento, sin embargo, no he podido averiguar cómo hacer depuración de eventos con Firebug. Específicamente, solo quiero ver una lista de controladores de eventos vinculados a un elemento en particular en un momento dado (utilizando los puntos de interrupción de Firebug JavaScript para rastrear los cambios). Pero Firebug no tiene la capacidad de ver eventos enlazados, o soy demasiado tonto para encontrarlo. :-)

¿Alguna recomendación o idea? Idealmente, me gustaría ver y editar eventos vinculados a elementos, de forma similar a cómo puedo editar DOM hoy.


590
2018-02-20 19:42


origen


Respuestas:


Ver Cómo encontrar detectores de eventos en un nodo 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!') });

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

349
2018-02-20 20:21



Hay un buen bookmarklet llamado Evento visual que puede mostrarle todos los eventos asociados a un elemento. Tiene reflejos codificados por colores para diferentes tipos de eventos (mouse, 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 hay una forma estándar de buscar qué manejadores de eventos están conectados a un elemento, pero funciona con bibliotecas populares como jQuery, Prototype, MooTools, YUI, etc.


162
2018-02-20 19:52



La extensión Eventbug se ha lanzado ayer, mira: http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/


73
2017-10-30 12:05



Podrías usar FireQuery. Muestra los eventos asociados a los elementos DOM en la pestaña HTML de Firebug. También muestra los datos adjuntos a los elementos a través de $.data.


41
2017-10-07 03:26



Aquí hay un complemento que puede mostrar 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 );
               });
           }
        });
    });
};

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

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


26
2018-02-20 21:04



La Consola de desarrollador de WebKit (que se encuentra en Chrome, Safari, etc.) le permite ver eventos adjuntos para los elementos.

Más detalles en esta pregunta sobre desbordamiento de pila


22
2017-08-21 18:21



Utilizar $._data(htmlElement, "events") en jquery 1.7+;

ex:

$._data(document, "events") o $._data($('.class_name').get(0), "events")


11
2017-08-20 15:12



Como sugirió un colega, console.log> alerta:

var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, value) {
    console.log(value);
})

8
2017-11-18 16:31



jQuery almacena eventos de la siguiente manera:

$("a#somefoo").data("events")

Haciendo un console.log($("a#somefoo").data("events")) debería enumerar los eventos adjuntos a ese elemento.


6
2018-02-20 20:12