Chrome'u ve kendi web sitemi kullanıyorum.

İçeriden bildiklerim:

1 ) İnsanların bu turuncu görüntü düğmesini tıklayarak kaydolacağı bir formum var:

2 ) İnceliyorum ve hepsi bu: <img class="formSend" src="images/botoninscribirse2.png">

3 ) Kaynak kodun üstünde tonlarca kod kaynağı vardır. Düğmenin hangisini çağırdığını biliyorum çünkü kodladım:<script src="js/jquery2.js" type="text/javascript"></script>

4 ) Bu dosyada şunları bulabilirsiniz: $(".formSend").click(function() { ... });düğme tarafından tetiklenen şey (oldukça karmaşık bir form doğrulama ve gönderme yapmak için) ve istediğim şey , herhangi bir web sitesinde krom dev araçlarını kullanarak bunu bulabilmektir .

Elemanın nerede aradığını nasıl öğrenebilirim?

Dinleyiciler sekmesi benim için çalışmadı. Bu yüzden sonra bana güvenli bir bahis gibi görünen tıklama olay dinleyicilerini aramaya çalıştım ama ... orada hiç jquery2.jsyok (ve kodun hangi dosya olduğunu gerçekten bilemeyeceğim, bu yüzden tüm bunları kontrol ederek zaman kaybediyorum .. .):

Benim $(".formSend").click(function() { ... });içinde fonksiyon jquery2.jsdosyası yoktur.

Jesse açıklıyor neden :

"Son olarak, işlevinizin doğrudan tıklama olayı işleyicisine bağlı olmamasının nedeni, jQuery'nin bağlanan bir işlevi döndürmesidir. ."

Bazılarınızın önerdiği gibi, aşağıda bir cevapta çalışan yöntemleri topladım .

Alexander Pavlov'un cevabı istediğiniz şeye en yakın olanı.

JQuery'nin soyutlama ve işlevselliğinin yaygınlığı nedeniyle, etkinliğin etine ulaşmak için birçok çemberin atlanması gerekiyor. İşi göstermek için bu jsFiddle'ı kurdum .

1. Olay Dinleyici Kesme Noktasını Ayarlama

Bu konuda yakındınız.

1. Chrome Geliştirme Araçları'nı (F12) açın ve Kaynaklar sekmesine gidin.
2. Fare -> Tıklayın (yakınlaştırmak için tıklayın )
   
   

2. düğmesini tıklayın!

Chrome Geliştirme Araçları, komut dosyası yürütmeyi duraklatır ve size bu küçük kodun güzel dolaştırmasını sunar:

(yakınlaştırmak için tıklayın)

3. Görkemli kodu bulun!

Şimdi, buradaki hile , tuşa basarak taşınmamak ve ekranda bir göz tutmaktır.

1. F11İstediğiniz kaynak kodu görünene kadar tuşuna (Adım Adım) basın
2. Kaynak koda nihayet ulaşıldı
   • Yukarıda verilen jsFiddle örneğinde , istenen olay işleyiciye / işleve ulaşmadan önce F11 108 kez basmak zorunda kaldım
   • Kilometre süreniz, olayları bağlamak için kullanılan jQuery (veya çerçeve kitaplığı) sürümüne bağlı olarak değişebilir
   • Yeterli özveri ve zamanla, herhangi bir olay işleyiciyi / işlevi bulabilirsiniz

4. Açıklama

Tam cevap ya da neden jQuery yaptığı soyutlama birçok katmanları geçer açıklamasına sahip değil - tüm önerebileceğim iş kod kullanımı yürüten tarayıcıdan uzak soyut yapmak için yaptığı iş .

İşte jQuery hata ayıklama sürümü ile bir jsFiddle (yani, küçültülmüş değil). İlk (küçültülmemiş) kesme noktasındaki koda baktığınızda, kodun birçok şeyi işlediğini görebilirsiniz:

    // ...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...

" Yürütme duraklatılır ve satır satır atlarsam " denemenizde bunu kaçırdığınızı sanmamın nedeni, Adım Girme yerine "Adım Aşma" işlevini kullanmış olmanız olabilir. İşte farkları açıklayan bir StackOverflow cevabı .

