पृष्ठ कैसे जानें

Question

मैं जावास्क्रिप्ट में काफी बड़ा एप्लिकेशन बना रहा हूं। यह एक ऐसा पृष्ठ है जो विभिन्न विचारों को बदल सकता है। सभी विचारों में उनके स्वयं के चर, घटनाएं, श्रोताओं, तत्व इत्यादि हैं।

बड़े संग्रह और कई घटनाओं के साथ काम करते समय कभी-कभी यह जानना अच्छा होता है कि पृष्ठ पर वास्तव में क्या हो रहा है।

मुझे पता है कि सभी ब्राउज़रों में डेवलपर टूल हैं, लेकिन कभी-कभी सभी तत्वों को गंदे क्लिक करना मुश्किल होता है और कुछ विकल्प मुझे नहीं मिलते हैं।

एक चीज़ जो मुझे रूचि है, यह जानना है कि वर्तमान में पृष्ठ पर कितनी घटनाएं सुनी गईं। इस तरह से मैं पुष्टि कर सकता हूं कि मैं लाश नहीं बना रहा हूं।

यदि सोल्शन एक डेवलपर टूल है, तो कृपया मुझे बताएं कि कहां देखना है और क्या करना है। और सबसे महत्वपूर्ण, कौन सा ब्राउज़र चुनना है।

Answer 1

आप (, onclick के बजाय, आदि विशेषताओं) का उपयोग कर रहे addEventListener, मैं क्रोम में यह hooking सुझाव दे सकता है:

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); 
    } 
})(); 

क्वेरी को देखने के लिए किसी भी समय अपने डीबगर में listenerCount का मूल्य कितनी बार addEventListner कहा गया है।

एनबी।: यह कोड केवल क्रोम में काम करता है, क्योंकि ब्राउज़र सभी डीओएम कार्यों को संभालने के तरीके के बारे में बहुत खास हैं। मैंने इसे पोस्ट कर दिया है क्योंकि आपने यह निर्दिष्ट किया है कि आप इस डिबगिंग प्रयास के लिए अपने आप को एक विशिष्ट ब्राउज़र पर सीमित कर रहे हैं।

Answer 2

आप मॉनिटर एवेन्ट्स फ़ंक्शन का उपयोग कर क्रोम डेवलपर टूल में ईवेंट की निगरानी कर सकते हैं। सभी विवरणों के लिए http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents देखें।

Answer 3

सभी घटनाओं की जानकारी प्राप्त करने के लिए बस API getEventListeners का उपयोग करें।

क्रोम devtool आप के लिए यह नहीं कर सकता: इस लिंक Chrome Dev Tools : view all event listeners used in the page

इस जवाब की सामग्री देखें। साथ एपीआई क्रोम देता है, लेकिन आप अपने कंसोल में उन लोगों का निरीक्षण कर सकते हैं: getEventListeners

बस अपने देव-उपकरण के कंसोल में इस कोड डाल, तो आप अपने पेज में सभी बंधन क्लिक ईवेंट नंबर प्राप्त कर सकते हैं:

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

नतीजा इस तरह है:

3249 

वह वहां बहुत सारे बाध्यकारी क्लिक था। निश्चित रूप से प्रदर्शन के लिए परियोजना का एक अच्छा उदाहरण नहीं है।

आप देखते हैं कि क्या घटनाओं अपने पृष्ठ में अपने सभी तत्वों और कैसे घटनाओं में से प्रत्येक के श्रोताओं के कई में बंधी हुई रही, बस अपने देव-उपकरण के कंसोल में इन कोड डाल चाहते हैं:

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 
    }, {}) 

नतीजा इस तरह है:

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

और इस एपीआई से आप कई अन्य जानकारी प्राप्त कर सकते हैं। बस सुधार करें।