I'm menggunakan Chrome dan situs web saya sendiri.
1) saya memiliki sebuah bentuk di mana orang-orang yang mendaftar dengan mengklik orange ini gambar-tombol:
2) saya memeriksa, dan ini adalah semua itu adalah:
<img class="formSend" src="gambar/botoninscribirse2.png">
3) Di bagian atas dari kode sumber, ada banyak dari naskah sumber. Aku tahu yang satu tombol panggilan karena saya kode ini: <script src="js/jquery2.js" type="text/javascript"></script>
4) Dalam file tersebut, anda bisa menemukan: $(".formSend").click(function() { ... });
yang adalah apa yang dipicu oleh tombol (untuk melakukan yang cukup kompleks validasi form dan submit) dan apa yang saya inginkan adalah untuk dapat menemukan bahwa menggunakan chrome dev tools pada situs web apapun.
Pendengar tab didn't bekerja untuk saya. Jadi kemudian saya mencoba mencari acara klik pendengar, yang tampak seperti taruhan yang aman untuk saya, tapi... ada's tidak ada jquery2.js
di sana (dan saya tidak't benar-benar tahu mana file kode ini jadi saya'd buang waktu untuk memeriksa semua ini...):
Saya $(".formSend").click(function() { ... });
fungsi dalam jquery2.js
file tidak ada.
Jesse menjelaskan mengapa:
"Akhirnya, alasan mengapa anda tidak langsung terikat untuk klik event handler adalah karena jQuery mengembalikan fungsi yang akan terikat. jQuery's fungsi, pada gilirannya, melewati beberapa lapisan abstraksi dan cek, dan di suatu tempat di sana, itu mengeksekusi fungsi anda."
Seperti yang disarankan oleh beberapa dari anda aku've dikumpulkan dengan metode-metode yang bekerja di salah satu jawaban di bawah ini.
Alexander Pavlov's jawaban mendapat terdekat untuk apa yang anda inginkan.
Karena extensiveness jQuery's abstraksi dan fungsi, banyak rintangan harus melompat dalam rangka untuk mendapatkan daging dari acara tersebut. Saya telah menyiapkan ini [jsFiddle](
) untuk menunjukkan pekerjaan.Kau dekat pada yang satu ini.
Chrome Dev Alat akan menghentikan eksekusi script, dan hadir anda dengan ini indah belitan minified kode:
Sekarang, kuncinya di sini adalah untuk tidak terbawa menekan tombol, dan mengawasi keluar pada layar.
Saya don't memiliki jawaban yang tepat, atau penjelasan mengapa jQuery pergi melalui banyak lapisan abstraksi itu tidak semua yang dapat saya sarankan adalah bahwa itu adalah karena pekerjaan itu tidak untuk abstrak penggunaan dari browser mengeksekusi kode.
Berikut ini adalah [jsFiddle](http://jsfiddle.net/PEw7W/) dengan debug versi jQuery (yaitu, tidak minified). Ketika anda melihat pada kode yang pertama (non-minified) breakpoint, anda dapat melihat bahwa kode ini menangani banyak hal-hal:
// ...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...
Alasan saya pikir anda tidak terjawab itu pada usaha anda ketika "pelaksanaan jeda dan aku melompat baris demi baris", adalah karena anda mungkin telah menggunakan "Langkah di Atas" fungsi, bukan Langkah. Berikut ini adalah StackOverflow jawaban menjelaskan perbedaan.
Akhirnya, alasan mengapa fungsi anda tidak langsung terikat untuk klik event handler adalah karena jQuery mengembalikan fungsi yang akan terikat. jQuery's fungsi pada gilirannya pergi melalui beberapa lapisan abstraksi dan cek, dan tempat di sana, itu mengeksekusi fungsi anda.
Karya-karya besar, setup minimal dan tidak ada pihak ketiga.
Menurut Chrome's dokumentasi:
Apa yang terjadi ketika anda blackbox script?
Pengecualian dilemparkan dari perpustakaan kode tidak akan berhenti (jika Berhenti pada pengecualian diaktifkan), Melangkah ke/keluar/over melewati perpustakaan kode, pendengar Acara breakpoints don't istirahat di perpustakaan, kode debugger akan berhenti pada setiap breakpoints diatur dalam kode perpustakaan. Yang hasil akhir adalah anda adalah debugging kode aplikasi anda bukan ketiga sumber daya partai.
jquery\..*\.js
(glob pola/manusia terjemahan: jquery.*.js
)|
, seperti: jquery\..*\.js/include\.postload\.js
(yang bertindak seperti sebuah "atau pola ini", sehingga untuk berbicara. Atau terus menambahkan mereka dengan "Tambahkan" tombol.*Bonus tip!** Saya menggunakan Regex101 secara teratur (tapi ada banyak orang lain: ) untuk dengan cepat menguji saya berkarat pola regex dan mencari tahu di mana aku'm yang salah dengan langkah-demi-langkah regex debugger. Jika anda belum "menguasai" dalam Ekspresi Reguler saya sarankan anda mulai menggunakan situs yang membantu anda menulis dan memvisualisasikan mereka seperti http://buildregex.com/ dan https://www.debuggex.com/
Anda juga dapat menggunakan menu konteks ketika bekerja di Sumber panel. Ketika melihat sebuah file, anda bisa klik kanan di editor dan memilih Blackbox Script. Ini akan menambahkan file ke daftar di panel Pengaturan:
It's merupakan alat yang sangat baik untuk memiliki:
Visual Event adalah sebuah open-source Javascript bookmarklet yang menyediakan debugging informasi tentang peristiwa-peristiwa yang telah terpasang untuk DOM unsur-unsur. Visual tayangan Acara:
- elemen Yang memiliki acara-acara yang melekat pada mereka
- jenis peristiwa yang melekat pada suatu elemen
- kode yang akan dijalankan dengan acara ini dipicu
- sumber file, dan nomor baris di mana terlampir fungsi didefinisikan (Webkit browser dan Opera saja)
Anda dapat menjeda kode ketika anda klik di suatu tempat di halaman, atau ketika DOM dimodifikasi... dan jenis lain dari JS breakpoints yang akan berguna untuk mengetahui. Anda harus menerapkan blackboxing di sini untuk menghindari mimpi buruk.
Dalam contoh ini, saya ingin tahu apa yang sebenarnya terjadi ketika saya klik tombol.
Acara Pendengar Breakpoints
:Mouse
dan pilih klik
Dengan Alat Dev diaktifkan, anda dapat mencari seluruh codebase (semua kode di semua file) dengan ⌘+⌥+A atau:
dan mencari #envio
atau apapun tag/class/id anda berpikir dimulai pesta dan anda mungkin mendapatkan suatu tempat lebih cepat dari yang diantisipasi.
Diketahui kadang-kadang ada's tidak hanya sebuah img
tapi banyak elemen ditumpuk, dan anda mungkin tidak tahu yang satu pemicu kode.
Jika ini adalah sedikit dari pengetahuan anda, lihatlah Chrome's tutorial debugging.
Kedengarannya "...dan aku melompat baris demi baris..." bagian yang salah. Apakah anda StepOver atau StepIn dan apakah anda yakin anda don't sengaja melewatkan relevan panggilan?
Yang mengatakan, debugging kerangka kerja yang dapat menjadi membosankan untuk alasan ini. Untuk mengatasi masalah ini, anda dapat mengaktifkan "Aktifkan kerangka dukungan debugging" experiment. Bahagia debugging! :)
Anda dapat menggunakan [findHandlersJS](https://github.com/ruidfigueiredo/findHandlersJS)
Anda dapat menemukan handler dengan melakukan di chrome console:
findEventHandlers("klik", "img.envio")
Anda'll mendapatkan informasi berikut dicetak di chrome's console:
Info lebih lanjut here dan anda dapat mencobanya dalam contoh ini situs di sini.
Ini solusi kebutuhan jQuery's data metode.
$._data($(".contoh").get(0), "peristiwa")
$._data()
hanya mengakses jQuery's data metode. Yang lebih mudah dibaca alternatif yang bisa menjadi jQuery._data()
.
Yang menarik oleh ini JADI jawaban:
Sebagai jQuery 1.8, hal data tidak lagi tersedia dari "API umum" untuk data. Baca jQuery ini posting blog. sekarang Anda harus menggunakan ini sebagai gantinya:
jQuery._data( elem, "peristiwa" );
elem harus menjadi Elemen HTML, tidak jQuery objek, atau pemilih.Harap dicatat, bahwa ini adalah internal, 'swasta' struktur, dan tidak't dapat diubah. Gunakan ini untuk keperluan debugging saja.
Dalam versi jQuery, anda mungkin harus menggunakan metode lama yang ini:
jQuery( elem ).data( "peristiwa" );
Versi agnostik jQuery akan sama: (jQuery._data || jQuery.data)(elem, 'acara');