Sto usando Chrome e il mio sito web.

Quello che so dall'interno:

1 ) Ho un modulo in cui le persone si iscrivono facendo clic su questo pulsante immagine arancione:

2 ) Lo ispeziono, e questo è tutto: <img class="formSend" src="images/botoninscribirse2.png">

3 ) Nella parte superiore del codice sorgente, ci sono tonnellate di fonti di script. So quale viene chiamato dal pulsante perché l'ho codificato:<script src="js/jquery2.js" type="text/javascript"></script>

4 ) All'interno di quel file, è possibile trovare: $(".formSend").click(function() { ... });qual è ciò che viene attivato dal pulsante (per eseguire una convalida e inviare un modulo abbastanza complesso) e ciò che voglio è riuscire a trovarlo utilizzando gli strumenti di sviluppo di Chrome su qualsiasi sito Web.

Come posso sapere dove chiama l'elemento?

La scheda degli ascoltatori non ha funzionato per me. Quindi ho provato a cercare i listener di eventi click, che mi sono sembrati una scommessa sicura ma ... non jquery2.jsce n'è dentro (e non saprei davvero quale file sia il codice, quindi perderei tempo a controllare tutti questi .. .):

La mia $(".formSend").click(function() { ... });funzione all'interno del jquery2.jsfile non è presente.

Jesse spiega perché :

"Infine, il motivo per cui la tua funzione non è direttamente legata al gestore di eventi click è perché jQuery restituisce una funzione che viene legata. La funzione di jQuery, a sua volta, passa attraverso alcuni livelli di astrazione e controlli, e da qualche parte lì esegue la tua funzione ".

Come suggerito da alcuni di voi, ho raccolto i metodi che hanno funzionato in una risposta in basso .

La risposta di Alexander Pavlov si avvicina di più a ciò che desideri.

A causa dell'ampiezza dell'astrazione e della funzionalità di jQuery, molti salti devono essere saltati per arrivare alla carne dell'evento. Ho creato questo jsFiddle per dimostrare il lavoro.

1. Impostazione del punto di interruzione del listener di eventi

Eri vicino a questo.

1. Apri Chrome Dev Tools (F12) e vai alla scheda Sorgenti.
2. Drill down to Mouse -> Click (clicca per ingrandire)
   
   

2. Fai clic sul pulsante!

Chrome Dev Tools metterà in pausa l'esecuzione degli script e ti presenterà questo bellissimo intreccio di codice minimizzato:

(clicca per ingrandire)

3. Trova il codice glorioso!

Ora, il trucco qui è di non lasciarti trasportare premendo il tasto e tenere d'occhio lo schermo.

1. Premere il F11tasto (Step In) fino a visualizzare il codice sorgente desiderato
2. Il codice sorgente è finalmente arrivato
   • Nell'esempio jsFiddle fornito sopra, ho dovuto premere F11 108 volte prima di raggiungere il gestore / funzione dell'evento desiderato
   • Il chilometraggio può variare, a seconda della versione di jQuery (o libreria del framework) utilizzata per associare gli eventi
   • Con sufficiente impegno e tempo, puoi trovare qualsiasi gestore / funzione dell'evento

4. Spiegazione

Non ho la risposta esatta o la spiegazione del perché jQuery attraversi i molti strati di astrazioni che fa - tutto ciò che posso suggerire è che è a causa del lavoro che fa per sottrarre il suo utilizzo dal browser che esegue il codice .

Ecco un jsFiddle con una versione di debug di jQuery (ovvero non minimizzata). Quando guardi il codice sul primo punto di interruzione (non minimizzato), puoi vedere che il codice gestisce molte cose:

    // ...snip...

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

    // ...snip...

Il motivo per cui penso che ti sia sfuggito al tuo tentativo quando "l' esecuzione si interrompe e salto riga per riga ", è perché potresti aver usato la funzione "Passa sopra", invece di entrare. Ecco una risposta StackOverflow che spiega le differenze.

Infine, il motivo per cui la tua funzione non è direttamente associata al gestore di eventi click è perché jQuery restituisce una funzione che viene associata. La funzione di jQuery a sua volta passa attraverso alcuni livelli e controlli di astrazione e da qualche parte lì esegue la tua funzione.

Soluzione 1: blackbox del framework

Funziona alla grande, installazione minima e nessuna terza parte.

Secondo la documentazione di Chrome :

Cosa succede quando si inserisce nella blackbox uno script?

Le eccezioni generate dal codice della libreria non verranno messe in pausa (se la funzione Pausa su eccezioni è abilitata), Entrare in / out / over ignora il codice della libreria, I punti di interruzione del listener di eventi non si rompono nel codice della libreria, Il debugger non si interromperà su tutti i punti di interruzione impostati nella libreria codice. Il risultato finale è il debug del codice dell'applicazione anziché di risorse di terze parti.

1. Apri gli Strumenti di sviluppo di Chrome ( F12o ⌘+ ⌥+ i), vai alle impostazioni (in alto a destra o F1). Trova una scheda a sinistra chiamata " Blackboxing "

