Saya menggunakan Chrome dan situs web saya sendiri.

Apa yang saya tahu dari dalam:

1 ) Saya memiliki formulir tempat orang mendaftar dengan mengklik tombol gambar oranye ini:

2 ) Saya memeriksanya, dan ini adalah semuanya: <img class="formSend" src="images/botoninscribirse2.png">

3 ) Di bagian atas kode sumber, ada banyak sumber skrip. Saya tahu tombol mana yang memanggil karena saya memberi kode:<script src="js/jquery2.js" type="text/javascript"></script>

4 ) Di dalam file itu, Anda dapat menemukan: $(".formSend").click(function() { ... });apa yang dipicu oleh tombol (untuk melakukan validasi dan pengiriman formulir yang cukup kompleks) dan yang saya inginkan adalah dapat menemukannya dengan menggunakan alat dev chrome di situs web mana pun.

Bagaimana saya bisa mengetahui di mana elemen itu memanggil?

Tab pendengar tidak berfungsi untuk saya. Jadi saya mencoba mencari pendengar acara klik, yang sepertinya taruhan yang aman bagi saya tapi ... tidak ada jquery2.jsdi sana (dan saya tidak akan benar-benar tahu file mana kode tersebut sehingga saya akan membuang waktu memeriksa semua ini .. .):

$(".formSend").click(function() { ... });Fungsi saya di dalam jquery2.jsfile tidak ada.

Jesse menjelaskan alasannya :

"Akhirnya, alasan mengapa fungsi Anda tidak terikat langsung ke event handler klik adalah karena jQuery mengembalikan fungsi yang terikat. Fungsi jQuery, pada gilirannya, melewati beberapa lapisan abstraksi dan memeriksa, dan di suatu tempat di sana, ia mengeksekusi fungsi Anda . "

Seperti yang disarankan oleh beberapa dari Anda, saya telah mengumpulkan metode yang bekerja dalam satu jawaban di bawah .

Jawaban Alexander Pavlov paling dekat dengan apa yang Anda inginkan.

Karena kepanjangan dari abstraksi dan fungsionalitas jQuery, banyak rintangan harus dilompati untuk mendapatkan daging dari acara tersebut. Saya telah mengatur jsFiddle ini untuk menunjukkan pekerjaan.

1. Menyiapkan Breakpoint Pendengar Acara

Anda sudah dekat dengan yang satu ini.

1. Buka Alat Dev Chrome (F12), dan buka tab Sumber.
2. Telusuri ke Mouse -> Klik (klik untuk memperbesar)
   
   

2. Klik tombolnya!

Alat Chrome Dev akan menghentikan sementara eksekusi skrip, dan memberi Anda keterikatan kode minified yang indah ini:

(klik untuk memperbesar)

3. Temukan kode yang mulia!

Sekarang, trik di sini adalah untuk tidak terbawa dengan menekan tombol, dan mengawasi layar.

1. Tekan F11tombol (Langkah Masuk) hingga kode sumber yang diinginkan muncul
2. Kode sumber akhirnya tercapai
   • Dalam sampel jsFiddle yang disediakan di atas, saya harus menekan F11 108 kali sebelum mencapai event handler / function yang diinginkan
   • Jarak tempuh Anda dapat bervariasi, tergantung pada versi jQuery (atau pustaka kerangka kerja) yang digunakan untuk mengikat acara
   • Dengan cukup dedikasi dan waktu, Anda dapat menemukan setiap event handler / fungsi

4. Penjelasan

Saya tidak memiliki jawaban yang tepat, atau penjelasan mengapa jQuery melewati banyak lapisan abstraksi yang dilakukannya - yang bisa saya sarankan adalah karena pekerjaan yang dilakukannya untuk menghilangkan penggunaannya dari browser yang mengeksekusi kode .

