मैं Chrome DevTools में किसी तत्व पर की गई घटनाओं को कैसे देख सकता हूँ?

Question

मेरे पास एक पुस्तकालय से एक पृष्ठ पर अनुकूलन योग्य तत्व है। मैं देखना चाहता हूं कि जब मैं इसके साथ बातचीत करता हूं तो जावास्क्रिप्ट घटनाओं को निकाल दिया जाता है क्योंकि मैं यह जानने की कोशिश कर रहा हूं कि किस इवेंट हैंडलर का उपयोग करना है।

मैं Chrome वेब डेवलपर का उपयोग कैसे करूं?

Comments

यह बुकमार्क मददगार हो सकता है: sprymedia.co.uk/article/Visual+Event+2

— scytale

यहाँ जवाब मूल्यवान है, लेकिन ^ ऊपर दिए गए बुकमार्कलेट वास्तव में मेरी समस्या का हल है। sprymedia.co.uk/article/Visual+Event+2

— जैज़ी

Answer 1

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

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

Comments

यह समाधान एक समस्या है अगर यह माउस की घटनाओं के बाद आप कर रहे हैं, के रूप में ब्रेकप्वाइंट प्रवाह को मारता है

— WendyG

क्या होगा अगर सभी घटनाएँ मिनिफ़ाई किए गए jquery की ओर इशारा करती हैं, मुझे इसकी परवाह नहीं है, मैं उस फ़ंक्शन तक कैसे पहुँचूँ जो उस jquery का उपयोग करता है।

— मुहम्मद उमर

क्या यह कस्टम ईवेंट दिखा सकता है जो मेरे द्वारा बनाए गए थे? जब मैंने पढ़ा कि यह जीवन बदल गया है तो वह पहली चीज थी जिसके बारे में मैंने सोचा था। क्या मुझे कुछ याद है?

— तेबे

@MuhammadUmer आप jQuery को ब्लैकबॉक्स कर सकते हैं इसलिए Chrome इसे छोड़ देगा और सीधे आपके स्रोत कोड पर जाएगा। developer.chrome.com/devtools/docs/blackboxing

— मैट ज़ुनर्ट

अगर आप सिर्फ JQuery का उपयोग करना बंद कर दें तो @MuhammadUmer क्या होगा?

— जॉन बल्विन एरियस

Answer 2

आप मॉनिटरवेट फ़ंक्शन का उपयोग कर सकते हैं ।

बस अपने तत्व का निरीक्षण करें ( right mouse click→ Inspectदृश्यमान तत्व पर या ElementsChrome डेवलपर टूल में टैब पर जाएं और वांछित तत्व का चयन करें) फिर Consoleटैब पर जाएं और लिखें:

monitorEvents($0)

अब जब आप इस तत्व पर माउस ले जाते हैं, तो इसे फोकस या क्लिक करें, इसके डेटा के साथ निकाल दी गई घटना का नाम प्रदर्शित होगा।

इस डेटा को प्राप्त करने से रोकने के लिए बस इसे कंसोल पर लिखें:

unmonitorEvents($0)

$0Chrome डेवलपर टूल द्वारा चयनित अंतिम DOM तत्व है। आप वहां कोई अन्य DOM ऑब्जेक्ट पास कर सकते हैं (उदाहरण के लिए getElementByIdया querySelector)।

आप कुछ पूर्वनिर्धारित सेट पर संकीर्ण निगरानी वाली घटनाओं के लिए दूसरे पैरामीटर के रूप में घटना "प्रकार" को भी निर्दिष्ट कर सकते हैं। उदाहरण के लिए:

monitorEvents(document.body, 'mouse')

इस उपलब्ध प्रकारों की सूची यहाँ है ।

मैंने एक छोटा gif बनाया जो दिखाता है कि यह फीचर कैसे काम करता है:

Comments

माना। यह विशिष्ट तत्वों पर घटनाओं को मॉनिटर करने और ट्रैक करने का डिफैक्टो तरीका है ।

— dmackerman

आह हाँ मैं देख रहा हूँ यह "अपरिभाषित" था जो मुझे फेंक रहा था लेकिन अब मैं देख रहा हूं कि आपके सहायक एनिमेटेड जीआईएफ में आपके पास समान है। धन्यवाद।

— MSC

किस उपकरण का उपयोग करने के लिए gif बनाने के लिए उपयोग किया गया

— जैरीगॉयल

@ मर्सिज़पावेल्सकी यहाँ से कैसे आगे बढ़ें? मैंने ऐसा किया और क्लिक इवेंट पाया, जिस इवेंट में मेरी दिलचस्पी थी, लेकिन मैं कैसे पाता हूं कि मैं तत्व पर क्लिक करता हूं? किस तरह के कोड को निष्पादित किया जाता है? मुझे किस संपत्ति की MouseEventखोज करनी चाहिए?

— उत्कर्ष

लेकिन जहां हैंडलर को खोजने के लिए उदाहरण के लिए हैंडलर पर क्लिक करें।

— शेख अब्दुल वाहिद

Answer 3

विज़ुअल इवेंट एक अच्छा सा बुकमार्क है जिसे आप किसी तत्व के ईवेंट हैंडलर को देखने के लिए उपयोग कर सकते हैं। ऑनलाइन डेमो पर यहां देखा जा सकता है ।

Answer 4

JQuery के लिए (कम से कम संस्करण 1.11.2) निम्नलिखित प्रक्रिया मेरे लिए काम की है।

1. तत्व पर राइट क्लिक करें और 'क्रोम डेवलपर टूल' खोलें
2. $._data(($0), 'events');'कंसोल' में टाइप करें
3. संलग्न वस्तुओं का विस्तार करें और handler:मूल्य पर डबल क्लिक करें ।
4. यह संलग्न फ़ंक्शन के स्रोत कोड को दिखाता है, 'खोज' टैब का उपयोग करके उस भाग की खोज करें।

और यह पहिया को फिर से आविष्कार करना बंद करने और वेनिला जेएस घटनाओं का उपयोग शुरू करने का समय है ... :)

Answer 5

यह कस्टम घटनाओं को नहीं दिखाएगा जैसे कि आपकी स्क्रिप्ट बना सकती है यदि यह एक jquery प्लगइन है। उदाहरण के लिए :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

क्रोम डेवलपर टूल में लिपियों के तहत इवेंट पैनल आपको "कुछ: कस्टम-इवेंट-वन" नहीं दिखाएगा

Comments

फिर, कोई उन घटनाओं को कैसे खोजता है?

— कैलिडोन