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

Necesito depurar una aplicación web que utiliza jQuery para hacer una manipulación DOM bastante compleja y desordenada. 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 sentencias console.log() de Firebug y comentarios / comentarios para 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.

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

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 bookmarklet llamado Visual Event que puede mostrarle todos los eventos asociados a un elemento. Tiene reflections 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.

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

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

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('
' + element.nodeName + ':
' + data + '< \/pre>'); });

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

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 stack

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

ex:

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

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

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

jQuery almacena eventos de la siguiente manera:

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

Hacer un console.log($("a#somefoo").data("events")) debe listar los eventos adjuntos a ese elemento.

Usando DevTools en el último Chrome (v29) encuentro que estos dos consejos son muy útiles para depurar eventos:

  1. Listado de eventos jQuery del último elemento DOM seleccionado

    • Inspeccionar un elemento en la página
    • escriba lo siguiente en la consola:

    $ ._ data ( $ 0 , “events”) // asumiendo jQuery 1.7+

  2. Enumerará todos los objetos de evento jQuery asociados, expandirá el evento interesado, hará clic con el botón derecho en la función de la propiedad “controlador” y seleccionará “Mostrar definición de función”. Abrirá el archivo que contiene la función especificada.
  3. Utilizando el comando monitorEvents ()

Parece que el equipo de FireBug está trabajando en una extensión de EventBug. Agregará otro panel a FireBug – Eventos.

“El panel de eventos mostrará una lista de todos los controladores de eventos en la página agrupados por tipo de evento. Para cada tipo de evento, puede abrir para ver los elementos a los que están vinculados los oyentes y un resumen del origen de la función”. EventBug Rising

Aunque no pueden decir en este momento cuándo será lanzado.

También encontré jQuery Debugger en la tienda Chrome. Puede hacer clic en un elemento dom y se mostrarán todos los eventos vinculados a él junto con la función de callback. Estaba depurando una aplicación donde los eventos no se eliminaban correctamente y esto me ayudó a rastrearla en minutos. Obviamente, esto es para Chrome, no para Firefox.

icono de ev junto a los elementos

Dentro del panel Inspector de Firefox Developer Tools se enumeran todos los eventos vinculados a un elemento.

Primero seleccione un elemento con Ctrl + Shift + C , por ejemplo, la flecha hacia arriba de Stack Overflow.

Haga clic en el ícono ev a la derecha del elemento y se abre un diálogo:

eventos información sobre herramientas

Haga clic en el signo de pausa || símbolo para el evento que desea, y esto abre el depurador en la línea del controlador.

Ahora puede colocar un punto de interrupción allí como de costumbre en el depurador, haciendo clic en el margen izquierdo de la línea.

Esto se menciona en: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

Desafortunadamente, no pude encontrar una manera de que esto funcione bien con la explicación, parece que se abre en la línea minificada: ¿cómo embellecer Javascript y CSS en Firefox / Firebug?

Probado en Firefox 42.

De acuerdo con este hilo , no hay forma de que Firebug vea qué eventos están conectados a los oyentes en un elemento DOM.

Parece que lo mejor que puede hacer es lo que sugiere tj111, o puede hacer clic con el botón derecho en el elemento en el visor HTML y hacer clic en “Registrar eventos” para que pueda ver qué eventos se activan para un elemento DOM determinado. Supongo que uno podría hacer eso para ver qué eventos podrían estar desencadenando funciones particulares.

Con la versión 2.0 Firebug introdujo un panel de Eventos , que enumera todos los eventos para el elemento seleccionado actualmente dentro del panel HTML .

* Panel lateral Eventos * en Firebug

También puede mostrar oyentes de eventos envueltos en enlaces de eventos jQuery en caso de que esté marcada la opción Mostrar Escuchas Envueltos , a la que puede acceder a través del menú de opciones del panel Eventos .

Con ese panel, el flujo de trabajo para depurar un controlador de eventos es el siguiente:

  1. Seleccione el elemento con el detector de eventos que desea depurar
  2. Dentro del panel lateral Eventos , haga clic con el botón derecho en la función debajo del evento relacionado y elija Establecer punto de interrupción
  3. Dispara el evento

=> La ejecución de la secuencia de comandos se detendrá en la primera línea de la función del controlador de eventos y puede depurarla paso a paso.

Firebug 2 incorpora ahora la depuración / inspección de eventos DOM.