क्या यह पता लगाने का कोई आसान तरीका है कि जेएस कोड एक डीओएम तत्व का उपयोग किया जाता है?

Question

मैं एक वेबसाइट देख रहा था और कुछ दिलचस्प देखा: एक डोम तत्व जो एक दिलचस्प तरीके से एनिमेटेड था। मैं यह जानना चाहता था कि यह कैसे किया गया था इसलिए मैंने स्रोत कोड में खोदना शुरू कर दिया। यह मुझे कोड के टुकड़े को ट्रैक करने के लिए उम्र ले गया जो ऐसा किया।

किसी को भी 'ट्रैक' एक डोम तत्व तो तुम क्या कोड यह चालाकी से किया जा रहा है द्वारा पता लगा सकते हैं की सॉर्ट करने के लिए एक तरह से पता है?

Answer 1

Chrome में, आप डोम ब्रेकप्वाइंट जोड़ सकते हैं। आप अधिक गहराई से स्पष्टीकरण here पा सकते हैं।

संक्षेप में, आप उस तत्व तत्व का चयन करें जिसे आप तत्व पैनल में देखना चाहते हैं और आप Break On... ->Subtree Modifications का चयन करें। जब DOM तत्व संरचना बदलता है, तो आपको जेएस कोड की ओर इशारा किया जाएगा जो ऐसा करता है।

हालांकि, यदि आप विशेष रूप से जेएस कोड के बाद एनिमेशन करते हैं, जो तत्व के केवल सीएसएस को बदल सकता है, और जहां तक ​​मुझे पता है, तो उस पर तोड़ने का कोई तरीका नहीं है।

दूसरी ओर, क्रोम भी आप break on JavaScript events कि ब्राउज़र में होने दे में बहुत लचीला है। jfrej suggested के रूप में, आप देख सकते हैं कि कौन सी कार्रवाई एनीमेशन को ट्रिगर करती है और उस पर तोड़ती है।

आप ब्रेकपॉइंट को उसी तत्व मेनू (Break On...) से Attributes modification पर सेट कर सकते हैं और यह सीएसएस परिवर्तनों को भी तोड़ देगा। टिप्पणियों में सुझाव के लिए Bergi के लिए धन्यवाद। simple example here का प्रयास किया।

Answer 2

ज्यादातर मामलों में, जावास्क्रिप्ट HTML संरचना को संशोधित करने या सीएसएस लागू करने के लिए किसी प्रकार का चयनकर्ता का उपयोग करने की जरूरत है। सोचें कि चयनकर्ता क्या हो सकता है - यह आमतौर पर आईडी या कक्षा है।

फ़ायरबग एकाधिक फ़ाइलों में एक खोज कर सकता है - बस स्क्रिप्ट टैब पर जाएं, खोज क्षेत्र में फ़ोकस करें और एकाधिक फ़ाइलें देखें। इस तरह आप कोड का टुकड़ा ढूंढने में सक्षम होना चाहिए जो DOM तत्व को लक्षित कर रहा है।

वैकल्पिक रूप से, अगर एनीमेशन एक घटना से शुरू हो रहा है, इस तरह के एक माउस क्लिक के रूप में, यदि आप Chrome की डेवलपर टूल टैब है, जो एक ही तरीके से काम करेंगे के रूप में डोम ब्रेकप्वाइंट वर्णित स्रोत के अंतर्गत घटना श्रोता ब्रेकप्वाइंट जोड़ने के लिए उपयोग कर सकते हैं Alex द्वारा।