Jeg bruker Chrome og mitt eget nettsted.
1) Jeg har et skjema der folk registrerer seg ved å klikke på denne oransje bildeknappen:
.
2) Jeg inspiserer det, og dette er alt det er:
<img class="formSend" src="images/botoninscribirse2.png">
3) Øverst i kildekoden er det mange skriptkilder. Jeg vet hvilket skript knappen kaller, fordi jeg har kodet det: <script src="js/jquery2.js" type="text/javascript"></script>
4) I den filen kan du finne: $(".formSend").click(function() { ... });
som er det som utløses av knappen (for å gjøre en ganske kompleks skjemavalidering og innsending) og hvad jeg vil er å kunne finne det ved hjelp av chrome dev tools på et hvilket som helst nettsted.
Listeners-fanen fungerte ikke for meg. Så da prøvde jeg å se på click event listeners, noe som virket som et sikkert valg for meg, men... det er ingen jquery2.js
der (og jeg vet ikke helt hvilken fil koden er, så jeg ville kaste bort tid på å sjekke alle disse...):
Min $(".formSend").click(function() { ... });
funksjon i jquery2.js
filen er ikke der.
Jesse forklarer hvorfor:
" "Til slutt, grunnen til at funksjonen din ikke er direkte bundet til klikkhendelsesbehandleren er fordi jQuery returnerer en funksjon som blir bundet. jQuery's funksjon går i sin tur gjennom noen abstraksjonslag og sjekker, og et sted der inne utfører den funksjonen din.
Som foreslått av noen av dere har jeg samlet metodene som fungerte i ett svar nedenfor.
Alexander Pavlov's svar kommer nærmest det du ønsker.
På grunn av den omfattende abstraksjonen og funksjonaliteten i jQuery', må man hoppe over mange bøyler for å komme til selve hendelsen. Jeg har satt opp denne [jsFiddle](
) for å demonstrere hvordan det fungerer.Du var nær ved å lykkes med dette.
Chrome Dev Tools setter skriptkjøringen på pause og viser deg denne vakre sammenfiltringen av minifisert kode:
Nå gjelder det å ikke la seg rive med når du trykker på tasten, og holde øye med skjermen.
Jeg har ikke det eksakte svaret eller forklaringen på hvorfor jQuery går gjennom de mange lagene med abstraksjoner som det gjør - alt jeg kan foreslå er at det er på grunn av jobben det gjør med å abstrahere bort bruken fra nettleseren som utfører koden.
Her er en [jsFiddle](http://jsfiddle.net/PEw7W/) med en feilsøkingsversjon av jQuery (dvs. ikke minifisert). Når du ser på koden på det første (ikke-minifiserte) stoppunktet, kan du se at koden håndterer mange ting:
// ...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...
Grunnen til at jeg tror du gikk glipp av det i forsøket ditt når "eksekveringen stopper og jeg hopper linje for linje", er at du kan ha brukt funksjonen "Step Over" i stedet for Step In. Her er et StackOverflow-svar som forklarer forskjellene.
Til slutt, grunnen til at funksjonen din ikke er direkte bundet til klikkhendelsesbehandleren, er at jQuery returnerer en funksjon som blir bundet. jQuery's funksjon går i sin tur gjennom noen abstraksjonslag og sjekker, og et eller annet sted der inne utfører den funksjonen din.
Det høres ut som om "...and I jump line by line..."-delen er feil. Går du StepOver eller StepIn, og er du sikker på at du ikke ved et uhell går glipp av det aktuelle anropet?
Når det er sagt, kan feilsøking av rammeverk være kjedelig av akkurat denne grunnen. For å redusere problemet kan du [aktivere eksperimentet "Aktiver støtte for feilsøking av rammeverk" (http://www.divshot.com/blog/tips-and-tricks/ignoring-library-code-while-debugging-in-chrome). God feilsøking! :)
Du kan bruke [findHandlersJS](https://github.com/ruidfigueiredo/findHandlersJS).
Du kan finne handleren ved å gjøre det i chrome-konsollen:
findEventHandlers("click", "img.envio")
".
Da får du følgende informasjon skrevet ut i chrome-konsollen:
Mer informasjon her, og du kan prøve det på denne eksempelsiden her.