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


609

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.

Jawaban:


355

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

21
FYI: Ini tidak akan menampilkan acara yang tidak dilampirkan dengan jQuery
Juan Mendes

10
Sepenuhnya setuju tentang console.log (), namun harus dilindungi dengan sesuatu seperti if (window.console)seandainya ada dalam kode (jauh lebih mudah dilakukan daripada dengan waspada ()) dan merusak IE.
thepeer

14
@thepeer Secara pribadi saya lebih suka melakukan pemeriksaan untuk konsol pada awal file, dan jika tidak ada buat objek dummy.
Andrew

Di bawah ini adalah cuplikan yang serupa untuk men-debug semua peristiwa (mohon alasan tidak memformat):$('#foo').click(function(event) { var events = $(this).data('events'); $.each(events, function(event, handlers) { $.each(handlers, function(key, handlerObj) { console.log("--------------------------------------"); console.log(event+"["+key+"] | "+handlerObj.handler) ; }); });
Corey O.

3
@ BrainSlugs83: lihat jawaban tertaut di jawaban ini. (tl; dr: Anda tidak bisa).
Crescent Fresh

162

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.


8
Perhatikan bahwa karena ini berjalan dalam JavaScript konten, ia mendapatkan datanya dengan meminta pustaka JavaScript. Jadi itu hanya akan menampilkan acara yang ditambahkan dengan perpustakaan yang didukung (yang mencakup jQuery).
Matthew Flaschen

41

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.


1
Plugin itu memiliki 1 kelemahan besar: Ketika Anda melakukan debug, dan Anda ingin memeriksa nilai variabel yang berisi koleksi jquery, Anda tidak dapat memeriksa nilai ketika kode Anda dijeda. Ini bukan penyebabnya dengan pembakar. Alasan saya mencopotnya. sendirian
Maarten Kieft

1
FireQuery sepertinya tidak lagi menampilkan acara terlampir :(
Matty J

26

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/



11

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

ex:

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


8

Seperti yang disarankan kolega, console.log> lansiran:

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

6

jQuery menyimpan acara sebagai berikut:

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

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


5

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 ()


4

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.


2
Fitur ini dirilis dan dimasukkan ke FireBug 2.0.1. Sekarang ketika Anda memeriksa elemen HTML pada halaman, ada panel "Acara" baru di mana Anda dapat melihat acara terlampir dan penangannya.
derloopkat

4

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.


4

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:

tooltip acara

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.


Sayangnya ini tidak berfungsi dengan baik untuk menemukan pendengar yang diwarisi.
chukko

3

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.


2

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

* Acara * panel samping di Firebug

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.


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.