วิธีการดีบักการผูกเหตุการณ์ JavaScript/jQuery ด้วย Firebug หรือเครื่องมือที่คล้ายกัน?

ฉันจำเป็นต้องดีบั๊กเว็บแอปพลิเคชันที่ใช้ jQuery เพื่อทำการจัดการ DOM ที่ค่อนข้างซับซ้อนและยุ่งเหยิง ในบางจุด เหตุการณ์บางอย่างที่ถูกผูกกับองค์ประกอบเฉพาะกลับไม่ถูกเรียกใช้งานและหยุดทำงานง่ายๆ

ถ้าฉันมีความสามารถในการแก้ไขซอร์สของแอปพลิเคชัน ฉันจะเจาะลึกเข้าไปและเพิ่มคำสั่ง console.log() ของ Firebug เป็นจำนวนมาก และคอมเมนต์/ยกเลิกคอมเมนต์โค้ดบางส่วนเพื่อพยายามระบุปัญหา แต่สมมติว่าฉันไม่สามารถแก้ไขโค้ดของแอปพลิเคชันได้และต้องทำงานทั้งหมดใน Firefox โดยใช้ Firebug หรือเครื่องมือที่คล้ายกัน

Firebug เก่งมากในการให้ฉันนำทางและจัดการ DOM ถึงตอนนี้ อย่างไรก็ตาม ฉันยังไม่สามารถหาวิธีทำการดีบักเหตุการณ์ด้วย Firebug ได้ โดยเฉพาะฉันแค่อยากเห็นรายการของตัวจัดการเหตุการณ์ที่ผูกกับองค์ประกอบใดองค์ประกอบหนึ่งในช่วงเวลาหนึ่ง (โดยใช้จุดหยุด JavaScript ของ Firebug เพื่อติดตามการเปลี่ยนแปลง) แต่ไม่ว่า Firebug จะไม่มีความสามารถในการเห็นเหตุการณ์ที่ถูกผูกไว้ หรือฉันโง่เกินกว่าจะหาเจอ :-)

มีข้อแนะนำหรือไอเดียอะไรบ้างไหม? โดยอุดมคติแล้ว ฉันแค่อยากเห็นและแก้ไขเหตุการณ์ที่ผูกกับองค์ประกอบ คล้ายกับวิธีที่ฉันสามารถแก้ไข DOM ได้ในวันนี้

คำตอบ #1

ดูวิธีการค้นหาผู้ฟังเหตุการณ์บนโหนด DOM

โดยสรุป หากสมมติว่าในบางจุดมีการแนบตัวจัดการเหตุการณ์กับองค์ประกอบของคุณ (เช่น): $ ('#foo').click(function() { console.log('clicked!') });

คุณตรวจสอบมันแบบนี้:

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

ดู jQuery.fn.data (ซึ่ง jQuery จัดเก็บตัวจัดการของคุณภายใน)

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

คำตอบ #2

มีบุ๊คมาร์กเล็ตที่ดีชื่อว่า Visual Event ที่สามารถแสดงเหตุการณ์ทั้งหมดที่เชื่อมโยงกับองค์ประกอบหนึ่ง ๆ ได้ มันมีการไฮไลต์ด้วยสีที่แตกต่างกันสำหรับประเภทของเหตุการณ์ต่าง ๆ (เมาส์, แป้นพิมพ์ เป็นต้น) เมื่อคุณเลื่อนเมาส์ไปเหนือมัน มันจะแสดงตัวเนื้อหาของ event handler วิธีที่มันถูกเชื่อม และไฟล์/หมายเลขบรรทัด (บน WebKit และ Opera) คุณยังสามารถทำให้เหตุการณ์ทำงานด้วยตัวเองได้ด้วย

มันไม่สามารถหาทุกเหตุการณ์ได้เพราะไม่มีวิธีมาตรฐานในการตรวจสอบว่าองค์ประกอบใดมีตัวจัดการเหตุการณ์ใดแนบอยู่ แต่สามารถใช้งานได้กับไลบรารียอดนิยมเช่น jQuery, Prototype, MooTools, YUI เป็นต้น

คำตอบ #3

คุณสามารถใช้ FireQuery ได้ มันจะแสดงเหตุการณ์ใด ๆ ที่แนบกับองค์ประกอบ DOM ในแท็บ HTML ของ Firebug นอกจากนี้ยังจะแสดงข้อมูลใด ๆ ที่แนบกับองค์ประกอบผ่าน $.data

คำตอบ #4

นี่คือปลั๊กอินที่สามารถแสดงรายการตัวจัดการเหตุการณ์ทั้งหมดสำหรับองค์ประกอบ/เหตุการณ์ที่กำหนดได้:

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

ใช้มันแบบนี้:

// 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>');
});

แหล่งที่มา: (บล็อกของฉัน) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

คำตอบ #5

คอนโซลนักพัฒนา WebKit (พบได้ใน Chrome, Safari เป็นต้น) ช่วยให้คุณดูอีเวนต์ที่แนบกับองค์ประกอบได้

รายละเอียดเพิ่มเติมในคำถามของ Stack Overflow นี้

คำตอบ #6

ใช้ $._data(htmlElement, "events") ใน jquery 1.7+

ตัวอย่าง :

$._data(document, "events") หรือ $._data($ ('.class_name').get(0), "events")