Geliştirici Araçlarını kullanarak Chrome'da bir düğme veya öğe tarafından hangi kodun çalıştırıldığını bulma

Chrome ve kendi web sitemi kullanıyorum.

İçeriden bildiklerim:

1) İnsanların bu turuncu resim butonuna tıklayarak kaydolduğu bir formum var:

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

3) Kaynak kodunun üst kısmında tonlarca kod kaynağı var. Düğmenin hangisini çağırdığını biliyorum çünkü onu ben kodladım: <script src="js/jquery2.js" type="text/javascript"></script>

4) Bu dosyanın içinde şunları bulabilirsiniz: $(".formSend").click(function() { ... }); düğmesi 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 chrome geliştirme araçlarını kullanarak bunu bulabilmektir.

Elemanın nereyi çağırdığını nasıl bulabilirim?

Dinleyiciler sekmesi benim için çalışmadı. Sonra tıklama olayı dinleyicilerine bakmayı denedim, bu bana güvenli bir bahis gibi geldi ama... orada jquery2.js yok (ve kodun hangi dosya olduğunu gerçekten bilmiyorum, bu yüzden tüm bunları kontrol etmek için zaman harcayacağım ...):

Benim $(".formSend").click(function() { ... }); fonksiyonum jquery2.js dosyası içinde yok.

Jesse nedenini açıklıyor:

"Son olarak, fonksiyonunuzun tıklama olayı işleyicisine doğrudan bağlı olmamasının nedeni, jQuery'nin bağlanan bir fonksiyon döndürmesidir. jQuery'nin fonksiyonu da bazı soyutlama katmanlarından ve kontrollerden geçer ve orada bir yerde fonksiyonunuzu çalıştırır."

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

Carles Alcolea
Edited question 2019ööp31öö1 Kasım 2019 в 1:31
Programlama
google-chrome javascript jquery google-chrome-devtools
2014ösp21ös12 Mayıs 2014 в 12:21
19 görünümler

Alexander Pavlov'un cevabı istediğinize en yakın olanı alır.

jQuery'nin soyutlama ve işlevselliğinin genişliği nedeniyle, olayın özüne ulaşmak için birçok çemberin atlanması gerekir. Çalışmayı göstermek için bu [jsFiddle](http://jsfiddle.net/PEw7W/1/)'ı kurdum.

1. Olay Dinleyicisi Kesme Noktasını Ayarlama

Bu sefer çok yaklaşmıştın.

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

2. Düğmeye tıklayın!

Chrome Dev Tools, komut dosyası yürütmeyi duraklatacak ve size küçültülmüş kodun bu güzel dolaşıklığını sunacaktır:

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

3. Muhteşem kodu bulun!

Şimdi, buradaki püf noktası, tuşa basarken kendinizi kaptırmamak ve gözünüzü ekrandan ayırmamaktır.

  1. İstenen kaynak kodu görünene kadar F11 tuşuna (Adım Girişi) basın
  2. Kaynak koduna nihayet ulaşıldı
  • Yukarıda verilen [jsFiddle](http://jsfiddle.net/PEw7W/1/) örneğinde, istenen olay işleyicisine/fonksiyona ulaşmadan önce F11 108 kez basmam gerekti
  • Olayları bağlamak için kullanılan jQuery sürümüne (veya çerçeve kütüphanesine) bağlı olarak kat edeceğiniz mesafe değişebilir
  • Yeterli özveri ve zamanla, herhangi bir olay işleyicisi/fonksiyonu bulabilirsiniz

4. Açıklama

JQuery'nin neden birçok soyutlama katmanından geçtiğine dair kesin bir cevabım ya da açıklamam yok - tek önerebileceğim, kullanımını kodu çalıştıran tarayıcıdan soyutlamak için yaptığı iş nedeniyle olduğudur.

İşte jQuery'nin hata ayıklama sürümünü (yani küçültülmemiş) içeren bir [jsFiddle](http://jsfiddle.net/PEw7W/). İ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...

Denemenizde "yürütme durakladığında ve satır satır atladığımda" bunu kaçırdığınızı düşünmemin nedeni, Step In yerine "Step Over" işlevini kullanmış olmanızdır. İşte farklılıkları açıklayan bir StackOverflow yanıtı.

Son olarak, işlevinizin doğrudan tıklama olayı işleyicisine bağlı olmamasının nedeni, jQuery'nin bağlanan bir işlev döndürmesidir. jQuery'nin işlevi de bazı soyutlama katmanlarından ve kontrollerden geçer ve bir yerde işlevinizi çalıştırır.

Community
Edited answer 2017ösp10ös12 Mayıs 2017 в 12:10
Yorumlar (9)

Görünüşe göre "...ve satır satır atlıyorum..." kısmı yanlış. StepOver mı yoksa StepIn mi yapıyorsunuz ve ilgili çağrıyı yanlışlıkla kaçırmadığınızdan emin misiniz?

Bununla birlikte, çerçevelerde hata ayıklama tam da bu nedenle sıkıcı olabilir. Sorunu hafifletmek için "Enable frameworks debugging support" deneyini etkinleştirebilirsiniz. Mutlu hata ayıklamalar! :)

Yorumlar (1)

[findHandlersJS](https://github.com/ruidfigueiredo/findHandlersJS) kullanabilirsiniz

İşleyiciyi chrome konsolunda yaparak bulabilirsiniz:

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

Aşağıdaki bilgileri chrome konsoluna yazdıracaksınız:

  • eleman Olay işleyicisinin kaydedildiği asıl öğe
  • olaylar İlgilendiğimiz olay türü için jquery olay işleyicileri hakkında bilgi içeren dizi (örn. tıklama, değiştirme, vb.)
  • işleyici Sağ tıklayıp İşlev tanımını göster'i seçerek görebileceğiniz gerçek olay işleyici yöntemi
  • seçici Temsilci olaylar için sağlanan seçici. Doğrudan olaylar için boş olacaktır.
  • hedefler Bu olay işleyicisinin hedeflediği öğeleri içeren liste. Örneğin, belge nesnesinde kayıtlı olan ve bir sayfadaki tüm düğmeleri hedefleyen bir temsilci olay işleyicisi için, bu özellik sayfadaki tüm düğmeleri listeler. Üzerlerine gelebilir ve kromla vurgulanmış olarak görebilirsiniz.

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

Rui
Edited answer 2014ööp55öö9 Mayıs 2014 в 9:55
Yorumlar (0)