दिलचस्प पोस्ट
एचएच: एमएम समय प्रारूप के मिलान के लिए नियमित अभिव्यक्ति आप फ़ाइल को कैसे जोड़ सकते हैं? क्या घटना बुदबुदाती है और कैप्चरिंग है? पैथ में फ़ायरफ़ॉक्स बाइनरी नहीं मिल सकता है सुनिश्चित करें कि फ़ायरफ़ॉक्स स्थापित है आप प्रोग्राम में जावा में एक वेब पेज कैसे डाउनलोड करते हैं? SQL सर्वर में त्रिभुज (गोल नहीं) दशमलव स्थान स्ट्रिंगबफ़र को स्ट्रिंग कन्सेटैनेशन ऑपरेटर के बजाय जावा में क्यों उपयोग करें Jsf2 में प्रवेश किए बिना प्रतिबंधित पृष्ठ तक पहुंच को रोकें सी ++ में हमारे पास आभासी निर्माता क्यों नहीं है? समुच्चय और पीओडी और कैसे / क्यों वे विशेष हैं? क्या जावास्क्रिप्ट में डबल फ्लोटिंग प्वाइंट नंबर सटीक है? Dist-packages और site-packages के बीच अंतर क्या है? Android TabWidget पता वर्तमान टैब पर क्लिक करें कुशलता से जाँच कर रहा है कि स्ट्रिंग में पायथन में एक वर्ण होता है ग्रैडल प्रॉक्सी कॉन्फ़िगरेशन

क्रोम का उपयोग करना, यह कैसे पता चलता है कि कौन से तत्व एक घटना बाध्य है?

मान लीजिए मेरे पृष्ठ पर एक लिंक है:

<a href="#" id="foo">Click Here</a> 

मैं कुछ और नहीं जानता, लेकिन जब मैं लिंक पर क्लिक करता हूं, एक चेतावनी ("बार") प्रदर्शित होती है। तो मुझे पता है कि कहीं, कुछ कोड को #foo पर बांधा जा रहा है

क्लिक करें इवेंट में चेतावनी ("बार") को बाध्य करने वाला कोड मैं कैसे पा सकता हूं? मैं क्रोम के साथ एक समाधान की तलाश कर रहा हूँ

पी एस .: उदाहरण है, तो मैं इस तरह के समाधान की तलाश नहीं कर रहा हूं: "XXXXXX का उपयोग करें और पूरी चेतावनी" (\ "बार \") के लिए खोज करें। मुझे एक वास्तविक डीबगिंग / ट्रेसिंग समाधान चाहिए

Solutions Collecting From Web of "क्रोम का उपयोग करना, यह कैसे पता चलता है कि कौन से तत्व एक घटना बाध्य है?"

क्रोम का उपयोग 15.0.865.0 देव एलिमेंट्स पैनल पर एक "इवेंट श्रोताओं" अनुभाग है:

यहां छवि विवरण दर्ज करें

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

यहां छवि विवरण दर्ज करें

आप अनुलग्नित घटनाओं को दूसरे तरीके से ढूंढने के लिए क्रोम के इंस्पेक्टर का भी उपयोग कर सकते हैं, निम्नानुसार:

  1. तत्व का निरीक्षण करने के लिए तत्व पर राइट क्लिक करें या इसे 'तत्व' फलक में ढूंढें
  2. तब 'इवेंट श्रोएर्स' टैब / फलक में, ईवेंट का विस्तार करें (जैसे 'क्लिक')
  3. विभिन्न उप-नोड्स का विस्तार करें जिसे आप चाहते हैं, और उसके बाद देखें कि 'हेन्डलर' उप-नोड कहां है
  4. शब्द 'फ़ंक्शन' पर राइट क्लिक करें, और फिर 'फ़ंक्शन परिभाषा दिखाने' पर क्लिक करें

यह आपको वहां ले जाएगा जहां हेन्डलर परिभाषित किया गया था, जैसा कि निम्नलिखित छवि में दिखाया गया है, और यहां पॉल आयरिश द्वारा समझाया गया है: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

'फ़ंक्शन परिभाषा दिखाएं'

इन चरणों का पालन करने के बाद, इसे jQuery ऑडिट एक्सटेंशन ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ) पर कोशिश करें:

  1. तत्व का निरीक्षण करें
  2. नए ' jQuery ऑडिट ' टैब पर ईवेंट की संपत्ति का विस्तार
  3. आपके लिए आवश्यक इवेंट के लिए चुनें
  4. हेन्डलर संपत्ति से, फ़ंक्शन पर राइट क्लिक करें और ' फंक्शन डेफिनिशन दिखाएं ' का चयन करें
  5. अब आप इवेंट बाइंडिंग कोड देखेंगे
  6. कोड के एक अधिक पठनीय दृश्य के लिए ' सुंदर प्रिंट ' बटन पर क्लिक करें

