Công cụ Chrome Dev: xem tất cả trình xử lý sự kiện được sử dụng trong trang

Question

Có tính năng trong công cụ chrome dev (hoặc bất kỳ tiện ích nào) mà tôi có thể xem tất cả trình xử lý sự kiện được sử dụng trên một trang/ứng dụng nhất định không.

Edit:
của nó chắc chắn không phải là một bản sao của câu hỏi này: How do I view events fired on an element in Chrome DevTools?

Các trên câu hỏi giải thích làm thế nào để tìm kiếm một sự kiện cụ thể mà bị sa thải khi chúng ta tương tác với ứng dụng của chúng tôi (Tôi biết làm thế nào để làm điều đó!).

gì Tôi đang tìm kiếm là Danh sách tất cả các sự kiện rằng chúng ta đang nghe trong ứng dụng và đó DOM yếu tố họ được gắn vào.

Answer 1

Chrome Dev-Tools không hiển thị đúng trình nghe sự kiện được thêm vào jQuery.

Thư viện này dường như để bù đắp này: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

Tìm xử lý sự kiện đăng ký sử dụng jQuery có thể được khôn lanh. findHandlersJS làm cho việc tìm kiếm chúng dễ dàng, tất cả những gì bạn cần là kiểu sự kiện và bộ chọn jQuery cho các phần tử mà các sự kiện có thể bắt nguồn.

Answer 2

Chrome Devtool không thể thực hiện việc này cho bạn. Nhưng bạn có thể kiểm tra những người trong giao diện điều khiển của bạn bằng chrome API cung cấp cho: getEventListeners

Chỉ cần đặt mã này trong giao diện điều khiển dev-công cụ của bạn, bạn có thể nhận được tất cả các ràng buộc số sự kiện nhấp chuột vào trang của bạn:

Array.from(document.querySelectorAll('*')) 
    .reduce(function(pre, dom){ 
    var clks = getEventListeners(dom).click; 
    pre += clks ? clks.length || 0 : 0; 
    return pre 
    }, 0) 

Kết quả như sau:

3249 

Đó là rất nhiều nhấp chuột có liên kết ở đó. Chắc chắn không phải là một ví dụ tốt về dự án cho hiệu suất.

Nếu bạn muốn xem những gì các sự kiện đã được ràng buộc trong tất cả các yếu tố của bạn trong trang của bạn và bao nhiêu trong số các thính giả của mỗi sự kiện, chỉ cần đặt các mã trong giao diện điều khiển dev-công cụ của bạn:

Array.from(document.querySelectorAll('*')) 
    .reduce(function(pre, dom){ 
    var evtObj = getEventListeners(dom) 
    Object.keys(evtObj).forEach(function (evt) { 
     if (typeof pre[evt] === 'undefined') { 
     pre[evt] = 0 
     } 
     pre[evt] += evtObj[evt].length 
    }) 
    return pre 
    }, {}) 

Kết quả giống như sau:

{ 
    touchstart: 6, 
    error: 2, 
    click: 3249, 
    longpress: 2997, 
    tap: 2997, 
    touchmove: 4, 
    touchend: 4, 
    touchcancel: 4, 
    load: 1 
} 

Và rất nhiều thông tin khác bạn có thể nhận được từ API này. Chỉ cần ứng biến.