วิธีแก้ปัญหาการเชื่อมเหตุการณ์ JavaScript / jQuery ด้วย Firebug หรือเครื่องมือที่คล้ายกัน

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

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

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

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

ดูวิธีการหาฟังเหตุการณ์บนโหนด 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!') }"
  })

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

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

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

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

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

Src: (บล็อกของฉัน) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

WebKit Developer Console (พบได้ใน Chrome, Safari, ฯลฯ ) ให้คุณดูกิจกรรมที่แนบมาสำหรับองค์ประกอบต่างๆ

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

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

อดีต:

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

ตามคำแนะนำของเพื่อนร่วมงาน console.log> การแจ้งเตือน:

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

jQuery เก็บเหตุการณ์ต่าง ๆ ดังต่อไปนี้:

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

console.log($("a#somefoo").data("events"))ควรทำรายการเหตุการณ์ที่แนบมากับองค์ประกอบนั้น

การใช้ DevTools ใน Chrome ล่าสุด (v29) ฉันพบว่าสองเคล็ดลับเหล่านี้มีประโยชน์มากสำหรับการดีบักเหตุการณ์:

1. การแสดงรายการ jQuery ขององค์ประกอบ DOM ที่เลือกล่าสุด

   • ตรวจสอบองค์ประกอบบนหน้า
   • พิมพ์สิ่งต่อไปนี้ในคอนโซล:

     $ ._ data ( $ 0 , "events") // สมมติว่า jQuery 1.7+

   • มันจะแสดงรายการวัตถุเหตุการณ์ jQuery ทั้งหมดที่เกี่ยวข้องขยายเหตุการณ์ที่สนใจคลิกขวาที่ฟังก์ชั่นของคุณสมบัติ "ตัวจัดการ" และเลือก "แสดงฟังก์ชั่นการกำหนด" มันจะเปิดไฟล์ที่มีฟังก์ชั่นที่ระบุ

2. การใช้คำสั่งmonitorEvents ()

ดูเหมือนว่าลูกเรือ FireBug กำลังทำงานบนส่วนขยาย EventBug มันจะเพิ่มแผงอื่นให้กับ FireBug - กิจกรรม

"พาเนลเหตุการณ์จะแสดงรายการตัวจัดการเหตุการณ์ทั้งหมดบนเพจที่จัดกลุ่มตามประเภทเหตุการณ์สำหรับแต่ละประเภทเหตุการณ์คุณสามารถเปิดขึ้นเพื่อดูองค์ประกอบที่ผู้ฟังจะผูกไว้กับและสรุปแหล่งที่มาของฟังก์ชัน" EventBug Rising

แม้ว่าพวกเขาจะไม่สามารถพูดได้ในขณะนี้เมื่อมันจะถูกปล่อยออกมา

ฉันยังพบjQuery Debuggerในร้านโครเมี่ยม คุณสามารถคลิกที่รายการ dom และมันจะแสดงกิจกรรมทั้งหมดที่ถูกผูกไว้กับมันพร้อมกับฟังก์ชั่นการโทรกลับ ฉันกำลังดีบักแอปพลิเคชันที่กิจกรรมไม่ได้ถูกลบอย่างถูกต้องและสิ่งนี้ช่วยให้ฉันติดตามมันในไม่กี่นาที เห็นได้ชัดว่านี่เป็นโครเมียม แต่ไม่ใช่ Firefox

ev ไอคอนถัดจากองค์ประกอบ

ภายใน Firefox ผู้พัฒนาเครื่องมือตรวจสอบรายชื่อแผงเหตุการณ์ทั้งหมดถูกผูกไว้กับองค์ประกอบ

ขั้นแรกให้เลือกองค์ประกอบที่มีCtrl+ Shift+ Cเช่นลูกศร upvote ของ Stack Overflow

คลิกที่evไอคอนทางด้านขวาขององค์ประกอบและบทสนทนาจะเปิดขึ้น:

คลิกที่||สัญลักษณ์เครื่องหมายหยุดชั่วคราวสำหรับเหตุการณ์ที่คุณต้องการและนี่จะเป็นการเปิดตัวดีบั๊กบนบรรทัดของตัวจัดการ

ตอนนี้คุณสามารถวางเบรกพอยต์ที่นั่นตามปกติในโปรแกรมดีบั๊กโดยคลิกที่ขอบด้านซ้ายของบรรทัด

สิ่งนี้ถูกกล่าวถึงที่: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

น่าเสียดายที่ฉันไม่สามารถหาวิธีที่จะเล่นอย่างสวยหรูได้ด้วยมันดูเหมือนว่าจะเปิดที่บรรทัดย่อ: จะทำให้ Javascript และ CSS ใน Firefox / Firebug สวยงามได้อย่างไร?

ทดสอบกับ Firefox 42

ตามหัวข้อนี้ไม่มีวิธีใดใน Firebug ที่จะดูว่าเหตุการณ์ใดที่แนบมากับผู้ฟังในองค์ประกอบ DOM

ดูเหมือนว่าสิ่งที่ดีที่สุดที่คุณสามารถทำได้คือสิ่งที่ tj111 แนะนำหรือคุณสามารถคลิกขวาที่องค์ประกอบในมุมมอง HTML แล้วคลิก "บันทึกเหตุการณ์" เพื่อให้คุณสามารถดูว่าเหตุการณ์ใดบ้างที่กำลังยิงสำหรับองค์ประกอบ DOM เฉพาะ ฉันคิดว่าจะทำอย่างนั้นได้เพื่อดูว่าเหตุการณ์ใดที่จะสามารถปิดฟังก์ชั่นบางอย่างได้

ด้วยเวอร์ชัน 2.0 Firebug แนะนำแผงเหตุการณ์ซึ่งแสดงรายการกิจกรรมทั้งหมดสำหรับองค์ประกอบที่เลือกในแผงHTMLปัจจุบัน

นอกจากนี้ยังสามารถแสดงฟังเหตุการณ์ห่อเป็น jQuery ผูกเหตุการณ์ในกรณีที่ตัวเลือกในการแสดงฟังห่อมีการตรวจสอบซึ่งคุณสามารถเข้าถึงได้ผ่านทางกิจกรรมเมนูตัวเลือกแผง

ด้วยพาเนลนั้นเวิร์กโฟลว์เพื่อดีบักตัวจัดการเหตุการณ์มีดังนี้:

1. เลือกองค์ประกอบที่มีฟังเหตุการณ์ที่คุณต้องการแก้ปัญหา
2. ภายในแผงด้านข้างเหตุการณ์คลิกขวาที่ฟังก์ชันภายใต้เหตุการณ์ที่เกี่ยวข้องและเลือกตั้งจุดพัก
3. ทริกเกอร์เหตุการณ์

=> การประมวลผลสคริปต์จะหยุดที่บรรทัดแรกของฟังก์ชั่นตัวจัดการเหตุการณ์และคุณสามารถขั้นตอนการดีบักได้

Firebug 2จะรวมการดีบัก / ตรวจสอบเหตุการณ์ DOM