क्या मैं डीओएम तत्व में सभी परिवर्तनों पर डीबगर के साथ तोड़ सकता हूं?

Question

मैं वास्तव में उस कोड को देखने में सक्षम होना चाहूंगा जो एक विशिष्ट DOM तत्व को प्रभावित कर रहा है।

लेकिन मुझे भी वास्तव में उन सभी संदर्भों/चयनकर्ताओं के लिए खोज करने वाले सभी जावास्क्रिप्ट को देखना नहीं पड़ेगा जो इस मुद्दे का कारण बन सकते हैं।

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

Answer 1

यह किसी भी स्क्रिप्ट लिखने के बिना भी संभव है फायरबग के साथ-साथ क्रोम के डेवलपर टूल (शायद अन्य, में आगे की जांच नहीं की गई) में।

Firebug में:

1. जाओ HTML टैब को
2. राइट-क्लिक करें एक तत्व आप पर नजर रखने के
3. चुनें "गुण बदलें ब्रेक ऑन", या "बाल जोड़ने या हटाने के ब्रेक ऑन करना चाहते हैं ", या" तत्व हटाने "

Chrome डेवलपर टूल में ब्रेक ऑन

1. जाओ तत्व टैब को
2. राइट-क्लिक करें एक तत्व आप
3. का चयन करें "ब्रेक पर ..." नजर रखने के लिए, फिर "सबट्री संशोधन", या "संशोधन विशेषता" चुनते हैं, या "नोड निकालना चाहते हैं तो"

मुझे वास्तव में 999 के स्वीकृत उत्तर की कोशिश करने के बाद यह पता चला, हालांकि कोड मेरे लिए काम नहीं करता था। इसके अतिरिक्त, क्रोम की किसी भी डोम उपट्री पर घटनाओं की निगरानी करने की संभावना वास्तव में अच्छी लगती है।

Answer 2

नोट: प्रश्न पूछे जाने पर नीचे दी गई घटनाएं बहुत अच्छी थीं, लेकिन अब वर्तमान नहीं हैं। की सिफारिश की वैकल्पिक MutationObservers है, लेकिन उन अभी भी परिपक्व हो रहे हैं

MutationObserver on MDN

---

(स्थापित Firefox में, Firebug के साथ) इस प्रयास करें:

function breakOnChange(el) { 

    if (!el.addEventListener) return; 

    el.addEventListener('DOMAttrModified', 
     function(DOMAttrModifiedEvent){debugger}, true); 

    el.addEventListener('DOMNodeInserted', 
     function(DOMNodeInsertedEvent){debugger}, true); 

    el.addEventListener('DOMNodeRemoved', 
     function(DOMNodeRemovedEvent){debugger}, true); 

} 

// Usage: 
breakOnChange(someDomNode);