Firebug veya benzer araçlarla JavaScript / jQuery olay bağlamaları nasıl ayıklanır?

Bazı oldukça karmaşık ve dağınık DOM manipülasyon yapmak için jQuery kullanan bir web uygulaması hata ayıklamak gerekiyor . Bir noktada, belirli unsurlara bağlı olan bazı olaylar işten atılmaz ve çalışmayı durdurur.

Uygulama kaynağını düzenleme yeteneğim olsaydı, detaya inerim ve sorunu saptamaya çalışmak için bir grup Firebug console.log() deyimi ve yorum / yorum kodu eklerdim. Ancak, uygulama kodunu düzenleyemediğimi ve Firebug veya benzeri araçları kullanarak tamamen Firefox'ta çalışmam gerektiğini varsayalım.

Firebug, DOM'da gezinmeme ve manipüle etmeme izin vermede çok iyi. Şimdiye kadar, Firebug ile olay hata ayıklamanın nasıl yapılacağını anlayamadım. Özellikle, belirli bir zamanda belirli bir öğeye bağlı olay işleyicilerinin listesini görmek istiyorum (değişiklikleri izlemek için Firebug JavaScript kesme noktalarını kullanarak). Ama ya Firebug'un bağlı olayları görme yeteneği yok ya da onu bulmak için çok aptalım. :-)

Herhangi bir öneriniz veya fikriniz var mı? İdeal olarak, bugün DOM'u nasıl düzenleyebileceğim gibi, öğelere bağlı olayları görmek ve düzenlemek istiyorum.

Bkz . DOM düğümünde olay dinleyicilerini bulma .

Özetle, bir noktada bir olay işleyicinin öğenize bağlı olduğunu varsayarsak (ör.): $('#foo').click(function() { console.log('clicked!') });

Bunu şöyle inceliyorsunuz:

• jQuery 1.3.x

  var clickEvents = $('#foo').data("events").click;
  jQuery.each(clickEvents, function(key, value) {
    console.log(value) // prints "function() { console.log('clicked!') }"
  })

• jQuery 1.4.x

  var clickEvents = $('#foo').data("events").click;
  jQuery.each(clickEvents, function(key, handlerObj) {
    console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
  })

Bkz. jQuery.fn.data(JQuery, işleyicinizi dahili olarak depolar).

• jQuery 1.8.x

  var clickEvents = $._data($('#foo')[0], "events").click;
  jQuery.each(clickEvents, function(key, handlerObj) {
    console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
  })

Bir öğeye eklenmiş tüm olayları gösterebilen Visual Event adlı güzel bir yer imi var . Farklı etkinlik türleri (fare, klavye, vb.) İçin renk kodlu vurgulara sahiptir. Fareyle üzerine geldiğinizde, olay işleyicinin gövdesini, nasıl eklendiğini ve dosya / satır numarasını (WebKit ve Opera'da) gösterir. Etkinliği manuel olarak da tetikleyebilirsiniz.

Her olayı bulamaz çünkü bir öğeye hangi olay işleyicilerin eklendiğini aramanın standart bir yolu yoktur, ancak jQuery, Prototype, MooTools, YUI, vb. Gibi popüler kitaplıklarla çalışır.

FireQuery kullanabilirsiniz . Firebug'un HTML sekmesinde DOM öğelerine eklenen tüm olayları gösterir. Ayrıca, öğelere eklenmiş verileri de gösterir $.data.

Aşağıda, belirli bir öğe / etkinlik için tüm olay işleyicileri listeleyebilen bir eklenti bulunmaktadır:

$.fn.listHandlers = function(events, outputFunction) {
    return this.each(function(i){
        var elem = this,
            dEvents = $(this).data('events');
        if (!dEvents) {return;}
        $.each(dEvents, function(name, handler){
            if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ')$' ,'i')).test(name)) {
               $.each(handler, function(i,handler){
                   outputFunction(elem, '\n' + i + ': [' + name + '] : ' + handler );
               });
           }
        });
    });
};

Şöyle kullanın:

// List all onclick handlers of all anchor elements:
$('a').listHandlers('onclick', console.info);

// List all handlers for all events of all elements:
$('*').listHandlers('*', console.info);

// Write a custom output function:
$('#whatever').listHandlers('click',function(element,data){
    $('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>');
});

Src: (blogum) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

WebKit Geliştirici Konsolu (Chrome, Safari vb. İçinde bulunur) öğeler için ekli etkinlikleri görüntülemenize olanak tanır.

Bu Yığın Taşması sorusunda daha fazla ayrıntı

kullanım $._data(htmlElement, "events") 1.7+ jquery;

örn:

$._data(document, "events") veya $._data($('.class_name').get(0), "events")