2. Qui è dove si inserisce il modello RegEx dei file che Chrome deve ignorare durante il debug. Ad esempio: jquery\..*\.js(pattern glob / umano traduzione: jquery.*.js)
3. Se vuoi saltare i file con più pattern puoi aggiungerli usando il carattere pipe, in questo |modo: jquery\..*\.js|include\.postload\.js(che si comporta come un "o questo pattern", per così dire. O continua ad aggiungerli con il pulsante "Aggiungi".
4. Ora continua con la Soluzione 3 descritta di seguito.

Suggerimento bonus! Uso Regex101 regolarmente (ma ce ne sono molti altri :) per testare rapidamente i miei schemi di regex arrugginiti e scoprire dove sbaglio con il debugger regex passo-passo. Se non sei ancora "fluente" nelle espressioni regolari, ti consiglio di iniziare a utilizzare siti che ti aiutano a scrivere e visualizzarli come http://buildregex.com/ e https://www.debuggex.com/

Puoi anche usare il menu contestuale quando lavori nel pannello Sorgenti. Durante la visualizzazione di un file, è possibile fare clic con il pulsante destro del mouse nell'editor e scegliere Blackbox Script. Ciò aggiungerà il file all'elenco nel pannello Impostazioni:

Soluzione 2: Visual Event

È uno strumento eccellente per avere :

Visual Event è un bookmarklet Javascript open source che fornisce informazioni di debug su eventi collegati a elementi DOM. Visual Event mostra:

• A quali elementi sono associati eventi
• Il tipo di eventi associati a un elemento
• Viene attivato il codice che verrà eseguito con l'evento
• Il file di origine e il numero di riga per cui è stata definita la funzione allegata (solo browser Webkit e Opera)

Soluzione 3: debug

Puoi mettere in pausa il codice quando fai clic da qualche parte nella pagina, o quando il DOM viene modificato ... e altri tipi di punti di interruzione JS che saranno utili da sapere. Dovresti applicare il blackbox qui per evitare un incubo.

In questo caso, voglio sapere cosa succede esattamente quando faccio clic sul pulsante.

1. Apri Strumenti di sviluppo -> scheda Fonti e, a destra, trova Event Listener Breakpoints:

   

2. Espandi Mousee selezionaclick

3. Ora fai clic sull'elemento (l'esecuzione dovrebbe essere in pausa) e ora stai eseguendo il debug del codice. Puoi scorrere tutto il codice premendo F11(che è Step in ). O tornare indietro di alcuni salti nello stack. Possono esserci molti salti

Soluzione 4: parole chiave di pesca

Con Dev Tools attivato, puoi cercare in tutto il codebase (tutto il codice in tutti i file) con ⌘+ ⌥+ Fo:

e la ricerca #envioo qualunque sia il tag / classe / id che pensi inizi la festa e potresti arrivare da qualche parte più velocemente del previsto.

Tieni presente che a volte non sono presenti solo un, imgma molti elementi, e potresti non sapere quale attiva il codice.

Se questo è un po 'al di fuori delle tue conoscenze, dai un'occhiata al tutorial di Chrome sul debug .

Sembra che la parte "... e io salta riga per riga ..." sia errata. StepOver o StepIn e sei sicuro di non perdere accidentalmente la chiamata in questione?

Detto questo, i framework di debug possono essere noiosi proprio per questo motivo. Per alleviare il problema, è possibile abilitare l'esperimento "Abilita supporto debug framework" . Buon debug! :)

Puoi usare findHandlersJS

Puoi trovare il gestore facendo nella console di Chrome:

findEventHandlers("click", "img.envio")

Otterrai le seguenti informazioni stampate nella console di Chrome:

• element
  L' elemento effettivo in cui è stato registrato il gestore eventi
• eventi
  Matrice con informazioni sui gestori di eventi jquery per il tipo di evento a cui siamo interessati (ad es. clic, modifica, ecc.)
• gestore
  Metodo del gestore di eventi effettivi che è possibile visualizzare facendo clic con il pulsante destro del mouse e selezionando Mostra definizione funzione
• selettore
  Il selettore fornito per eventi delegati. Sarà vuoto per eventi diretti.
• target
  Elenco con gli elementi targetizzati da questo gestore eventi. Ad esempio, per un gestore di eventi delegato registrato nell'oggetto documento e indirizzato a tutti i pulsanti in una pagina, questa proprietà elencherà tutti i pulsanti nella pagina. Puoi passarli sopra e vederli evidenziati in cromo.

Maggiori informazioni qui e puoi provarlo in questo sito di esempio qui .

Questa soluzione richiede il metodo dei dati di jQuery .

1. Apri la console di Chrome (anche se qualsiasi browser con jQuery caricato funzionerà)
2. Correre $._data($(".example").get(0), "events")
3. Drill down dell'output per trovare il gestore eventi desiderato.
4. Fare clic con il tasto destro del mouse su "gestore" e selezionare "Mostra definizione funzione"
5. Il codice verrà visualizzato nella scheda Sorgenti

$._data()sta solo accedendo al metodo dei dati di jQuery. Un'alternativa più leggibile potrebbe essere jQuery._data().

Punto interessante di questa risposta SO :

A partire da jQuery 1.8, i dati dell'evento non sono più disponibili dalla "API pubblica" per i dati. Leggi questo post sul blog jQuery . Ora dovresti usare questo invece:

jQuery._data( elem, "events" ); elem dovrebbe essere un elemento HTML, non un oggetto jQuery o un selettore.

Si noti che questa è una struttura interna "privata" e non deve essere modificata. Utilizzare questo solo a scopo di debug.

Nelle versioni precedenti di jQuery, potrebbe essere necessario utilizzare il vecchio metodo che è:

jQuery( elem ).data( "events" );

Una versione agnostica di jQuery sarebbe: (jQuery._data || jQuery.data)(elem, 'events');