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

Ho bisogno di eseguire il debug di un’applicazione Web che utilizza jQuery per eseguire una manipolazione DOM piuttosto complessa e disordinata. Ad un certo punto, alcuni degli eventi che erano legati a particolari elementi, non vengono licenziati e semplicemente smettono di funzionare.

Se avessi la possibilità di modificare l’origine dell’applicazione, eseguirò il drill-down e aggiungerò un sacco di istruzioni di console.log() di Firebug e pezzi di codice di commento / uncomment per tentare di individuare il problema. Ma supponiamo di non poter modificare il codice dell’applicazione e di dover lavorare interamente su Firefox usando Firebug o strumenti simili.

Firebug è molto bravo a permettermi di navigare e manipolare il DOM. Finora, però, non sono stato in grado di capire come eseguire il debugging degli eventi con Firebug. Nello specifico, voglio solo vedere un elenco di gestori di eventi legati ad un particolare elemento in un dato momento (usando breakpoint JavaScript di Firebug per tracciare le modifiche). Ma Firebug non ha la capacità di vedere eventi legati, o sono troppo stupido per trovarlo. 🙂

Qualche raccomandazione o idea? Idealmente, mi piacerebbe solo vedere e modificare eventi legati agli elementi, in modo simile a come posso modificare DOM oggi.

Vedi Come trovare listener di eventi su un nodo DOM .

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

Lo controlli in questo modo:

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

Vedere jQuery.fn.data (dove jQuery memorizza il 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 Evento visivo che può mostrare tutti gli eventi collegati a un elemento. Ha punti salienti con codice colore per diversi tipi di eventi (mouse, tastiera, ecc.). Quando passi il mouse sopra di loro, mostra il corpo del gestore di eventi, come è stato collegato e il numero di file / linea (su WebKit e Opera). Puoi anche triggersre manualmente l’evento.

Non è in grado di trovare ogni evento 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.

L’estensione Eventbug è stata rilasciata ieri, vedi: http://www.softwareishard.com/blog/firebug/eventbug-alpha-release/

Potresti usare FireQuery . Mostra tutti gli eventi collegati agli elementi DOM nella scheda HTML di Firebug. Mostra anche tutti i dati collegati agli elementi tramite $.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('
' + element.nodeName + ':
' + data + '<\/pre>'); });

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

La Console per gli sviluppatori di WebKit (disponibile in Chrome, Safari, ecc.) Ti consente di visualizzare gli eventi collegati per gli elementi.

Maggiori dettagli in questa domanda sull’overflow dello stack

Usa $._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 eventi nel modo seguente:

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

Fare un console.log($("a#somefoo").data("events")) dovrebbe elencare gli eventi collegati a quell’elemento.

Utilizzando DevTools nell’ultimo Chrome (v29) trovo questi due suggerimenti molto utili per il debug degli eventi:

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

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

    $ ._ dati ( $ 0 , “eventi”) // assumendo jQuery 1.7+

  2. Elencherà tutti gli oggetti evento jQuery ad esso associati, espande l’evento interessato, fa clic con il tasto destro del mouse sulla funzione della proprietà “gestore” e sceglie “Mostra definizione funzione”. Si aprirà il file contenente la funzione specificata.
  3. Utilizzo del 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 è ansible aprire per visualizzare gli elementi a cui sono associati gli ascoltatori e il riepilogo della sorgente della funzione.” EventBug Rising

Anche se non possono dire proprio ora quando sarà rilasciato.

Ho anche trovato jQuery Debugger nel Chrome Store. È ansible fare clic su un elemento dom e mostrerà tutti gli eventi ad esso associati insieme alla funzione di callback. 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 però, non per Firefox.

Icona ev accanto agli elementi

All’interno del pannello di controllo degli Strumenti per gli sviluppatori di Firefox sono elencati tutti gli eventi associati a un elemento.

Per prima cosa seleziona un elemento con Ctrl + Maiusc + C , ad esempio la freccia in eccesso di Stack Overflow.

Fai clic sull’icona ev a destra dell’elemento e si apre un dialogo:

tooltip di eventi

Fare clic sul segno di pausa || simbolo dell’evento che vuoi, e questo apre il debugger sulla riga del gestore.

Ora puoi inserire 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 questo di giocare bene con la bella, sembra solo aprirsi alla linea minificata: come abbellire Javascript e CSS in Firefox / Firebug?

Testato su Firefox 42.

Secondo questo thread , in Firebug non c’è modo di vedere quali eventi sono collegati agli ascoltatori su un elemento DOM.

Sembra che il meglio che puoi fare sia ciò 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 triggersti ​​per un particolare elemento DOM. Suppongo che si possa fare ciò per vedere quali eventi potrebbero essere triggersti ​​da 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 .

* Eventi * pannello laterale in Firebug

Può anche visualizzare listener di eventi racchiusi in associazioni di eventi jQuery nel caso in cui l’opzione Show Wrapped Listeners sia selezionata, che puoi raggiungere tramite il menu delle opzioni del pannello Eventi .

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

  1. Seleziona l’elemento con il listener di eventi che desideri 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 seleziona Imposta punto di interruzione
  3. Attiva l’evento

=> L’esecuzione dello script si interromperà alla prima riga della funzione del gestore di eventi ed è ansible eseguirne il debug.

Firebug 2 ora incorpora il debugging / ispezione degli eventi del DOM.