Come eseguire il debug di associazioni di eventi JavaScript / jQuery con Firebug o strumenti simili?

Devo eseguire il debug di un'applicazione Web che utilizza jQuery per eseguire alcune manipolazioni DOM piuttosto complesse e disordinate . Ad un certo punto, alcuni degli eventi legati a elementi particolari non vengono attivati ​​e semplicemente smettono di funzionare.

Se avessi la possibilità di modificare l'origine dell'applicazione, analizzerei e aggiungerei un mucchio di istruzioni Firebug console.log() e commenti / commenti di codice per provare a individuare il problema. Ma supponiamo che non riesca a modificare il codice dell'applicazione e che debba funzionare interamente in Firefox utilizzando Firebug o strumenti simili.

Firebug è molto bravo a farmi navigare e manipolare il DOM. Finora, tuttavia, non sono stato in grado di capire come eseguire il debug degli eventi con Firebug. In particolare, voglio solo vedere un elenco di gestori di eventi associati a un determinato elemento in un determinato momento (utilizzando i breakpoint JavaScript di Firebug per tracciare le modifiche). Ma Firebug non ha la capacità di vedere eventi associati o sono troppo stupido per trovarlo. :-)

Qualche consiglio o idea? Idealmente, vorrei solo vedere e modificare eventi legati ad elementi, in modo simile a come posso modificare DOM oggi.

Vedi Come trovare listener di eventi su un nodo DOM .

In poche parole, supponendo che ad un certo punto un gestore di eventi sia collegato al tuo elemento (ad es.): $('#foo').click(function() { console.log('clicked!') });

Lo ispezionate così:

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

Vedi jQuery.fn.data(dove jQuery memorizza il tuo gestore 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!') }"
  })
  

C'è un bel bookmarklet chiamato Visual Event che può mostrarti tutti gli eventi associati a un elemento. Dispone di punti salienti con codice colore per diversi tipi di eventi (mouse, tastiera, ecc.). Quando ci passi sopra, mostra il corpo del gestore eventi, come è stato allegato e il numero di file / linea (su WebKit e Opera). Puoi anche attivare l'evento manualmente.

Non riesce a trovare tutti gli eventi perché non esiste un modo standard per cercare quali gestori di eventi sono collegati a un elemento, ma funziona con librerie popolari come jQuery, Prototype, MooTools, YUI, ecc.

È possibile utilizzare FireQuery . Mostra tutti gli eventi associati agli elementi DOM nella scheda HTML di Firebug. Mostra anche tutti i dati allegati agli elementi attraverso $.data.

Ecco un plugin che può elencare tutti i gestori di eventi per ogni dato elemento / 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 );
               });
           }
        });
    });
};

Usalo in questo modo:

// 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: (il mio blog) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

La Console per gli sviluppatori WebKit (disponibile in Chrome, Safari, ecc.) Consente di visualizzare gli eventi allegati per gli elementi.

Maggiori dettagli in questa domanda Stack Overflow

Utilizzare $._data(htmlElement, "events")in jquery 1.7+;

ex:

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

Come suggerito da un collega, console.log> alert:

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

jQuery memorizza gli eventi nei seguenti:

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

Fare ciò console.log($("a#somefoo").data("events"))dovrebbe elencare gli eventi associati a quell'elemento.

Utilizzando DevTools nell'ultimo Chrome (v29) trovo questi due suggerimenti molto utili per gli eventi di debug:

1. Elenco degli eventi jQuery dell'ultimo elemento DOM selezionato

   • Ispeziona un elemento sulla pagina
   • digitare quanto segue nella console:

     $ ._ data ( $ 0 , "eventi") // supponendo jQuery 1.7+

   • Elencherà tutti gli oggetti evento jQuery ad esso associati, espande l'evento interessato, fa clic con il tasto destro sulla funzione della proprietà "gestore" e sceglie "Mostra definizione funzione". Si aprirà il file contenente la funzione specificata.

2. Utilizzando il comando monitorEvents ()

Sembra che la squadra di FireBug stia lavorando su un'estensione EventBug. Aggiungerà un altro pannello a FireBug - Eventi.

"Il pannello degli eventi elencherà tutti i gestori di eventi nella pagina raggruppati per tipo di evento. Per ogni tipo di evento è possibile aprire per vedere gli elementi a cui sono associati i listener e il riepilogo della sorgente della funzione." EventBug Rising

Anche se non possono dire subito quando verrà rilasciato.

Ho anche trovato jQuery Debugger nel Chrome Store. È possibile fare clic su un elemento dom e mostrerà tutti gli eventi ad esso associati insieme alla funzione di richiamata. Stavo eseguendo il debug di un'applicazione in cui gli eventi non venivano rimossi correttamente e questo mi ha aiutato a rintracciarlo in pochi minuti. Ovviamente questo è per Chrome, non Firefox.

ev icona accanto agli elementi

All'interno del pannello Ispettore Strumenti di sviluppo di Firefox sono elencati tutti gli eventi associati a un elemento.

Per prima cosa seleziona un elemento con Ctrl+ Shift+ C, ad es. La freccia in alto di Stack Overflow.

Fai clic evsull'icona a destra dell'elemento e si aprirà una finestra di dialogo:

Fare clic sul ||simbolo del segno di pausa per l'evento desiderato e questo apre il debugger sulla linea del gestore.

Ora puoi posizionare un punto di interruzione come al solito nel debugger, facendo clic sul margine sinistro della linea.

Questo è menzionato su: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

Sfortunatamente, non sono riuscito a trovare un modo per giocare bene con prettyfication, sembra solo aprirsi alla linea minimizzata: Come abbellire Javascript e CSS in Firefox / Firebug?

Testato su Firefox 42.

Secondo questo thread , in Firebug non è possibile visualizzare quali eventi sono associati ai listener su un elemento DOM.

Sembra che il meglio che puoi fare sia quello che suggerisce tj111, oppure puoi fare clic con il pulsante destro del mouse sull'elemento nel visualizzatore HTML e fare clic su "Registra eventi" in modo da poter vedere quali eventi vengono attivati ​​per un particolare elemento DOM. Suppongo che si possa fare questo per vedere quali eventi potrebbero scatenare particolari funzioni.

Con la versione 2.0 Firebug ha introdotto un pannello Eventi , che elenca tutti gli eventi per l'elemento attualmente selezionato nel pannello HTML .

Può anche visualizzare listener di eventi racchiusi in associazioni di eventi jQuery nel caso in cui sia selezionata l'opzione Mostra ascoltatori a capo, che è possibile accedere tramite il menu delle opzioni del pannello Eventi .

Con quel pannello il flusso di lavoro per il debug di un gestore eventi è il seguente:

1. Seleziona l'elemento con il listener di eventi di cui vuoi eseguire il debug
2. All'interno del pannello laterale Eventi fai clic con il pulsante destro del mouse sulla funzione sotto l'evento correlato e scegli Imposta punto di interruzione
3. Attiva l'evento

=> L'esecuzione dello script si interromperà alla prima riga della funzione del gestore eventi e sarà possibile eseguirne il debug.

Firebug 2 ora incorpora il debug / ispezione degli eventi DOM.