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




google-chrome-devtools (4)

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

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

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

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

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


आप monitorEvents फ़ंक्शन का उपयोग कर सकते हैं।

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

monitorEvents($0)

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

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

unmonitorEvents($0)

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

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

monitorEvents(document.body, 'mouse')

इस उपलब्ध प्रकार की सूची here

मैंने एक छोटा सा उपहार बनाया जो दिखाता है कि यह सुविधा कैसे काम करती है:


sprymedia.co.uk/article/Visual+Event+2 एक अच्छा छोटा बुकमार्कमार्क है जिसका उपयोग आप किसी तत्व के ईवेंट हैंडलर को देखने के लिए कर सकते हैं। ऑनलाइन डेमो पर here देखा जा सकता here


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

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








google-chrome-devtools