Am'm folosind Chrome și propriul site-ul meu.
1) am un formular în care oamenii înregistrează-te făcând clic pe această portocaliu imagine-butonul:
2) nu-l inspecteze, și asta e tot:
<img class="formSend" src="imagini/botoninscribirse2.png">
3) În partea de sus a codului sursă, nu sunt de tone de surse de script. Știu care butonul de apel pentru că am codat: <script src="js/jquery2.js" type="text/javascript"></script>
4) În acest fișier, veți putea găsi: $(".formSend").click(function() { ... });
care este ceea ce este declanșat de butonul (pentru a face o formă destul de complex de validare și prezinte) și ce vreau este de a fi capabil de a găsi că folosind chrome dev tools de pe orice site web.
Ascultătorii tab-am't de lucru pentru mine. Atunci am încercat să caut un clic pe ascultătorii eveniment, care părea un pariu sigur pentru mine, dar... nu's nu `jquery2.js acolo (și am ar't într-adevăr știu ce fișier codul este atât de am'd pierde timpul cu verificarea tuturor acestor...):
Mea $(".formSend").click(function () { ... }); funcția în cadrul
jquery2.js dosarul lui nu este acolo.
Jesse explică ce:
"în cele din Urmă, motiv pentru care funcția nu este direct legat de tratare a evenimentului click este pentru jQuery returnează o funcție care devine legat. jQuery's funcției, la rândul său, trece prin niște straturi de abstractizare și controale, și acolo, undeva, se execută funcția."
Cum a sugerat de către unele dintre voi am'am colectat metode care au lucrat în un răspuns de mai jos.
Alexander Pavlov's a răspunde devine cel mai apropiat de ceea ce vrei.
Datorită modurilor de jQuery's abstractizare și funcționalitate, o mulțime de cercuri trebuie să fie sărit în scopul de a ajunge la carnea de eveniment. Am înființat această [jsFiddle](
) pentru a demonstra activitatea.Ai fost aproape.
Chrome Dev Tools va întrerupe executarea de script-ul, și vă prezentăm cu acest frumos incurcatura de minified cod:
Acum, trucul aici este de a nu te dus de val apăsați tasta, și să păstreze un ochi pe ecran.
Eu nu't au răspuns exact, sau explicație cu privire la motivul jQuery trece prin mai multe straturi de abstracții face - tot ce pot să sugerez este că este pentru că de locuri de muncă se face de la abstract, departe de utilizare de la browser-ul executarea de cod.
Aici este o [jsFiddle](http://jsfiddle.net/PEw7W/) cu o versiune de depanare jQuery (de exemplu, nu minified). Când te uiți la codul de pe prima (non-minified) breakpoint, puteți vedea că acest cod se ocupă de mai multe lucruri:
// ...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...
Motivul cred că ai ratat-o la încercare atunci când "executarea se oprește și mă salt de linie", este pentru că poate fi folosit "Pas Peste" funcție, în loc de Pas. Aici este o StackOverflow raspuns explicarea diferențelor.
În cele din urmă, motiv pentru care funcția este nu direct legat de tratare a evenimentului click este pentru jQuery returnează o funcție care devine legat. jQuery's funcției, la rândul său trece printr-o abstracție straturi și controale, și undeva acolo, se execută funcția.
Lucrari de mare, minim de configurare și nici terțe părți.
Potrivit Chrome's documentatiei:
Ce se întâmplă atunci când blackbox un script?
Excepții aruncate din bibliotecă cod nu va întrerupe (dacă este Pauză pe excepții este activat), pas cu Pas in/out/peste ocolește biblioteca cod, ascultător Eveniment puncte de întrerupere don't rupe în bibliotecă cod, debugger nu va întrerupe pe orice puncte de întrerupere stabilit în bibliotecă cod. La rezultatul final este * sunteți depanarea cod aplicație** în loc de-a treia resurse de partid.
jquery\..*\.js
(glob model/uman traducere: jquery.*.js
)|
, astfel: jquery\..*\.js/include\.postload\.js
(care acționează ca un "sau acest model", ca sa zic asa. Sau să păstreze adăugarea de ele cu "Adăugați" buton.sfat Bonus! Eu folosesc Regex101 în mod regulat (dar mai sunt multe altele: ) pentru a-mi testa ruginit regex modele și de a afla unde am'm greșit cu-pas-cu-pas regex debugger. Dacă nu sunteți încă "fluent" în Expresii Regulate vă recomand să începeți să utilizați site-uri care vă ajută să scrie și a le vizualiza, cum ar fi http://buildregex.com/ și https://www.debuggex.com/
De asemenea, puteți utiliza meniul contextual atunci când se lucrează în Surse de panou. Atunci când vizualizați un fișier, puteți să faceți clic dreapta în editor și alege Blackbox Script. Aceasta va adăuga fișiere la lista din panoul de Setări:
It's un instrument excelent pentru a avea:
Eveniment Vizual este un open-source Javascript bookmarklet care oferă depanare informații despre evenimentele care au fost atașate la DOM elemente. Eveniment vizual prezinta:
- Ce elemente au evenimente atașate acestora
- tipul de evenimente atașat unui element
- codul care va fi rulat cu evenimentul este declanșat
- fișierul sursă și numărul liniei pentru care a atașat funcția a fost definită (browsere Webkit și Mozilla numai)
Puteți întrerupe cod atunci când faceți clic pe undeva în pagină, sau când DOM este modificat... și alte tipuri de JS puncte de întrerupere, care va fi util să știm. Ar trebui să se aplice blackboxing aici pentru a evita un coșmar.
În acest exemplu, vreau să știu ce se întâmplă exact atunci când am faceți clic pe butonul.
Cu Dev Tools activat, puteți căuta întreaga codebase (tot codul in toate fișierele) cu ⌘+⌥+F sau:
și căutarea #envio
sau orice tag/clasa/id crezi începe petrecerea și s-ar putea obține undeva mai repede decât s-a anticipat.
Să fie conștienți, uneori, nu's nu numai o img
, dar o mulțime de elemente suprapuse, și poate că tu nu știi care declanșează cod.
Dacă acest lucru este un pic de cunoștințe, să ia o privire la Chrome's tutorial despre depanare]10.
Parcă "...și sar linie cu linie..." partea este greșit. Ai StepOver sau StepIn și ești sigur că don't dor accidental relevante apel?
Asta a spus, depanare cadre poate fi plictisitor pentru exact acest motiv. Pentru a atenua problema, poti activați "Permite cadrelor debugging support" experiment. Fericit depanare! :)
Puteți utiliza [findHandlersJS](https://github.com/ruidfigueiredo/findHandlersJS)
Puteți găsi handler de a face în chrome consola:
findEventHandlers("faceți clic pe", "img.envio")
Te'll obține următoarele informații tipărite în chrome's consola:
Mai multe informații here și puteți să-l încercați în acest exemplu, site-ul aici.
Această soluție are nevoie de jQuery's de date metoda.
$._data($(".de exemplu").get(0), "evenimente")
$._data()
este doar accesarea jQuery's de date metoda. O mai ușor de citit alternativă ar putea fi pentru jQuery._data()`.
Interesant punct de asta ASA ca raspuns:
Ca de jQuery 1.8, datele de eveniment nu mai este disponibil de la "API-ul public" pentru date. Citi acest jQuery post pe blog. acum ar trebui să folosească acest loc:
jQuery._data( elem, "evenimente" );
elem ar trebui să fie un Element HTML, nu o jQuery obiect, sau selector.vă Rugăm să rețineți că aceasta este o interne, 'privat' structura și ar't fi modificate. Utilizați această pentru scopuri de depanare numai.
În versiunile mai vechi de jQuery, s-ar putea să folosească metoda veche care este:
jQuery( elem ).date de( "evenimente" );
O versiune agnostic jQuery ar fi: (jQuery._data || jQuery.date)(elem, 'evenimente');