Son olarak, işlev nedeni değil jQuery bağlı alır bir işlev döndürdüğü için doğrudan tıklama olay işleyicisi bağlı olduğunu. jQuery'nin işlevi sırayla bazı soyutlama katmanlarından ve kontrollerden geçer ve orada bir yerde işlevinizi yürütür.

1.Çözüm: Çerçeve kara kutulaması

Harika çalışıyor, minimal kurulum ve üçüncü taraflar yok.

Göre Chrome'un belgelerinde :

Bir komut dosyasını kara listeye aldığınızda ne olur?

Kütüphane kodundan atılan istisnalar duraklamaz ( İstisnalarda duraklat etkinse), Kütüphane koduna / dışına / adımına geçilmesi, Olay dinleyicisi kesme noktaları kütüphane kodunda kırılmaz, Hata ayıklayıcı, kütüphanede ayarlanan hiçbir kesme noktasında duraklamaz kodu. Sonuç olarak , üçüncü taraf kaynakları yerine uygulama kodunuzda hata ayıklayabilirsiniz .

1. Chrome Geliştirici Araçları'nı ( F12veya ⌘+ ⌥+ i) açın, ayarlara gidin (sağ üst veya F1). Solda " Blackboxing " adlı bir sekme bulun

2. Hata ayıklama sırasında Chrome'un yok saymasını istediğiniz dosyaların RegEx desenini buraya koyarsınız . Örneğin: jquery\..*\.js(Glob desen / insan için: jquery.*.js)
3. Birden çok desen içeren dosyaları atlamak isterseniz , boru karakterini kullanarak ekleyebilirsiniz |, örneğin: jquery\..*\.js|include\.postload\.js("veya bu desen" gibi davranır.) Veya "Ekle" düğmesiyle eklemeye devam edin.
4. Şimdi aşağıda açıklanan Çözüm 3'e geçin .

Bonus ipucu! Kullandığım Regex101 düzenli (ama diğerleri vardır:) hızla benim paslı regex desenleri sınamak ve ben adım-adım regex debugger ile yanılıyorum nerede olduğunu öğrenmek için. Düzenli İfadelerde henüz "akıcı" değilseniz, bunları http://buildregex.com/ ve https://www.debuggex.com/ gibi yazmanıza ve görselleştirmenize yardımcı olan siteleri kullanmaya başlamanızı öneririm.

Kaynaklar panelinde çalışırken bağlam menüsünü de kullanabilirsiniz. Bir dosyayı görüntülerken, düzenleyiciyi sağ tıklatıp Blackbox Komut Dosyası'nı seçebilirsiniz. Bu, dosyayı Ayarlar panelindeki listeye ekler:

Çözüm 2: Görsel Olay

Sahip olmak için mükemmel bir araç :

Visual Event, DOM öğelerine eklenmiş olaylar hakkında hata ayıklama bilgileri sağlayan açık kaynaklı bir Javascript yer imidir. Görsel Etkinlik şunları gösterir:

• Hangi öğelerin kendilerine eklenmiş olayları var
• Bir öğeye iliştirilen olayların türü
• Olayla çalıştırılacak kod tetiklenir
• Ekli işlevin tanımlandığı kaynak dosya ve satır numarası (yalnızca Webkit tarayıcıları ve Opera)

Çözüm 3: Hata Ayıklama

Sayfanın herhangi bir yerinde tıkladığınızda veya DOM değiştirildiğinde ... ve bilinmesi faydalı olacak diğer JS kesme noktalarında kodu duraklatabilirsiniz . Sen uygulanmalıdır blackboxing bir kabus önlemek için burada.

Bu örnekte, düğmeyi tıkladığımda tam olarak neler olduğunu bilmek istiyorum.

1. Geliştirici Araçları -> Kaynaklar sekmesini açın ve sağ taraftaki bul Event Listener Breakpoints:

   

2. Genişletin Mouseve seçinclick

