Bagaimana cara men-debug binding acara JavaScript / jQuery dengan Firebug atau alat serupa?

Saya perlu men-debug aplikasi web yang menggunakan jQuery untuk melakukan manipulasi DOM yang cukup rumit dan berantakan . Pada satu titik, beberapa peristiwa yang terikat pada elemen tertentu, tidak dipecat dan berhenti bekerja.

Jika saya memiliki kemampuan untuk mengedit sumber aplikasi, saya akan menelusuri dan menambahkan banyak pernyataan Firebug console.log() dan komentar / potongan tanda komentar kode untuk mencoba menunjukkan masalah. Tapi mari kita asumsikan saya tidak dapat mengedit kode aplikasi dan perlu bekerja sepenuhnya di Firefox menggunakan Firebug atau alat serupa.

Firebug sangat pandai membiarkan saya menavigasi dan memanipulasi DOM. Namun, sejauh ini, saya belum dapat menemukan cara melakukan debugging acara dengan Firebug. Secara khusus, saya hanya ingin melihat daftar penangan acara terikat ke elemen tertentu pada waktu tertentu (menggunakan Firebug JavaScript breakpoint untuk melacak perubahan). Tetapi Firebug tidak memiliki kemampuan untuk melihat peristiwa terikat, atau saya terlalu bodoh untuk menemukannya. :-)

Ada rekomendasi atau ide? Idealnya, saya hanya ingin melihat dan mengedit acara yang terikat pada elemen, sama seperti cara saya mengedit DOM hari ini.

Lihat Cara menemukan pendengar acara pada simpul DOM .

Singkatnya, dengan asumsi pada titik tertentu event handler melekat pada elemen Anda (misalnya): $('#foo').click(function() { console.log('clicked!') });

Anda memeriksanya seperti ini:

• 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!') }"
  })

Lihat jQuery.fn.data(di mana jQuery menyimpan penangan Anda secara internal).

• 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!') }"
  })

Ada bookmarklet bagus bernama Visual Event yang dapat menunjukkan semua acara yang dilampirkan pada elemen. Ini memiliki highlight kode warna untuk berbagai jenis acara (mouse, keyboard, dll.). Ketika Anda mengarahkan kursor pada mereka, itu menunjukkan tubuh pengendali acara, bagaimana itu dilampirkan, dan nomor file / baris (di WebKit dan Opera). Anda juga dapat memicu acara secara manual.

Itu tidak dapat menemukan setiap peristiwa karena tidak ada cara standar untuk mencari tahu apa yang dilampirkan oleh penangan acara ke suatu elemen, tetapi ia bekerja dengan perpustakaan populer seperti jQuery, Prototype, MooTools, YUI, dll.

Anda bisa menggunakan FireQuery . Ini menunjukkan setiap peristiwa yang dilampirkan ke elemen DOM di tab HTML Firebug. Ini juga menunjukkan data apa pun yang dilampirkan ke elemen melalui $.data.

Berikut adalah plugin yang dapat mencantumkan semua penangan acara untuk setiap elemen / acara yang diberikan:

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

Gunakan seperti ini:

// 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: (blog saya) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

Konsol Pengembang WebKit (ditemukan di Chrome, Safari, dll.) Memungkinkan Anda melihat acara yang dilampirkan untuk elemen.

Lebih detail dalam pertanyaan Stack Overflow ini

Gunakan $._data(htmlElement, "events")di jquery 1.7+;

ex:

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

Seperti yang disarankan kolega, console.log> lansiran:

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

jQuery menyimpan acara sebagai berikut:

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

Melakukan console.log($("a#somefoo").data("events"))harus daftar acara yang dilampirkan ke elemen itu.

Menggunakan DevTools di Chrome terbaru (v29) saya menemukan dua tips ini sangat membantu untuk debugging acara:

1. Membuat daftar acara jQuery dari elemen DOM yang dipilih terakhir

   • Periksa elemen pada halaman
   • ketikkan yang berikut ini di konsol:

     $ ._ data ( $ 0 , "events") // dengan asumsi jQuery 1.7+

   • Ini akan mencantumkan semua objek acara jQuery yang terkait dengannya, memperluas acara yang tertarik, klik kanan pada fungsi properti "handler" dan pilih "Tampilkan definisi fungsi". Ini akan membuka file yang berisi fungsi yang ditentukan.

2. Memanfaatkan perintah monitorEvents ()

Sepertinya kru FireBug sedang mengerjakan ekstensi EventBug. Ini akan menambahkan panel lain ke FireBug - Acara.

"Panel acara akan mencantumkan semua penangan acara pada halaman yang dikelompokkan berdasarkan jenis acara. Untuk setiap jenis acara, Anda dapat membuka untuk melihat elemen yang terikat oleh pendengar dan ringkasan sumber fungsi." EventBug Meningkat

Meskipun mereka tidak bisa mengatakan sekarang kapan akan dirilis.

Saya juga menemukan jQuery Debugger di toko chrome. Anda dapat mengklik item dom dan itu akan menunjukkan semua peristiwa terikat padanya bersama dengan fungsi panggilan balik. Saya sedang debug aplikasi di mana acara tidak dihapus dengan benar dan ini membantu saya melacaknya dalam hitungan menit. Jelas ini untuk chrome, bukan firefox.

ev ikon di sebelah elemen

Di dalam panel Inspektur Alat Pengembang Firefox berisi daftar semua peristiwa yang terikat pada suatu elemen.

Pertama pilih elemen dengan Ctrl+ Shift+ C, mis. Panah upvote Stack Overflow.

Klik evikon di sebelah kanan elemen, dan dialog terbuka:

Klik pada ||simbol tanda jeda untuk acara yang Anda inginkan, dan ini membuka debugger pada baris pawang.

Anda sekarang dapat menempatkan breakpoint di sana seperti biasa di debugger, dengan mengklik margin kiri garis.

Ini disebutkan di: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

Sayangnya, saya tidak dapat menemukan cara untuk ini bermain dengan baik dengan prettyfication, sepertinya terbuka di baris yang diperkecil: Bagaimana cara mempercantik Javascript dan CSS di Firefox / Firebug?

Diuji pada Firefox 42.

Menurut utas ini , tidak ada cara di Firebug untuk melihat acara apa yang dilampirkan pada pendengar pada elemen DOM.

Tampaknya yang terbaik yang dapat Anda lakukan adalah apa yang disarankan oleh tj111, atau Anda dapat mengklik kanan elemen di penampil HTML, dan klik "Log Acara" sehingga Anda dapat melihat acara mana yang sedang menembakkan untuk elemen DOM tertentu. Saya kira orang bisa melakukan itu untuk melihat peristiwa apa yang bisa memicu fungsi tertentu.

Dengan versi 2.0 Firebug memperkenalkan panel Acara , yang mencantumkan semua peristiwa untuk elemen yang saat ini dipilih dalam panel HTML .

Ini juga dapat menampilkan pendengar acara yang terbungkus dalam jQuery binding acara jika opsi Show Wrapped Listeners dicentang, yang dapat Anda jangkau melalui menu opsi panel Acara .

Dengan panel itu alur kerja untuk men-debug event handler adalah sebagai berikut:

1. Pilih elemen dengan pendengar acara yang ingin Anda debug
2. Di dalam panel samping Acara klik kanan fungsi di bawah acara terkait dan pilih Tetapkan Titik Breakpoint
3. Pemicu acara

=> Eksekusi skrip akan berhenti pada baris pertama dari fungsi event handler dan Anda dapat men-debug-nya.

Firebug 2 sekarang menggabungkan debugging / inspeksi acara DOM.