depurar - llamar archivo javascript desde html

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

Question

Necesito depurar una aplicación web que utiliza jQuery para realizar una manipulación de DOM bastante compleja y desordenada. En un momento dado, algunos de los eventos que estaban 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 de Firebug console.log() y partes de comentario / no comentario 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 para dejarme navegar y manipular el DOM. Hasta ahora, sin embargo, no he podido averiguar 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 en particular en un momento dado (usando los puntos de interrupción de Firebug JavaScript para rastrear los cambios). Pero o bien 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.

Answer 1

Al usar DevTools en el Chrome más reciente (v29), encuentro estos dos consejos muy útiles para depurar eventos:

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

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

     $ ._ datos ( $ 0 , "eventos") // suponiendo que jQuery 1.7+

   • Enumera todos los objetos de evento jQuery asociados con él, expande el evento interesado, hace clic derecho en la función de la propiedad "controlador" y elige "Mostrar definición de función". Se abrirá el archivo que contiene la función especificada.

2. Utilizando el comando monitorEvents ()

Answer 2

Aquí hay un complemento que puede enumerar todos los controladores 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>'');
});

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

Answer 3

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

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

Answer 4

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

También puede mostrar escuchas de eventos envueltas en los enlaces de eventos de jQuery en caso de que la opción Mostrar escuchas envueltas esté marcada, 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 seleccione Establecer punto de interrupción
3. Desencadenar 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 realizar un paso de depuración.

Answer 5

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

En pocas palabras, asumiendo 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!'') }"
  })

Answer 6

De acuerdo con este hilo , no hay manera en Firebug de ver qué eventos se adjuntan 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 "Eventos de registro" para ver qué eventos se activan para un elemento DOM en particular. Supongo que uno podría hacer eso para ver qué eventos podrían estar activando funciones particulares.

Answer 7

Hay un buen bookmarklet llamado Visual Event que puede mostrarle todos los eventos adjuntos a un elemento. Tiene resaltados codificados por colores para diferentes tipos de eventos (mouse, teclado, etc.). Cuando se desplaza 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 consultar qué controladores de eventos están vinculados a un elemento, pero funciona con bibliotecas populares como jQuery, Prototype, MooTools, YUI, etc.

Answer 8

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 de desbordamiento de pila

Answer 9

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

Answer 10

Parece que el equipo de FireBug está trabajando en una extensión 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 de la fuente de la función". EventBug Rising

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

Answer 11

Podrías usar FireQuery . Muestra cualquier evento adjunto a elementos DOM en la pestaña HTML de Firebug. También muestra cualquier dato adjunto a los elementos a través de $.data .

Answer 12

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

Answer 13

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

ex:

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

Answer 14

jQuery almacena eventos en los siguientes:

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

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

Answer 15

blog.getfirebug.com/2014/06/10/firebug-2-0/… ahora incorpora la depuración / inspección de eventos DOM.

Answer 16

icono ev junto a elementos

Dentro del panel Inspector de las herramientas de desarrollo de Firefox, se enumeran todos los eventos vinculados a un elemento.

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

Haga clic en el icono ev a la derecha del elemento y se abrirá un diálogo:

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 es habitual 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 forma de jugar bien con prettyfication, simplemente parece abrirse en la línea minified: ¿Cómo embellecer Javascript y CSS en Firefox / Firebug?

Probado en Firefox 42.