3. Şimdi öğeyi tıklayın (yürütme duraklamalıdır) ve şimdi kodda hata ayıklama yapıyorsunuz. Tüm kod basma işleminden geçebilirsiniz F11( Adım gir ). Veya yığındaki birkaç zıplamayı geri alın. Bir ton sıçrama olabilir

Çözüm 4: Balıkçılık anahtar kelimeleri

Dev Araçları etkinken, kod tabanının tamamını (tüm dosyalardaki tüm kodlar) ⌘+ ⌥+ Fveya:

ve #enviopartiyi başlatır diye düşündüğünüz etiket / sınıf / kimlik ne olursa olsun ve beklenenden daha hızlı bir yere gidebilirsiniz.

Bazen sadece bir imgsürü öğe değil, aynı zamanda kodun hangisini tetiklediğini de bilmiyor olabilirsiniz.

Bu biraz sizin bilginiz dışındaysa, Chrome'un hata ayıklama ile ilgili eğitimine göz atın .

Kulağa "... ve satır satır atlıyorum ..." kısmı yanlış geliyor. StepOver veya StepIn kullanıyor musunuz ve ilgili aramayı yanlışlıkla kaçırmayacağınızdan emin misiniz?

Bununla birlikte, hata ayıklama çerçeveleri tam da bu nedenle sıkıcı olabilir. Sorunu hafifletmek için "Çerçeve hata ayıklama desteğini etkinleştir" denemesini etkinleştirebilirsiniz . Mutlu hata ayıklama! :)

FindHandlersJS'yi kullanabilirsiniz

İşleyiciyi krom konsolunda yaparak bulabilirsiniz:

findEventHandlers("click", "img.envio")

Chrome konsolunda aşağıdaki bilgileri yazdırırsınız:

• element
  Olay işleyicinin kayıtlı olduğu gerçek eleman
• events
  İlgilendiğimiz etkinlik türü için jquery olay işleyicileri hakkında bilgi içeren dizi (ör. tıklama, değiştirme vb.)
• handler
  Sağ tıklayarak ve İşlev tanımını göster'i seçerek görebileceğiniz gerçek olay işleyici yöntemi
• seçici
  Temsilci seçili etkinlikler için sağlanan seçici. Doğrudan etkinlikler için boş olacaktır.
• hedefler
  Bu olay işleyicinin hedeflediği öğelerle listele. Örneğin, belge nesnesine kaydedilen ve bir sayfadaki tüm düğmeleri hedefleyen yetkilendirilmiş bir olay işleyicisi için bu özellik sayfadaki tüm düğmeleri listeler. Bunları üzerine getirebilir ve kromda vurgulanmış olarak görebilirsiniz.

Daha fazla bilgi burada ve bu örnek sitedeki deneyebilirsiniz burada .

Bu çözüm için jQuery'nin veri yöntemine ihtiyaç vardır .

1. Chrome konsolunu açın (jQuery yüklü herhangi bir tarayıcı çalışmasına rağmen)
2. Çalıştırmak $._data($(".example").get(0), "events")
3. İstenen olay işleyiciyi bulmak için çıktıyı inceleyin.
4. "İşleyici" ye sağ tıklayın ve "İşlev tanımını göster" i seçin
5. Kod, Kaynaklar sekmesinde gösterilir

$._data()jQuery'nin veri yöntemine erişiyor. Daha okunabilir bir alternatif olabilir jQuery._data().

Bu SO cevabı ile ilginç bir nokta :

JQuery 1.8'den itibaren, olay verileri artık veriler için "genel API" da bulunmuyor. Bu jQuery blog gönderisini okuyun . Şimdi bunun yerine şunu kullanmalısınız:

jQuery._data( elem, "events" ); elem bir jQuery nesnesi veya seçici değil, bir HTML Öğesi olmalıdır.

Lütfen bunun dahili, 'özel' bir yapı olduğunu ve değiştirilmemesi gerektiğini unutmayın. Bunu yalnızca hata ayıklama amacıyla kullanın.

JQuery'nin daha eski sürümlerinde, şu eski yöntemi kullanmanız gerekebilir:

jQuery( elem ).data( "events" );

Agnostik bir jQuery sürümü: (jQuery._data || jQuery.data)(elem, 'events');