Bir iş arkadaşınızın önerdiği gibi, console.log> uyarısı:

var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, value) {
    console.log(value);
})

jQuery olayları aşağıdaki gibi saklar:

$("a#somefoo").data("events")

Bunu yapmak console.log($("a#somefoo").data("events"))o öğeye iliştirilmiş olayları listelemelidir.

En son Chrome'da (v29) DevTools'u kullanarak bu iki ipucunu hata ayıklama etkinlikleri için çok yararlı buluyorum:

1. Son seçilen DOM öğesinin jQuery olaylarını listeleme

   • Sayfadaki bir öğeyi inceleme
   • konsola aşağıdakileri yazın:

     $ ._ data ( 0 $ , "events") // jQuery 1.7+ varsayıldığında

   • İlişkili tüm jQuery olay nesnelerini listeleyecek, ilgili olayı genişletecek, "işleyici" özelliğinin fonksiyonunu sağ tıklayacak ve "Fonksiyon tanımını göster" i seçecektir. Belirtilen işlevi içeren dosyayı açar.

2. Yararlanma monitorEvents () komutu

FireBug ekibinin bir EventBug uzantısı üzerinde çalıştığı anlaşılıyor. FireBug - Events'e başka bir panel ekleyecek.

"Olaylar paneli, sayfadaki tüm olay işleyicilerini olay türüne göre gruplandırılmış olarak listeler. Her olay türü için dinleyicilerin bağlı olduğu öğeleri ve işlev kaynağının özetini görebilirsiniz." EventBug Yükseliyor

Her ne kadar şimdi ne zaman yayınlanacağını söyleyemezler.

Ayrıca krom deposunda jQuery Debugger buldum . Bir dom öğesini tıkladığınızda, geri arama işleviyle birlikte kendisine bağlı tüm olayları gösterecektir. Olayların düzgün bir şekilde kaldırılmadığı bir uygulamada hata ayıkladım ve bu da birkaç dakika içinde izlememe yardımcı oldu. Açıkçası bu krom için değil, firefox için değil.

ev öğelerin yanındaki simge

Firefox Geliştirici Araçları'nın Denetçi panelinde, bir öğeye bağlı tüm olaylar listelenir.

Önce Ctrl+ Shift+ ile bir öğe seçin C, örn. Stack Overflow'un yukarı ok.

evÖğenin sağındaki simgeye tıkladığınızda bir diyalog açılır:

Duraklat işaretine tıklayın ||İstediğiniz olay için sembolüne ve bu, işleyicinin satırındaki hata ayıklayıcıyı açar.

Artık satırın sol kenar boşluğunu tıklayarak hata ayıklayıcıda her zamanki gibi bir kesme noktası yerleştirebilirsiniz.

Bu, şu adreste belirtilmiştir: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

Ne yazık ki, bunun güzelleştirme ile güzelce oynaması için bir yol bulamadım, sadece küçültülmüş çizgide açılıyor gibi görünüyor: Firefox / Firebug'da Javascript ve CSS nasıl güzelleştirilir?

Firefox 42'de test edildi.

Bu konuya göre , Firebug'da bir DOM öğesindeki dinleyicilere hangi olayların eklendiğini görüntülemenin bir yolu yoktur.

Yapabileceğiniz en iyi şey, tj111'in önerdiği şeydir veya HTML görüntüleyicide öğeyi sağ tıklayıp "Günlük Olayları" nı tıklayabilirsiniz, böylece belirli bir DOM öğesi için hangi olayların tetiklendiğini görebilirsiniz. Bir olay ne olduğunu görmek için bunu yapabilir varsayalım olabilir belirli işlevleri kapalı ateş edilmesi.

Sürüm 2.0 ile Firebug , HTML panelinde seçili olan öğenin tüm olaylarını listeleyen bir Olaylar paneli tanıttı .

Ayrıca , Etkinlikler panelinin seçenekler menüsünden erişebileceğiniz Sarılmış Dinleyicileri Göster seçeneğinin işaretlenmesi durumunda jQuery olay bağlarına sarılmış olay dinleyicilerini de görüntüleyebilir .

Bu panelde, bir olay işleyicide hata ayıklamak için iş akışı aşağıdaki gibidir:

1. Hata ayıklamak istediğiniz olay dinleyicisine sahip öğeyi seçin
2. Etkinlikler yan panelinin içinde, ilgili olayın altındaki işlevi sağ tıklayın ve Kesme Noktasını Ayarla'yı seçin
3. Etkinliği tetikle

=> Komut dosyası yürütme, olay işleyici işlevinin ilk satırında durur ve hata ayıklama adım adım gerçekleştirebilirsiniz.

Firebug 2 artık DOM olaylarında hata ayıklama / denetleme içeriyor.