Chrome DevTools'ta bir öğeye tetiklenen etkinlikleri nasıl görüntülerim?

603

Bir kitaplıktaki bir sayfada özelleştirilebilir bir form öğesi var. Hangi olay işleyicisini kullanacağımı bulmaya çalıştığım için, etkileşime girdiğimde hangi javascript olaylarının tetiklendiğini görmek istiyorum.

Bunu Chrome Web Developer'ı kullanarak nasıl yapabilirim?

javascript google-chrome-devtools

— John Hoffman
kaynak

13

Bu yer imi yardımcı olabilir: sprymedia.co.uk/article/Visual+Event+2

— scytale

1

Bu sorunun cevabı değerli, ancak yukarıdaki yer işareti ^ benim problemimi çözen şeydi. sprymedia.co.uk/article/Visual+Event+2

— Jazzy

877

Hit F12açık Dev Araçlarına
Kaynaklar sekmesini tıklayın
Sağ tarafta, "Olay Dinleyici Kesme Noktaları" na ilerleyin ve ağacı genişletin
Dinlemek istediğiniz olayları tıklayın.
Hedef elemanla etkileşime geçin, ateş ederse hata ayıklayıcıda bir kırılma noktası elde edersiniz

Benzer şekilde, hedef öğeye sağ tıklayabilirsiniz -> "öğeyi denetle" yi seçebilir. Öğeye hangi olayların eklendiğini görmek için ağacı genişletin. Bu, köpürme ile işlenen etkinlikler için işe yarayıp yaramadığından emin değilim (tahmin etmiyorum)

— Mat
kaynak

11

kesme noktası akışı öldürdüğü için peşinde olduğunuz fare olayları ise bu çözüm bir sorundur

— WendyG 14:14

67

tüm olaylar umurumda değil minimize jquery işaret, nasıl bu jquery kullanan işleve nasıl ulaşabilirim.

— Muhammed Umer

14

Benim oluşturduğum özel etkinlikleri gösterebilir mi? Hayat değiştirdiğini okuduğumda ilk düşündüğüm şey buydu. Bir şey mi özledim?

— Tebe

24

@MuhammadUmer Chrome'un atlayıp doğrudan kaynak kodunuza gitmesi için jQuery'ye kara kutu ekleyebilirsiniz. developer.chrome.com/devtools/docs/blackboxing

— Matt Zeunert

1

@MuhammadUmer JQuery kullanmayı bırakırsanız ne olur?

— John Balvin Arias

831

MonitorEvents işlevini kullanabilirsiniz .

Öğenizi inceleyin ( right mouse click→ Inspectgörünür öğede veya ElementsChrome Geliştirici Araçları'ndaki sekmeye gidin ve istenen öğeyi seçin), sonra Consolesekmeye gidin ve yazın:

monitorEvents($0)

Şimdi fareyi bu öğenin üzerine getirdiğinizde, odakladığınızda veya tıkladığınızda, tetiklenen etkinliğin adı verileriyle birlikte görüntülenir.

Bu verileri almayı durdurmak için bunu konsola yazmanız yeterlidir:

unmonitorEvents($0)

$0yalnızca Chrome Geliştirici Araçları tarafından seçilen son DOM öğesidir. Oraya başka bir DOM nesnesi iletebilirsiniz (örneğin getElementByIdveya sonucunun sonucu querySelector).

İzlenen olayları önceden tanımlanmış bazı kümelere daraltmak için ikinci parametre olarak "type" olayını da belirtebilirsiniz. Örneğin:

monitorEvents(document.body, 'mouse')

Bu mevcut türlerin listesi burada .

Bu özelliğin nasıl çalıştığını gösteren küçük bir gif yaptım:

monitorEvents işlevinin kullanımı

— Mariusz Pawelski
kaynak

2

Kabul. Bu, belirli öğelerdeki olayları izlemenin ve izlemenin kesin yoludur .

— dmackerman

1

Ah evet anlıyorum. Beni fırlatan "tanımsız" dı ama şimdi aynı animasyonlu GIF'inizde aynı şeyi görüyorum. Teşekkürler.

— MSC

1

u gif yapmak için hangi aracı kullandın

— JerryGoyal

3

@MariuszPawelski Buradan nasıl devam edilir? Bunu yaptım ve ilgilendiğim etkinlik olan tıklama etkinliğini buldum. Ancak öğeyi tıkladığımda ne olduğunu nasıl bulabilirim? Ne tür bir kod yürütülür? Hangi özelliği MouseEventaramalıyım?

— Utku

3

ancak işleyiciyi nerede bulacağınız örn. tıklama işleyicisi.

— Şeyh Abdul Wahid

26

Görsel Etkinlik , bir öğenin olay işleyicilerini görüntülemek için kullanabileceğiniz hoş bir küçük yer imidir. Online demo burada görülebilir .

— tifkin
kaynak

22

JQuery (en azından sürüm 1.11.2) için aşağıdaki prosedür benim için çalıştı.

Öğeyi sağ tıklayın ve 'Chrome Geliştirici Araçları'nı açın
Tür $._data(($0), 'events');'Konsolundan' de
Eklenen nesneleri genişletin ve handler:değeri çift tıklayın .
Bu, eklenen işlevin kaynak kodunu gösterir, 'Ara' sekmesini kullanarak bunun bir kısmını arayın.

Ve tekerleği yeniden icat etmeyi bırakma ve vanilya JS olaylarını kullanmaya başlama zamanı ... :)

— Daniel Sokolowski
kaynak

15

Bu, bir jquery eklentisi olduğunda komut dosyanızın oluşturabileceği gibi özel etkinlikleri göstermez. Örneğin :

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

});

Chrome geliştirici araçlarındaki Komut Dosyaları altındaki Etkinlik Paneli size "Bir şey: özel etkinlik-one" göstermez

— airtonix
kaynak

21

Peki bu olayları nasıl bulur?

— Calydon