Tìm kiếm trang web

Làm thế nào để gỡ lỗi các ràng buộc sự kiện JavaScript/jQuery bằng Firebug hoặc các công cụ tương tự?

Tôi cần gỡ lỗi một ứng dụng web sử dụng jQuery để thực hiện một số thao tác DOM khá phức tạp và lộn xộn. Vào một thời điểm nào đó, một số sự kiện đã được gán vào các phần tử cụ thể, không được kích hoạt và đơn giản là ngừng hoạt động.

Nếu tôi có khả năng chỉnh sửa mã nguồn của ứng dụng, tôi sẽ đào sâu và thêm một loạt các lệnh console.log() của Firebug và chú thích/bỏ chú thích các đoạn mã để cố gắng xác định vấn đề. Nhưng hãy giả sử tôi không thể chỉnh sửa mã của ứng dụng và cần phải làm việc hoàn toàn trong Firefox sử dụng Firebug hoặc các công cụ tương tự.

Firebug rất giỏi trong việc cho phép tôi điều hướng và thao tác với DOM. Tuy nhiên, cho đến nay, tôi vẫn chưa thể tìm ra cách để gỡ lỗi sự kiện với Firebug. Cụ thể, tôi chỉ muốn xem danh sách các trình xử lý sự kiện được gắn với một phần tử cụ thể tại một thời điểm nhất định (sử dụng điểm dừng JavaScript của Firebug để theo dõi các thay đổi). Nhưng có lẽ Firebug không có khả năng xem các sự kiện đã gắn, hoặc tôi quá ngốc để tìm ra nó. :-)

Có đề xuất hoặc ý tưởng nào không? Lý tưởng nhất, tôi chỉ muốn xem và chỉnh sửa các sự kiện gắn với các phần tử, tương tự như cách tôi có thể chỉnh sửa DOM hiện nay.

Câu trả lời #1

Xem cách tìm các trình lắng nghe sự kiện trên một nút DOM.

Tóm lại, giả sử tại một thời điểm nào đó một trình xử lý sự kiện được gắn vào phần tử của bạn (ví dụ): $ ('#foo').click(function() { console.log('clicked!') });

Bạn kiểm tra nó như sau:

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

Xem jQuery.fn.data (nơi jQuery lưu trữ trình xử lý của bạn bên trong).

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

Câu trả lời số 2

Có một bookmarklet hay gọi là Visual Event có thể hiển thị cho bạn tất cả các sự kiện gắn vào một phần tử. Nó có các điểm nhấn mã màu cho các loại sự kiện khác nhau (chuột, bàn phím, v.v.). Khi bạn di chuột qua chúng, nó hiển thị nội dung của trình xử lý sự kiện, cách nó được gắn, và số tệp/dòng (trên WebKit và Opera). Bạn cũng có thể kích hoạt sự kiện theo cách thủ công.

Nó không thể tìm thấy mọi sự kiện vì không có cách tiêu chuẩn để tra cứu các trình xử lý sự kiện được gắn với một phần tử, nhưng nó hoạt động với các thư viện phổ biến như jQuery, Prototype, MooTools, YUI, v.v.

Câu trả lời số 3

Bạn có thể sử dụng FireQuery. Nó hiển thị bất kỳ sự kiện nào gắn với các phần tử DOM trong tab HTML của Firebug. Nó cũng hiển thị bất kỳ dữ liệu nào gắn với các phần tử thông qua $.data.

Câu trả lời #4

Đây là một plugin có thể liệt kê tất cả các trình xử lý sự kiện cho bất kỳ phần tử/sự kiện nào:

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

Sử dụng nó như sau:

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

Nguồn: (blog của tôi) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

Câu trả lời số 5

Bảng điều khiển dành cho nhà phát triển WebKit (có trong Chrome, Safari, v.v.) cho phép bạn xem các sự kiện được gắn cho các phần tử.

Chi tiết hơn trong câu hỏi Stack Overflow này

Câu trả lời số 6

Sử dụng $._data(htmlElement, "events") trong jquery 1.7+

ví dụ :

$._data(document, "events") hoặc $._data($('.class_name').get(0), "events")

Bài viết liên quan