Berikut adalah jsFiddle dengan versi debug dari jQuery (yaitu, tidak diperkecil). Ketika Anda melihat kode pada breakpoint pertama (non-minified), Anda dapat melihat bahwa kode tersebut menangani banyak 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 melewatkannya pada upaya Anda ketika " eksekusi berhenti dan saya melompat baris demi baris ", adalah karena Anda mungkin telah menggunakan fungsi "Step Over", bukannya Step In. Berikut adalah jawaban StackOverflow yang menjelaskan perbedaannya.

Akhirnya, alasan mengapa fungsi Anda tidak terikat langsung ke event handler klik adalah karena jQuery mengembalikan fungsi yang terikat. Fungsi jQuery pada gilirannya melewati beberapa lapisan abstraksi dan memeriksa, dan di suatu tempat di sana, ia menjalankan fungsi Anda.

Solusi 1: Kerangka blackboxing

Bekerja dengan baik, pengaturan minimal dan tidak ada pihak ketiga.

Menurut dokumentasi Chrome :

Apa yang terjadi ketika Anda blackbox skrip?

Pengecualian yang dilemparkan dari kode perpustakaan tidak akan berhenti (jika Jeda pada pengecualian diaktifkan), Melangkah masuk / keluar melewati kode perpustakaan, breakpoint pendengar acara tidak pecah dalam kode perpustakaan, debugger tidak akan berhenti pada setiap breakpoint yang ditetapkan di perpustakaan kode. Hasil akhirnya adalah Anda men-debug kode aplikasi Anda alih-alih sumber daya pihak ketiga.

1. Pop terbuka Alat Pengembang Chrome ( F12atau ⌘+ ⌥+ i), pergi ke pengaturan (kanan atas, atau F1). Temukan tab di sebelah kiri yang disebut " Blackboxing "

2. Di sinilah Anda meletakkan pola RegEx dari file yang ingin diabaikan Chrome saat melakukan debugging. Misalnya: jquery\..*\.js(pola glob / terjemahan manusia :jquery.*.js )
3. Jika Anda ingin melewatkan file dengan beberapa pola, Anda dapat menambahkannya menggunakan karakter pipa |, seperti:jquery\..*\.js|include\.postload\.js (yang bertindak seperti "atau pola ini", misalnya. Atau terus menambahkannya dengan tombol "Tambah".
4. Sekarang lanjutkan ke Solusi 3 yang dijelaskan di bawah.

Kiat bonus! Saya menggunakan Regex101 secara teratur (tetapi ada banyak yang lain :) untuk dengan cepat menguji pola regex saya yang berkarat dan mencari tahu di mana saya salah dengan langkah-langkah regex debugger. Jika Anda belum "lancar" dalam Ekspresi Reguler, saya sarankan Anda mulai menggunakan situs yang membantu Anda menulis dan memvisualisasikannya seperti http://buildregex.com/ dan https://www.debuggex.com/

Anda juga dapat menggunakan menu konteks saat bekerja di panel Sumber. Saat melihat file, Anda dapat mengklik kanan di editor dan memilih Blackbox Script. Ini akan menambahkan file ke daftar di panel Pengaturan:

Solusi 2: Peristiwa Visual

Ini adalah alat yang sangat baik untuk memiliki :

Visual Event adalah bookmarklet Javascript open-source yang menyediakan informasi debug tentang peristiwa yang telah dilampirkan ke elemen DOM. Acara Visual menunjukkan:

• Elemen mana yang memiliki peristiwa yang menyertainya
• Jenis acara yang dilampirkan pada elemen
• Kode yang akan dijalankan dengan acara dipicu
• File sumber dan nomor baris untuk tempat fungsi terlampir ditentukan (browser Webkit dan Opera saja)

Solusi 3: Debugging

Anda dapat menjeda kode ketika Anda mengklik suatu tempat di halaman, atau ketika DOM dimodifikasi ... dan jenis-jenis JS breakpoint lainnya yang berguna untuk diketahui. Anda harus mendaftar blackboxing di sini untuk menghindari mimpi buruk.

Dalam hal ini, saya ingin tahu apa yang sebenarnya terjadi ketika saya mengklik tombol.

1. Buka Alat Bantu -> tab Sumber, dan di sebelah kanan temukan Event Listener Breakpoints:

   

2. Buka Mousedan pilihclick

3. Sekarang klik elemen (eksekusi harus berhenti sebentar), dan Anda sekarang men-debug kode. Anda dapat melalui semua penekanan kode F11(yang merupakan Langkah ). Atau kembali beberapa lompatan di tumpukan. Mungkin ada satu ton lompatan

Solusi 4: Memancing kata kunci

Dengan Dev Tools diaktifkan, Anda dapat mencari seluruh basis kode (semua kode di semua file) dengan ⌘+ ⌥+ Fatau:

dan mencari #envioatau apa pun tag / kelas / id yang Anda pikir memulai pesta dan Anda mungkin mendapatkan tempat yang lebih cepat daripada yang diantisipasi.

Berhati-hatilah kadang-kadang tidak hanya ada imgtetapi banyak elemen yang ditumpuk, dan Anda mungkin tidak tahu yang mana yang memicu kode.

Jika ini sedikit dari pengetahuan Anda, lihat tutorial Chrome tentang debugging .

Kedengarannya seperti bagian "... dan saya lompat baris demi baris ..." salah. Apakah Anda StepOver atau StepIn dan Anda yakin tidak secara tidak sengaja melewatkan panggilan yang relevan?

Yang mengatakan, kerangka kerja debug bisa membosankan untuk alasan ini. Untuk mengatasi masalah, Anda dapat mengaktifkan percobaan "Aktifkan dukungan debugging kerangka" . Selamat men-debug! :)

