ब्राउज़र में कस्टम डीओएम घटनाओं को डीबग करना

Question

क्या ब्राउज़र में डीओएम तत्वों से निकाले जाने वाले कस्टम ईवेंट (डीबग) को देखना संभव है?

मान लें कि मैं देखना चाहता हूं कि बूटस्ट्रैप संकुचन का कौन सा विशिष्ट तत्व show.bs.collapse event को सक्रिय करता है, क्या मैं इसे क्रोम ड्यू टूल्स में उदाहरण के लिए देख सकता हूं?

Answer 1

सबसे पहले, Monitor Events सामान्य जेएस घटनाओं के लिए इसे संभाल लेंगे। हालांकि, बूटस्ट्रैप घटनाएं jQuery घटनाएं हैं, इसलिए वेनिला जेएस इवेंट श्रोताओं उनके लिए नहीं सुनते हैं। jQuery('body').bind("show.bs.collapse", function(e){console.log(e);});

बदलें जो कुछ भी घटना आप चाहते हैं के साथ "shown.bs.collapse": करने के लिए jQuery घटनाओं आपके कंसोल में निम्नलिखित कोड का टुकड़ा चलाने

सुनने के लिए। जब वे लॉग होते हैं, तो घटना के लिए लक्ष्य तत्व को जांचें ताकि यह पता चल सके कि इसे किसने निकाल दिया है।

अब, दूसरी तरफ देखने के लिए, को घटनाओं में सुनना क्या है। तत्व पैनल के भीतर, यदि आप ईवेंट श्रोता टैब पर जाते हैं और "पूर्वजों" को अनचेक करते हैं, तो आप केवल तत्व पर सीधे बाध्य ईवेंट श्रोताओं को देखेंगे। इस तरह आप जानते हैं कि घटना के लिए क्या सुन रहा है ताकि आप निरीक्षण कर सकें कि इसे निकाल दिए जाने पर क्या किया जाना चाहिए। यह महत्वपूर्ण है, क्योंकि आप पाते हैं कि 'बॉडी' घटना नहीं मिल रही है, क्योंकि यह बुलबुला रद्द हो सकता है। तो यदि उपर्युक्त स्निपेट काम नहीं कर रहा है, तो आपको घटना के लिए सुनने वाले तत्व में बबल रद्द करने की आवश्यकता है।

Answer 2

फ़ायरफ़ॉक्स बॉक्स से बाहर प्रदान करता है, jQuery की घटनाओं के लिए श्रोताओं, https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

लेकिन आप इसे विस्तार कर सकते हैं: http://flailingmonkey.com/view-jquery-and-jquery-live-events-in-firefox-devtools/

Answer 3

आप Visual Event 2 बुकमार्कलेट का उपयोग कर सकते हैं। ग्रेट टूल का निरीक्षण करने के लिए उपयोग किया जाता है कि कौन से ईवेंट विशिष्ट डीओएम तत्वों से जुड़े होते हैं।