40

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

अधिकांश घटनाएं jQuery का उपयोग करके बाध्य हैं। इसलिए, यह विशेष रूप से उपयोगी होगा अगर विशेष रूप से उन घटनाओं की निगरानी करने का कोई तरीका था।

उत्तर

51

बेशक आप Firebug, कंसोल और स्क्रिप्ट टैब के साथ ठीक कर सकते हैं जहां आप ब्रेकपॉइंट्स और घड़ियों को जोड़ सकते हैं, लेकिन आप इसे बेहतर/आसान समझना चाहते हैं।

EventBug नामक एक साफ फायरबग प्लगइन है जो सभी घटनाओं को लॉग करता है और उन्हें ईवेंट प्रकार से समूहित करता है ताकि आप विस्तार कर सकें और देख सकें कि उन्हें किस प्रकार ट्रिगर किया गया है।

EventBug Screenshot

EventBug यह वास्तविक समय ऐसा नहीं करता है, तो आप हालांकि ताज़ा करने के लिए की है।

फ़ायरबग में किसी भी DOM तत्व के विरुद्ध 'लॉग इवेंट्स' सुविधा का उपयोग करने का एक और तरीका है। यह रीयलटाइम करता है और आप देख सकते हैं कि ऑर्डर ईवेंट कैसे निकाल दिए जाते हैं/ट्रिगर भी होते हैं।

इस प्रयास करें:

    • टॉगल खुला Firebug सही HTML टैब में तत्व क्लिक करें, यदि आप संदर्भ मेनू से Log Events चुनें तो सही <body>
    • क्लिक करें सभी घटनाओं को देखना चाहते हैं
    • सुनिश्चित करें कि कंसोल टैब सक्षम है
    • कंसोल टैब में 'पर्सिस्ट' मोड को सक्षम करने के लिए क्लिक करें (अन्यथा कंसोल टैब पृष्ठ को पुनः लोड होने के बाद साफ़ कर देगा)
    • आपको Closed (मैन्युअल रूप से)
    • वोला चुनना पड़ सकता है! घड़ी की घटनाओं सांत्वना टैब

    में धारा यह है कि क्या आप के लिए लॉग घटनाक्रम के साथ देखें:

    enter image description here

    भी कोशिश कर रहा लायक FireQuery ऐड-ऑन Firebug के लिए क्या डोम में तत्वों jQuery देखने के लिए उनसे जुड़ी घटनाएं और वे क्या हैं।

    और जैसा कि बेन्वी के उत्तर का उल्लेख है, यह वेबकिट के डेवलपर टूल में भी संभव है।

  • +0

    नहीं करता है, तो आप एक समाधान के ऊपर ले जाना है और आप पता नहीं है क्या घटना बग का कारण बनता है। – gsharp

    +0

    @gsharp क्या आप प्रोफाइलिंग का उपयोग नहीं कर सकते हैं, बग को समझने के लिए कंसोल और ब्रेकपॉइंट्स पर लॉगिंग कर सकते हैं? क्या यह कंसोल में कोई त्रुटि प्रदान करता है? जेएस डीबगिंग में फायरबग काफी पसंद है। – dakdad

    +0

    मैं पहले से ही फायरबग के साथ काम कर रहा हूं। बस एक उपकरण की इच्छा है जो मुझे दिखाता है कि किस क्रम में किस घटना को निकाल दिया गया है। वास्तव में मैं इसे लॉगिंग और ब्रेकपॉइंट्स के साथ कर सकता हूं, लेकिन यदि * .js सुपर है और आप अभी तक कोड के साथ familar नहीं हैं, तो यह बहुत मदद कर सकता है। – gsharp

    4

    यह फ़ायरबग में विश्वास नहीं है मेरा विश्वास है, और अंतर्निहित समस्या का समर्थन एपीआई स्तर पर समर्थन या एक्सपोजर की कमी है। Element.prototype.addEventListener (और window.addEventListener और document.addEventListener और XMLHttpRequest.addEventListener और कुछ अन्य) एक तरफ 'onevent' गुण जो नमूदार और interceptable हैं से: वैकल्पिक रूप से, डोम घटनाओं की सदस्यता के लिए केवल कुछ तरीके हैं।

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

    enter image description here

    https://developers.google.com/chrome-developer-tools/docs/elements

    +1

    स्पष्ट करने के लिए, प्रत्येक देव उपकरण में इसकी ताकत है। उदाहरण के लिए, फ़ायरबग, विरासत गुणों के साथ-साथ एक्सेसर मानों को गुणों के रूप में दिखाने के लिए समर्थन करता है, और इन सेटिंग्स में से कुछ को नियंत्रित करने वाली सेटिंग्स हैं। दूसरी तरफ, वेबकिट डीबगर, विरासत गुण दिखाने या उनके मूल्य पर एक्सेसर्स को हल करने के लिए बिल्कुल कोई विकल्प नहीं है। जब तक आप अपने खुद के कस्टम कार्यों के साथ ऑब्जेक्ट .getOwnProperty [नाम | वर्णनकर्ता] ओवरराइटिंग गिनती नहीं करते हैं। –

    +0

    ऊपर मेरा अद्यतन उत्तर देखें। फ़ायरफ़ॉक्स/फ़ायरबग आपको ऐसा करने की अनुमति देता है। –

    +1

    इसके अलावा मैं एक और चीज लेता हूं जिसे मैंने वापस कहा था। मुझे किसी चीज के बारे में पता नहीं है यानी देव उपकरण एक्सेल पर जाएं .. –

    7

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

    Firefox events inspector

    और जानकारी: http://flailingmonkey.com/view-dom-events-in-firefox-developer-tools/

    +1

    यह अच्छा है, लेकिन मुझे "देखने" की क्या ज़रूरत है, यह घटना किस प्रकार ट्रिगर हुई है। क्या यह भी संभव है? – gsharp

    +1

    यह सुविधा फ़ायरफ़ॉक्स से शुरू हुई बंडल 33: https://hacks.mozilla.org/2014/07/event-listeners-popup-media-sidebar-cubic-bezier-editor-more-firefox-developer-tools-episode-33/फ़ायरफ़ॉक्स 34 वास्तविक इवेंट कोड पर jQuery रैपर को हल करने में सक्षम है: https://hacks.mozilla.org/2014/09/webide-storage-inspector-jquery-events-iframe-switcher-more-firefox-developer-tools-episode -34 / – gavenkoa

    संबंधित मुद्दे

     संबंधित मुद्दे