Bagaimana cara melihat acara yang dipecat pada suatu elemen di Chrome DevTools?


603

Saya memiliki elemen formulir yang dapat disesuaikan pada halaman dari perpustakaan. Saya ingin melihat peristiwa javascript apa yang dipicu ketika saya berinteraksi dengannya karena saya mencoba mencari tahu event handler mana yang akan digunakan.

Bagaimana saya melakukannya menggunakan Pengembang Web Chrome?


13
Bookmarklet ini dapat membantu: sprymedia.co.uk/article/Visual+Event+2
scytale

1
Jawabannya di sini sangat berharga, tetapi bookmarklet di atas ^ sebenarnya yang memecahkan masalah saya. sprymedia.co.uk/article/Visual+Event+2
Jazzy

Jawaban:


878
  • Tekan F12untuk membuka Dev Tools
  • Klik tab Sumber
  • Di sisi kanan, gulir ke bawah ke "Breakpoint Pendengar Acara", dan rentangkan pohon
  • Klik pada acara yang ingin Anda dengarkan.
  • Berinteraksi dengan elemen target, jika mereka menembak Anda akan mendapatkan break point di debugger

Demikian pula, Anda dapat mengklik kanan pada elemen target -> pilih "inspect element" Gulir ke bawah di sisi kanan bingkai dev, di bagian bawah adalah 'pendengar acara'. Rentangkan pohon untuk melihat acara apa yang dilampirkan ke elemen. Tidak yakin apakah ini berfungsi untuk acara yang ditangani melalui gelembung (saya kira tidak)


11
solusi ini merupakan masalah jika itu adalah peristiwa mouse yang Anda kejar, karena breakpoint membunuh arus
WendyG

67
bagaimana jika semua acara menunjuk ke jquery yang diperkecil, saya tidak peduli, bagaimana cara saya mencapai fungsi yang menggunakan jquery itu.
Muhammad Umer

14
Bisakah itu menampilkan acara khusus yang saya buat? Ketika saya membaca bahwa itu mengubah hidup itu adalah hal pertama yang saya pikirkan. Apakah saya melewatkan sesuatu?
Tebe

24
@MuhammadUmer Anda dapat blackbox jQuery sehingga Chrome akan melewatkannya dan langsung ke kode sumber Anda. developer.chrome.com/devtools/docs/blackboxing
Matt Zeunert

1
@MuhammadUmer bagaimana jika Anda hanya berhenti menggunakan JQuery?
John Balvin Arias

831

Anda dapat menggunakan fungsi monitorEvents .

Cukup periksa elemen Anda ( right mouse clickInspectpada elemen yang terlihat atau buka Elementstab di Alat Pengembang Chrome dan pilih elemen yang diinginkan) lalu buka Consoletab dan tulis:

monitorEvents($0)

Sekarang ketika Anda memindahkan mouse ke elemen ini, fokus atau klik, nama peristiwa yang dipecat akan ditampilkan dengan datanya.

Untuk berhenti mendapatkan data ini, cukup tulis ini ke konsol:

unmonitorEvents($0)

$0hanyalah elemen DOM terakhir yang dipilih oleh Alat Pengembang Chrome. Anda dapat melewati objek DOM lain di sana (misalnya hasil getElementByIdatau querySelector).

Anda juga dapat menentukan "tipe" acara sebagai parameter kedua untuk mempersempit acara yang dipantau ke beberapa set yang telah ditentukan. Sebagai contoh:

monitorEvents(document.body, 'mouse')

Daftar jenis yang tersedia ini ada di sini .

Saya membuat gif kecil yang menggambarkan cara kerja fitur ini:

penggunaan fungsi monitorEvents


2
Sepakat. Ini adalah cara defacto untuk memantau dan melacak peristiwa pada elemen tertentu .
dmackerman

1
Ah ya begitu. Itu adalah "tidak terdefinisi" yang telah mengusir saya, tetapi saya sekarang melihat Anda memiliki hal yang sama dalam GIF animasi membantu Anda. Terima kasih.
MSC

1
alat mana yang kamu gunakan untuk membuat gif
JerryGoyal

3
@MariuszPawelski Bagaimana melanjutkan dari sini? Saya melakukan ini dan menemukan acara klik, yang merupakan acara yang saya minati. Tetapi bagaimana saya menemukan apa yang terjadi ketika saya mengklik elemen? Kode apa yang dieksekusi? Properti manakah yang MouseEventharus saya cari?
Utku

3
tetapi di mana menemukan handler misalnya klik handler.
Sheikh Abdul Wahid

26

Acara Visual adalah bookmarklet kecil yang bagus yang dapat Anda gunakan untuk melihat penangan acara elemen. Demo online dapat dilihat di sini .


22

Untuk jQuery (setidaknya versi 1.11.2) prosedur berikut ini berfungsi untuk saya.

  1. Klik kanan pada elemen dan buka 'Alat Pengembang Chrome'
  2. Ketik $._data(($0), 'events');'Konsol'
  3. Buka objek terlampir dan klik dua kali handler:nilainya.
  4. Ini menunjukkan kode sumber fungsi terlampir, cari bagian yang menggunakan tab 'Cari'.

Dan inilah saatnya untuk berhenti menciptakan kembali roda dan mulai menggunakan acara vanilla JS ... :)

bagaimana-untuk-menemukan-jquery-klik-penangan-fungsi


15

Ini tidak akan menampilkan acara khusus seperti yang mungkin dibuat skrip Anda jika itu adalah plugin jquery. sebagai contoh :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

Panel Acara di bawah Skrip dalam alat pengembang krom tidak akan menampilkan "Sesuatu: custom-event-one"


21
Lalu bagaimana, apakah seseorang menemukan peristiwa itu?
Calydon
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.