Cara menemukan kode apa yang dijalankan oleh tombol atau elemen di Chrome menggunakan Alat Pengembang


305

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:

masukkan deskripsi gambar di sini

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 .. .):

masukkan deskripsi gambar di sini

$(".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 .


4
Saya biasanya menggunakan Visual Eventbookmarklet. Ini mendeteksi peristiwa klik terikat oleh perpustakaan populer dan membuat overlay situs yang menunjukkan di mana peristiwa terikat dan memberikan sampel kode dan lokasi sumber untuk setiap peristiwa.
Kevin B

3
@DontVoteMeDown Tapi itu mengalahkan seluruh pertanyaan. Misalkan saya memiliki lusinan file * .js di situs web, bagaimana Anda tahu kode yang dipicu oleh tombol ada di dalam jquery2.js?
Carles Alcolea

1
Saya mengerti bagaimana Visual Event bekerja (terima kasih kepada Anda BTW) tetapi ketika Anda mengklik tombol itu, browser Anda tahu apa yang harus dijalankan , karena itu menjalankannya. Saya hanya ingin memastikan itu tidak bisa dilakukan dengan alat dev dan saya akan pindah.
Carles Alcolea

1
Pertanyaan bagus, saya pasti berpikir ini adalah fitur yang seharusnya dimiliki Chrome (atau Firefox)
tomysshadow

1
Jika Anda telah menemukan jawaban untuk pertanyaan ini, silakan tambahkan sebagai jawaban. Menjawab pertanyaan Anda sendiri sangat dianjurkan, tetapi menjawabnya dengan mengedit pertanyaan Anda tidak.
The Guy with The Hat

Jawaban:


209

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)
    Alat Dev Chrome -> tab Sumber -> Mouse -> Klik

2. Klik tombolnya!

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

Alat Chrome Dev menghentikan sementara eksekusi skrip (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

Penangan / fungsi event yang diinginkan


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.


Wow, Anda dan @ Alexander-Pavlov sepenuhnya benar, saya melewatkannya. Sekarang saya baru saja mencoba lagi dan butuh 132 F11 hit kunci! Sekarang masuk akal, tetapi itu tidak praktis. Saya akan memperbaiki pertanyaan saya.
Carles Alcolea

@CarlesAlcolea Yup - benar-benar tidak praktis, tetapi bukan tidak mungkin. Siapa pun dengan dedikasi dan waktu yang cukup di tangan mereka dapat menemukan apa pun yang dilakukan dalam HTML dan JavaScript, bahkan jika tersimpan dalam dan diperkecil. Jangan ragu untuk menandai jawaban Alexander Pavlov, atau jawaban saya, sebagaimana diterima.
Jesse

1
ya, saya baru saja selesai sekarang. FYI, jika Anda belum mengetahuinya, jika Anda mengklik tombol kurung kurawal kiri bawah ( i.imgur.com/ALoMQkR.png ) pada skrip yang diperkecil , itu akan "mempercantik" itu, dan akan bekerja saat debugging juga.
Carles Alcolea

Pada 2014 Chrome telah membangun fitur kotak hitam ke Alat Dev Chrome yang menghilangkan kebutuhan # 1 di atas.
Brian

1
@Brian dan di sini ada posting blog yang merinci skrip kotak hitam .
Cristian Diaconescu

157

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.

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

masukkan deskripsi gambar di sini

  1. Di sinilah Anda meletakkan pola RegEx dari file yang ingin diabaikan Chrome saat melakukan debugging. Misalnya: jquery\..*\.js(pola glob / terjemahan manusia :jquery.*.js )
  2. 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".
  3. 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:

masukkan deskripsi gambar di sini


Solusi 2: Peristiwa Visual

masukkan deskripsi gambar di sini

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:

    masukkan deskripsi gambar di sini

  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:

masukkan deskripsi gambar di sini

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 .


Tidak dapat menemukan kotak hitam di mana pun? Coba: chrome: // flags / # enable-devtools-experiment
ruuter

1
@CarlesAlcolea LUAR BIASA !! Anda baru saja menyelamatkan saya BANYAK waktu dengan trik ini!
Prix

Adakah yang tahu mengapa saat menjalankan acara visual, halaman akan menyegarkan sendiri, sehingga kehilangan semua info?
Edu Castrillon

Untuk solusi 1, Anda harus mengklik elips di sudut paling kanan untuk memiliki akses ke PENGATURAN PERANGKAT PENUH CHROME atau lebih tepatnya tekan F1 ketika DevTools terbuka. Sekarang Anda akan melihat BlackBoxing sebagai tab di sisi kiri. Nikmati!
pensebien

1
Sepertinya cara terbaik baru untuk skrip blackbox sangat mudah. Cukup buka file itu di panel Sumber dan klik kanan DI file (bukan PADA item daftar di sebelah kiri, sebenarnya buka file dan klik kanan DALAM file), lalu cukup pilih "Blackbox this script". Ini dia!
Dan

17

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! :)


Ini bekerja sempurna (dan Anda benar, saya merindukan yang melompat), saya akan menambahkannya ke pertanyaan saya. Itu juga memaksa saya untuk membaca kembali pola regex lagi: P Terima kasih.
Carles Alcolea

7

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 .


3

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');


2
Terima kasih telah memberikan lebih banyak ide. Ini adalah cara lain untuk melakukannya. Kelemahannya adalah itu membutuhkan jQuery dan judul pertanyaan ini meminta hanya mengandalkan alat Chrome. Saya akan mengedit jawaban Anda untuk menjelaskan bahwa ini adalah metode jQuery dan juga menggunakan sesuatu yang lebih masuk akal daripada "SOLUSI TERBAIK YANG PERNAH" :) Silakan lihat di stackoverflow.com/help/how-to-answer
Carles Alcolea
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.