Anda dapat menggunakan findHandlersJS

Anda dapat menemukan pawang dengan melakukan di konsol chrome:

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

Anda akan mendapatkan informasi berikut dicetak di konsol chrome:

• element Elemen
  aktual tempat pengendali event terdaftar
• acara
  Array dengan informasi tentang penangan acara jquery untuk jenis acara yang menarik bagi kami (mis. klik, ubah, dll.)
• handler
  Metode event handler aktual yang dapat Anda lihat dengan mengklik kanan dan memilih Tampilkan definisi fungsi
• selector
  Selector yang disediakan untuk acara yang didelegasikan. Itu akan kosong untuk acara langsung.
• target
  Daftar dengan elemen-elemen yang ditargetkan oleh event handler ini. Misalnya, untuk pengendali acara yang didelegasikan yang terdaftar di objek dokumen dan menargetkan semua tombol di halaman, properti ini akan mencantumkan semua tombol di halaman. Anda dapat mengarahkannya dan melihatnya disorot dalam chrome.

Info lebih lanjut di sini dan Anda dapat mencobanya di situs contoh ini di sini .

Solusi ini membutuhkan metode data jQuery .

1. Buka konsol Chrome (meskipun browser apa pun yang memuat jQuery akan berfungsi)
2. Lari $._data($(".example").get(0), "events")
3. Telusuri output untuk menemukan pengendali event yang diinginkan.
4. Klik kanan pada "handler" dan pilih "Tampilkan definisi fungsi"
5. Kode akan ditampilkan di tab Sumber

$._data()hanya mengakses metode data jQuery. Alternatif yang lebih mudah dibaca jQuery._data().

Poin menarik dengan jawaban SO ini :

Pada jQuery 1.8, data acara tidak lagi tersedia dari "API publik" untuk data. Baca posting blog jQuery ini . Anda sekarang harus menggunakan ini sebagai gantinya:

jQuery._data( elem, "events" ); elem harus menjadi Elemen HTML, bukan objek jQuery, atau pemilih.

Harap dicatat, bahwa ini adalah struktur internal, 'pribadi', dan tidak boleh dimodifikasi. Gunakan ini hanya untuk keperluan debugging.

Di versi jQuery yang lebih lama, Anda mungkin harus menggunakan metode lama yaitu:

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

Versi jQuery agnostik akan menjadi: (jQuery._data || jQuery.data)(elem, 'events');