Chrome'u kullanarak bir öğeye hangi etkinliklerin bağlı olduğunu bulma

Sayfamda bir bağlantım olduğunu varsayalım:

<a href="#" id="foo">Click Here</a>

Başka bir şey bilmiyorum, ama bağlantıya tıkladığımda bir alert("bar")görüntülenir. Yani bir yerde, bazı kodların bağlı olduğunu biliyorum #foo.

alert("bar")Click olayına bağlanan kodu nasıl bulabilirim ? Chrome ile bir çözüm arıyorum.

Ps .: Örnek kurgusal, bu yüzden "XXXXXX kullanın ve" uyarı (\ "bar \") "için tüm projeyi aramak gibi bir çözüm aramıyorum. Gerçek bir hata ayıklama / izleme çözümü istiyorum.

Kullanılması Krom 15.0.865.0 dev . Elements panelinde bir "Etkinlik Dinleyicileri" bölümü vardır:

Ve Komut Dosyaları panelinde bir "Olay Dinleyici Kesme Noktaları". Fare -> kesme noktasını tıklayın ve ardından kullanıcı alanı işlevinin olayı nasıl işlediğini görmek için arama yığını üzerinde tutarak "bir sonraki işlev çağrısına geçin" İdeal olarak, jQuery'nin küçültülmüş sürümünü değiştirilmemiş bir sürümle değiştirirsiniz, böylece her zaman adım atmanız gerekmez ve mümkün olduğunda adım atmanız gerekir.

Ekli etkinlikleri aşağıdaki gibi başka bir şekilde bulmak için Chrome'un denetçisini de kullanabilirsiniz:

1. İncelemek için öğeye sağ tıklayın veya 'Öğeler' bölmesinde bulun.
2. Ardından 'Etkinlik Dinleyicileri' sekmesinde / bölmesinde etkinliği genişletin (örneğin 'tıklama')
3. İstediğiniz birini bulmak için çeşitli alt düğümleri genişletin ve ardından 'işleyici' alt düğümünün nerede olduğunu arayın.
4. 'İşlev' kelimesini sağ tıklayın ve ardından 'İşlev tanımını göster'i tıklayın

Bu sizi, aşağıdaki resimde gösterildiği gibi işleyicinin tanımlandığı yere götürür ve Paul Irish tarafından burada açıklanır: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

Yükledikten sonra jQuery Denetim uzantısını ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ) deneyin :

1. Elemanı inceleyin
2. Yeni ' jQuery Denetimi hakkında ' sekmesinde Events özelliğini genişletin
3. İhtiyacınız olan Etkinlik için seçin
4. İşleyici özelliğinden sağ işlevi üzerinde tıklayın ve 'seçeneğini göster işlevi tanımı '
5. Şimdi Etkinlik bağlama kodunu göreceksiniz
6. Kodun daha okunabilir bir görünümü için ' Güzel baskı ' düğmesine tıklayın

(2020 itibariyle en son) Chrome Sürüm 83.0.4103.61 sürümü için :

1. İncelemek istediğiniz öğeyi seçin

2. Etkinlik Dinleyicileri sekmesini seçin

3. Jquery işlevi yerine gerçek javascript dosyasını göstermek için Framework dinleyicilerini kontrol ettiğinizden emin olun.

Düzenleme : kendi cevabım yerine, bu oldukça mükemmel: Firebug (veya benzer bir araç) ile JavaScript / jQuery olay bağlamaları hata ayıklama

Google Chromes geliştirici araçlarının komut dosyaları bölümünde yerleşik bir arama işlevi vardır

Bu araca aşina değilseniz: (her ihtimale karşı)

• sayfanın herhangi bir yerine sağ tıklayın (kromda)
• 'Öğeyi Denetle'yi tıklayın
• 'Komut Dosyaları' sekmesini tıklayın
• Sağ üstteki arama çubuğu

#ID için hızlı bir arama yapmanız sizi sonunda ciltleme işlevine götürmelidir.

Örn: aramak #foosizi

$('#foo').click(function(){ alert('bar'); })

2018 Güncellemesi - Gelecekteki okuyucular için yardımcı olabilir:

Bunun başlangıçta Chrome'da ne zaman tanıtıldığından emin değilim. Ancak, Chrome'da şimdi yapılabilecek başka bir (kolay) yol, konsol komutlarıdır.

Örneğin: ( krom konsol türünde )

getEventListeners($0)

Oysa DOM'da $ 0 seçilen öğedir.

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4

findEventHandlers bir jquery eklentisidir, ham kod burada: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

adımlar

1. Ham kodu doğrudan krom konsoluna yapıştırın (not: jquery önceden yüklenmiş olmalıdır)

2. Aşağıdaki işlev çağrısını kullanın: findEventHandlers(eventType, selector);
   karşılık gelen seçicinin belirtilen öğenin eventType işleyicisini bulmak için.

Örnek :

findEventHandlers("click", "#clickThis");

Sonra, varsa, mevcut olay işleyicisi feryat gösterecektir, işleyiciyi bulmak için genişletmeniz, işlevi sağ tıklamanız ve show function definition

Bkz. Https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

Chrome Sürüm 52.0.2743.116 için:

1. Chrome'un Geliştirici Araçları'nda, Ctrl+ Shift+ düğmesine basarak 'Ara' panelini açın F.

2. Bulmaya çalıştığınız öğenin adını yazın.

Bağlı öğelerin sonuçları panelde görünmeli ve içinde bulundukları dosyayı belirtmelidir.