Làm cách nào để gỡ lỗi các ràng buộc sự kiện JavaScript / jQuery với Fireorms 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 . Tại một thời điểm, một số sự kiện bị ràng buộc với các yếu tố cụ thể, không được kích hoạt và chỉ đơn giản là ngừng hoạt động.

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

Fireorms 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 thực hiện gỡ lỗi sự kiện với Fireorms. Cụ thể, tôi chỉ muốn xem danh sách các trình xử lý sự kiện được liên kết với một phần tử cụ thể tại một thời điểm nhất định (sử dụng các điểm dừng JavaScript của Fireorms để theo dõi các thay đổi). Nhưng một trong hai Firebird không có khả năng nhìn thấy các sự kiện bị ràng buộc hoặc tôi quá ngu ngốc để tìm thấy nó. :-)

Bất kỳ khuyến nghị hoặc ý tưởng? Lý tưởng nhất, tôi chỉ muốn xem và chỉnh sửa các sự kiện bị ràng buộc với các yếu tố, tương tự như cách tôi có thể chỉnh sửa DOM ngày hôm nay.

Xem Cách tìm trình lắng nghe sự kiện trên 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ư vậy:

• 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 trong nội bộ).

• 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ó một bookmarklet đẹp gọi là Sự kiện Trực quan có thể hiển thị cho bạn tất cả các sự kiện được đính kèm với một yếu tố. Nó có các điểm nổi bật được mã hóa 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ó sẽ hiển thị phần thân của trình xử lý sự kiện, cách nó được đính kèm và số tệp / dòng (trên WebKit và Opera). Bạn cũng có thể kích hoạt sự kiện bằng tay.

Nó không thể tìm thấy mọi sự kiện vì không có cách chuẩn nào để tra cứu trình xử lý sự kiện nào được gắn vào 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.

Bạn có thể sử dụng FireQuery . Nó hiển thị bất kỳ sự kiện nào được đính kèm với các thành phần DOM trong tab HTML của Fireorms. Nó cũng hiển thị bất kỳ dữ liệu gắn liền với các yếu tố thông qua $.data.

Đâ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ỳ yếu tố / sự kiện cụ thể 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ư thế này:

// 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 của tôi) -> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

Bảng điều khiển dành cho nhà phát triển WebKit (được tìm thấy trong Chrome, Safari, v.v.) cho phép bạn xem các sự kiện được đính kèm cho các yếu tố.

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

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

Ví dụ:

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

Như một đồng nghiệp đã đề xuất, console.log> alert:

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

jQuery lưu trữ các sự kiện sau:

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

Làm một console.log($("a#somefoo").data("events"))danh sách nên liệt kê các sự kiện gắn liền với yếu tố đó.

Sử dụng DevTools trong Chrome mới nhất (v29) Tôi thấy hai mẹo này rất hữu ích để gỡ lỗi các sự kiện:

1. Liệt kê các sự kiện jQuery của phần tử DOM được chọn cuối cùng

   • Kiểm tra một yếu tố trên trang
   • gõ như sau trong giao diện điều khiển:

     $ ._ data ( $ 0 , "event") // giả sử jQuery 1.7+

   • Nó sẽ liệt kê tất cả các đối tượng sự kiện jQuery được liên kết với nó, mở rộng sự kiện quan tâm, nhấp chuột phải vào chức năng của thuộc tính "handler" và chọn "Hiển thị định nghĩa hàm". Nó sẽ mở tập tin chứa chức năng được chỉ định.

2. Sử dụng lệnh MonitorEvents ()

Có vẻ như đội ngũ FireBug đang làm việc trên một phần mở rộng EventBug. Nó sẽ thêm một bảng điều khiển khác vào FireBug - Sự kiện.

"Bảng điều khiển sự kiện sẽ liệt kê tất cả các trình xử lý sự kiện trên trang được nhóm theo loại sự kiện. Đối với mỗi loại sự kiện, bạn có thể mở ra để xem các yếu tố mà người nghe bị ràng buộc và tóm tắt nguồn chức năng." Sự kiện tăng

Mặc dù họ không thể nói ngay bây giờ khi nó sẽ được phát hành.

Tôi cũng tìm thấy jQuery Debugger trong cửa hàng chrome. Bạn có thể nhấp vào một mục dom và nó sẽ hiển thị tất cả các sự kiện ràng buộc với nó cùng với chức năng gọi lại. Tôi đã gỡ lỗi một ứng dụng trong đó các sự kiện không được gỡ bỏ đúng cách và điều này giúp tôi theo dõi nó trong vài phút. Rõ ràng đây là cho chrome, không phải firefox.

ev biểu tượng bên cạnh các yếu tố

Trong bảng Trình kiểm tra của Công cụ dành cho nhà phát triển Firefox liệt kê tất cả các sự kiện được liên kết với một phần tử.

Đầu tiên, chọn một phần tử có Ctrl+ Shift+ C, ví dụ như mũi tên upvote của Stack Overflow.

Nhấp vào evbiểu tượng ở bên phải của thành phần và một đoạn hội thoại sẽ mở ra:

Nhấp vào ||biểu tượng dấu hiệu tạm dừng cho sự kiện bạn muốn và điều này sẽ mở trình gỡ lỗi trên dòng của trình xử lý.

Bây giờ bạn có thể đặt một điểm dừng ở đó như bình thường trong trình gỡ lỗi, bằng cách nhấp vào lề trái của dòng.

Điều này được đề cập tại: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listener

Thật không may, tôi không thể tìm ra cách nào để chơi trò này một cách độc đáo với tính năng khá hay, nó dường như chỉ mở ở dòng rút gọn: Làm thế nào để làm đẹp Javascript và CSS trong Firefox / Fireorms?

Đã thử nghiệm trên Firefox 42.

Theo chủ đề này , không có cách nào trong Fireorms để xem những sự kiện nào được đính kèm với người nghe trên một phần tử DOM.

Có vẻ như điều tốt nhất bạn có thể làm là những gì tj111 gợi ý hoặc bạn có thể nhấp chuột phải vào phần tử trong trình xem HTML và nhấp vào "Nhật ký sự kiện" để bạn có thể xem sự kiện nào đang kích hoạt cho một phần tử DOM cụ thể. Tôi cho rằng người ta có thể làm điều đó để xem những sự kiện nào có thể bắn ra các chức năng cụ thể.

Với phiên bản 2.0, Fireorms đã giới thiệu bảng Sự kiện , liệt kê tất cả các sự kiện cho thành phần hiện được chọn trong bảng HTML .

Nó cũng có thể hiển thị các trình lắng nghe sự kiện được gói trong các ràng buộc sự kiện jQuery trong trường hợp tùy chọn Hiển thị Trình nghe được bao bọc được chọn , mà bạn có thể tiếp cận thông qua menu tùy chọn của bảng Sự kiện .

Với bảng điều khiển đó, quy trình làm việc để gỡ lỗi một trình xử lý sự kiện như sau:

1. Chọn thành phần có trình nghe sự kiện bạn muốn gỡ lỗi
2. Bên trong bảng điều khiển bên Sự kiện , nhấp chuột phải vào chức năng trong sự kiện liên quan và chọn Đặt điểm dừng
3. Kích hoạt sự kiện

=> Việc thực thi tập lệnh sẽ dừng ở dòng đầu tiên của hàm xử lý sự kiện và bạn có thể bước gỡ lỗi nó.

Fireorms 2 hiện đã kết hợp gỡ lỗi / kiểm tra các sự kiện DOM.