Menggunakan Chrome, cara menemukan acara mana yang terikat ke suatu elemen

Mari kita anggap saya memiliki tautan di halaman saya:

<a href="#" id="foo">Click Here</a>

Saya tidak tahu apa-apa lagi, tetapi ketika saya mengklik tautan, sebuah alert("bar")ditampilkan. Jadi saya tahu bahwa di suatu tempat, beberapa kode semakin terikat #foo.

Bagaimana saya bisa menemukan kode yang mengikat alert("bar")acara klik? Saya mencari solusi dengan Chrome.

Ps .: Contohnya adalah fiktif, jadi saya tidak mencari solusi seperti: "Gunakan XXXXXX dan cari seluruh proyek untuk" alert (\ "bar \") ". Saya ingin solusi debugging / penelusuran yang nyata.

Menggunakan Chrome 15.0.865.0 dev . Ada bagian "Pendengar Acara" pada panel Elemen:

Dan "Acara Pendengar Breakpoints" pada panel Script. Gunakan Mouse -> klik breakpoint dan kemudian "melangkah ke panggilan fungsi berikutnya" sambil mengawasi tumpukan panggilan untuk melihat apa fungsi userland menangani acara tersebut. Idealnya, Anda akan menggantikan versi minified dari jQuery dengan satu unminified sehingga Anda tidak perlu langkah dalam sepanjang waktu, dan penggunaan langkah lebih bila memungkinkan.

Anda juga dapat menggunakan inspektur Chrome untuk menemukan acara terlampir dengan cara lain, sebagai berikut:

1. Klik kanan pada elemen untuk diperiksa, atau temukan di panel 'Elemen'.
2. Kemudian di tab / panel 'Acara Pendengar', perluas acara (mis. 'Klik')
3. Perluas berbagai sub-node untuk menemukan yang Anda inginkan, dan kemudian cari di mana sub-node 'handler' berada.
4. Klik kanan kata 'fungsi', lalu klik 'Tampilkan definisi fungsi'

Ini akan membawa Anda ke tempat pawang didefinisikan, seperti ditunjukkan dalam gambar berikut, dan dijelaskan oleh Paul Irish di sini: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

Cobalah ekstensi jQuery Audit ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbakdhhmfgmemlncjg ), setelah menginstal ikuti langkah-langkah ini:

1. Periksa elemen
2. Pada tab ' jQuery Audit ' baru rentangkan properti Events
3. Pilih untuk Acara yang Anda butuhkan
4. Dari properti handler, klik kanan pada fungsi dan pilih ' Tampilkan definisi fungsi '
5. Anda sekarang akan melihat kode pengikatan Acara
6. Klik tombol ' Cetak cantik ' untuk tampilan kode yang lebih mudah dibaca

(Terbaru per 2020) Untuk versi Chrome Versi 83.0.4103.61 :

1. Pilih elemen yang ingin Anda periksa

2. Pilih tab Acara Pendengar

3. Pastikan untuk memeriksa pendengar Kerangka untuk menunjukkan file javascript nyata bukan fungsi jquery.

Sunting : sebagai pengganti jawaban saya sendiri, yang satu ini cukup bagus: Cara debug bindings peristiwa JavaScript / jQuery dengan Firebug (atau alat serupa)

Alat pengembang Google Chromes memiliki fungsi pencarian yang dibangun di bagian skrip

Jika Anda tidak terbiasa dengan alat ini: (untuk berjaga-jaga)

• klik kanan di mana saja pada halaman (dalam chrome)
• klik 'Periksa Elemen'
• klik tab 'Script'
• Bilah pencarian di kanan atas

Melakukan pencarian cepat untuk #ID akan membawa Anda ke fungsi pengikatan pada akhirnya.

Mis: mencari #fooakan membawa Anda ke

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

Pembaruan 2018 - Mungkin bermanfaat bagi pembaca di masa mendatang:

Saya tidak yakin kapan ini awalnya diperkenalkan di Chrome. Tetapi cara lain (mudah) ini bisa dilakukan sekarang di Chrome adalah melalui perintah konsol.

Misalnya: ( dalam tipe konsol chrome )

getEventListeners($0)

Sedangkan $ 0 adalah elemen yang dipilih di DOM.

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

findEventHandlers adalah plugin jquery, kode mentahnya ada di sini: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

Langkah

1. Rekatkan kode mentah langsung ke konsol chrome (catatan: harus sudah memuat jquery)

2. Gunakan pemanggilan fungsi berikut: findEventHandlers(eventType, selector);
   untuk menemukan eventType handler elemen yang ditentukan pemilih terkait.

Contoh :

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

Kemudian jika ada, event handler yang tersedia akan ditampilkan di bawah, Anda perlu memperluas untuk menemukan handler, klik kanan fungsi dan pilih show function definition

Lihat: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

Untuk Chrome Versi 52.0.2743.116:

1. Di Alat Pengembang Chrome, buka panel 'Cari' dengan menekan Ctrl+ Shift+ F.

2. Ketikkan nama elemen yang ingin Anda temukan.

Hasil untuk elemen yang diikat akan muncul di panel dan nyatakan file tempat mereka berada.