Làm thế nào để biết có bao nhiêu người nghe sự kiện có trên trang

Question

Tôi đang xây dựng một ứng dụng khá lớn trong Javascript. Đó là một trang duy nhất có thể thay đổi các chế độ xem khác nhau. Tất cả các chế độ xem đều có biến, sự kiện, người nghe, yếu tố riêng, v.v.

Khi làm việc với bộ sưu tập lớn và nhiều sự kiện đôi khi rất tốt để biết chính xác những gì đang diễn ra trên trang.

Tôi biết tất cả các trình duyệt đều có công cụ dành cho nhà phát triển, nhưng đôi khi rất khó để nhấp vào máng tất cả các yếu tố vv Và một số tùy chọn tôi không thể tìm thấy.

Một điều tôi quan tâm là biết có bao nhiêu sự kiện hiện đang được nghe trên trang. Bằng cách này tôi có thể xác nhận rằng tôi không tạo ra zombie.

Nếu sollution là công cụ nhà phát triển, vui lòng cho tôi biết vị trí cần tìm và phải làm gì. Và quan trọng nhất là trình duyệt nào nên chọn.

Answer 1

Nếu bạn đang sử dụng addEventListener (chứ không phải là onclick vv, thuộc tính), tôi có thể đề nghị hooking nó trong Chrome:

var listenerCount = 0; 
(function() { 
    var ael = Node.prototype.addEventListener; 
    Node.prototype.addEventListener = function() { 
     listenerCount++; 
     ael.apply(this, arguments); 
    } 
    var rel = Node.prototype.removeEventListener; 
    Node.prototype.removeEventListener = function() { 
     listenerCount--; 
     rel.apply(this, arguments); 
    } 
})(); 

Query giá trị của listenerCount trong debugger của bạn bất cứ lúc nào để xem bao nhiêu lần addEventListner đã được gọi.

N.B.: Mã này chỉ hoạt động trong Chrome vì các trình duyệt đều rất cụ thể về cách chúng xử lý các hàm DOM. Tôi đã đăng nó bởi vì bạn đã xác định rằng bạn không sao tự giới hạn mình vào một trình duyệt cụ thể cho nỗ lực gỡ lỗi này.

Answer 2

Bạn có thể theo dõi các sự kiện trong Công cụ dành cho nhà phát triển Chrome bằng chức năng monitorEvents. Xem http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents để biết tất cả chi tiết.

Answer 3

Chỉ cần sử dụng API getEventListeners để nhận tất cả thông tin của sự kiện. Xem liên kết này Chrome Dev Tools : view all event listeners used in the page

Nội dung của câu trả lời này:

Chrome Devtool không thể làm điều 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.