संपादित करें : अपने स्वयं के उत्तर के बदले, यह एक बहुत अच्छा है: कैसे फायरबग (या इसी तरह के उपकरण) के साथ जावास्क्रिप्ट / jQuery इवेंट बाइंडिंग को डीबग करें

Google Chromes डेवलपर टूल में स्क्रिप्ट अनुभाग में बनाया गया एक खोज फ़ंक्शन होता है

यदि आप इस उपकरण से अपरिचित हैं: (बस मामले में)

  • ठीक एक पृष्ठ पर कहीं भी क्लिक करें (क्रोम में)
  • 'तत्व का निरीक्षण करें' पर क्लिक करें
  • 'स्क्रिप्ट' टैब पर क्लिक करें
  • शीर्ष दाईं ओर खोज बार

# आईडी के लिए त्वरित खोज करने से आपको अंततः बाध्यकारी कार्य के लिए ले जाना चाहिए।

पूर्व: #foo के लिए खोज आपको ले जाएगा

 $('#foo').click(function(){ alert('bar'); }) 

यहां छवि विवरण दर्ज करें

FindEventHandlers एक jquery प्लगइन है, कच्चे कोड यहाँ है: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

कदम

  1. क्रोम के कंसोल में सीधे कच्चे कोड को चिपकाएं (ध्यान दें: पहले से ही जेपीयर लोड होना चाहिए)

  2. निम्न फ़ंक्शन कॉल का उपयोग करें: findEventHandlers(eventType, selector);
    संबंधित चयनकर्ता की निर्दिष्ट तत्व का ईवेंट टाईप हैंडलर ढूंढने के लिए

उदाहरण :

 findEventHandlers("click", "#clickThis"); 

यदि कोई भी हो, तो उपलब्ध ईवेंट हैंडलर बीहल दिखाएगा, आपको हेन्डलर को खोजने के लिए विस्तार की आवश्यकता है, फ़ंक्शन पर राइट क्लिक करें और show function definition चयन करें

देखें: https://blinkingcare.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

क्रोम संस्करण 52.0.2743.116 के लिए:

  1. क्रोम के डेवलपर टूल में, Ctrl + Shift + F Shift 'खोज' पैनल को लाएं।

  2. उस तत्व के नाम में टाइप करें जिसे आप ढूंढने का प्रयास कर रहे हैं

बाँध किए गए तत्वों के लिए परिणाम पैनल में दिखना चाहिए और उस फ़ाइल को बताएं जिसमें वे स्थित हैं।

संस्करण के लिए क्रोम संस्करण 62.0.3202.94 :

क्रोम डेवलपर उपकरण - ईवेंट श्रोता

  1. उस तत्व का चयन करें जिसे आप निरीक्षण करना चाहते हैं

  2. ईवेंट श्रोता टैब चुनें

  3. Jquery फ़ंक्शन के बजाय असली जावास्क्रिप्ट फ़ाइल दिखाने के लिए फ्रेमवर्क श्रोताओं को जांचना सुनिश्चित करें।