Utilizzando Chrome, come scoprire a quali eventi sono associati un elemento

Supponiamo di avere un link sulla mia pagina:

<a href="#" id="foo">Click Here</a>

Non so nient'altro, ma quando faccio clic sul collegamento, alert("bar")viene visualizzato un. Quindi so che da qualche parte, un po 'di codice si sta legando #foo.

Come posso trovare il codice che sta vincolando l' alert("bar")evento click? Sto cercando una soluzione con Chrome.

Ps .: L'esempio è fittizio, quindi non sto cercando una soluzione come: "Usa XXXXXX e cerca" alert (\ "bar \") "in tutto il progetto. Voglio una vera soluzione di debug / traccia.

Utilizzando Chrome 15.0.865.0 dev . C'è una sezione "Ascoltatori di eventi" nel pannello Elementi:

E un "Punto di interruzione dei listener di eventi" nel pannello Script. Usa un mouse -> fai clic sul punto di interruzione e poi "passa alla prossima chiamata di funzione" tenendo d'occhio lo stack di chiamate per vedere quale funzione userland gestisce l'evento. Idealmente, dovresti sostituire la versione ridotta di jQuery con una versione non ridotta in modo da non dover intervenire sempre e utilizzare il passaggio quando possibile.

Puoi anche utilizzare l'ispettore di Chrome per trovare gli eventi allegati in un altro modo, come segue:

1. Fare clic con il tasto destro del mouse sull'elemento da ispezionare o trovarlo nel riquadro "Elementi".
2. Quindi nella scheda / riquadro "Ascoltatori di eventi", espandi l'evento (ad es. "Fai clic")
3. Espandere i vari sottonodi per trovare quello desiderato, quindi cercare dove si trova il sottonodo "gestore".
4. Fare clic con il tasto destro sulla parola "funzione", quindi fare clic su "Mostra definizione funzione"

Questo ti porterà dove è stato definito il gestore, come mostrato nella seguente immagine, e spiegato da Paul Irish qui: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

Provalo con l'estensione jQuery Audit ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ), dopo l'installazione segui questi passaggi:

1. Ispeziona l'elemento
2. Nella nuova scheda " Audit jQuery " espandere la proprietà Eventi
3. Scegli per l'evento di cui hai bisogno
4. Dalla proprietà del gestore, fare clic con il tasto destro del mouse sulla funzione e selezionare " Mostra definizione funzione "
5. Ora vedrai il codice di associazione degli eventi
6. Fai clic sul pulsante " Stampa carina " per una visione più leggibile del codice

(Più recente dal 2020) Per la versione Chrome versione 83.0.4103.61 :

1. Seleziona l'elemento che vuoi ispezionare

2. Scegli la scheda Listener di eventi

3. Assicurati di controllare i listener di Framework per mostrare il vero file javascript invece della funzione jquery.

Modifica : al posto della mia risposta, questa è piuttosto eccellente: come eseguire il debug dei binding di eventi JavaScript / jQuery con Firebug (o uno strumento simile)

Gli strumenti di sviluppo di Google Chromes hanno una funzione di ricerca integrata nella sezione degli script

Se non hai familiarità con questo strumento: (per ogni evenienza)

• fare clic con il tasto destro in qualsiasi punto di una pagina (in chrome)
• fai clic su "Ispeziona elemento"
• fai clic sulla scheda "Script"
• Barra di ricerca in alto a destra

Fare una rapida ricerca per #ID dovrebbe portare alla funzione di associazione alla fine.

Es: cercare #footi porterebbe a

$('#foo').click(function(){ alert('bar'); })

Aggiornamento 2018 - Potrebbe essere utile per i futuri lettori:

Non sono sicuro quando questo è stato originariamente introdotto in Chrome. Ma un altro (facile) modo per farlo ora in Chrome è tramite i comandi della console.

Ad esempio: ( nel tipo di console Chrome )

getEventListeners($0)

Considerando che $ 0 è l'elemento selezionato nel DOM.

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4

findEventHandlers è un plugin jquery, il codice raw è qui: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

passi

1. Incolla il codice raw direttamente nella console di Chrome (nota: deve avere già caricato jquery)

2. Utilizzare la seguente chiamata di funzione: findEventHandlers(eventType, selector);
   per trovare il gestore eventType dell'elemento specificato dal selettore corrispondente.

Esempio :

findEventHandlers("click", "#clickThis");

Quindi, se presente, il gestore eventi disponibile mostrerà qui sotto, è necessario espandere per trovare il gestore, fare clic con il tasto destro del mouse sulla funzione e selezionare show function definition

Vedi: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

Per la versione di Chrome 52.0.2743.116:

1. Negli Strumenti per sviluppatori di Chrome, apri il pannello "Cerca" premendo Ctrl+ Shift+ F.

2. Digita il nome dell'elemento che stai cercando di trovare.

I risultati per gli elementi associati dovrebbero apparire nel pannello e indicare il file in cui si trovano.