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

Supponiamo di avere un link sulla mia pagina:

Click Here 

Non so nient’altro, ma quando clicco sul link, viene visualizzato un avviso (“barra”). Quindi so che da qualche parte, qualche codice si sta legando a #foo.

Come posso trovare il codice che sta vincolando l’avviso (“barra”) all’evento click? Sto cercando una soluzione con Chrome.

Ps .: L’esempio è fittizio, quindi non sto cercando una soluzione come: “Usa XXXXXX e cerca l’intero progetto per” alert (\ “bar \”) “. Voglio una vera soluzione di debug / tracing.

Utilizzando lo sviluppatore di Chrome 15.0.865.0 . C’è una sezione “Listener di eventi” nel pannello Elementi:

inserisci la descrizione dell'immagine qui

E un “Breakpoint degli ascoltatori di eventi” nel pannello Scripts. Usa un mouse -> fai clic su punto di interruzione e poi “entra nella prossima chiamata di funzione” tenendo d’occhio lo stack di chiamate per vedere quale funzione userland gestisce l’evento. Idealmente, dovresti sostituire la versione minificata di jQuery con una non terminata in modo da non dover intervenire continuamente e utilizzare il passaggio quando ansible.

inserisci la descrizione dell'immagine qui

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

  1. Fai clic con il tasto destro del mouse sull’elemento da ispezionare o trovalo nel riquadro “Elementi”.
  2. Quindi, nella scheda / riquadro “Listener di eventi”, espandi l’evento (ad es. “Fai clic”)
  3. Espandi i vari sottonodes per trovare quello che vuoi, e poi cerca dove si trova il sub-nodo ‘gestore’.
  4. Fare clic con il pulsante destro del mouse sulla parola “funzione”, quindi fare clic su “Mostra definizione funzione”

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

'Mostra definizione delle funzioni'

Fai un tentativo di estensione jQuery Audit ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ), dopo aver installato segui questi passaggi:

  1. Ispeziona l’elemento
  2. Nella nuova scheda ‘ jQuery Audit ‘ espandere la proprietà Events
  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 della funzione
  5. Ora vedrai il codice di associazione degli eventi
  6. Fare clic sul pulsante ‘ Pretty print ‘ per una visione più leggibile del codice

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

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

Se non hai familiarità con questo strumento: (solo nel caso)

  • tasto destro del mouse su qualsiasi pagina (in chrome)
  • clicca ‘Ispeziona elemento’
  • fare clic sulla scheda ‘Script’
  • Barra di ricerca in alto a destra

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

Es: la ricerca di #foo ti porta a

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

inserisci la descrizione dell'immagine qui

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

passi

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

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

Esempio :

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

Quindi, se presente, il gestore di eventi disponibile mostrerà 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 versione 62.0.3202.94 :

Strumenti per sviluppatori di Chrome - Listener di eventi

  1. Seleziona l’elemento che desideri ispezionare

  2. Scegli la scheda Listener eventi

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

Per la versione 52.0.2743.116 di Chrome:

  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.

Aggiornamento 2018 – Potrebbe essere utile per i futuri lettori:

Non sono sicuro di quando è stato introdotto originariamente in Chrome. Ma un altro (facile) modo in cui questo può essere fatto ora in Chrome è tramite i comandi della console.

Ad esempio: ( nel tipo di console Chrome )

 getEventListeners($0) 

Mentre $ 0 è l’elemento selezionato nel DOM.

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

inserisci la descrizione dell'immagine qui