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?

javascript google-chrome-devtools

— John Hoffman
sumber

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

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)

— Mat
sumber

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 click→ Inspectpada 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

— Mariusz Pawelski
sumber

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 .

— tifkin
sumber

22

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

Klik kanan pada elemen dan buka 'Alat Pengembang Chrome'
Ketik $._data(($0), 'events');'Konsol'
Buka objek terlampir dan klik dua kali handler:nilainya.
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 ... :)

— Daniel Sokolowski
sumber

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"

— airtonix
sumber

21

Lalu bagaimana, apakah seseorang menemukan peristiwa itu?

— Calydon