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

Question

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

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

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

मुझे वह कोड कैसे मिल सकता alert("bar")है जो क्लिक इवेंट के लिए बाध्यकारी है ? मैं Chrome के साथ समाधान ढूंढ रहा हूं।

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

Answer 1

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

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

Comments

पास हो रही है, लेकिन वहाँ के अधिकांश परिणाम 16 की लाइन 16 की ओर इशारा कर रहे हैं ... jquery.min.js :( मैं समझता हूं कि, समझाने की कोई आवश्यकता नहीं है, लेकिन हम कैसे पता लगा सकते हैं कि किसने बाइंड () विधि को बुलाया jQuery?

— FMaz008

वे उपकरण क्रोम 12.0.742.100 में भी उपलब्ध हैं। :) धन्यवाद !

— FMaz008 18

@Fluffy: आपके पास नहीं है। बस { }js देखते समय बाएं कोने में प्रतीक को क्लिक करें । जादू।

— हैन्स श्नाइडरमेयर

JQuery के जटिल घटना प्रेषण कोड के माध्यम से कदम रखना एक बड़ा दर्द है। नीचे दिए गए jQuery ऑडिट का उत्तर ( stackoverflow.com/a/30487583/24267 ) इतना बेहतर है।

— mhenry1384

कॉल स्टैक से jquery को बाहर करने के लिए, स्क्रिप्ट को ब्लैक बॉक्स करें: developer.chrome.com/devtools/docs/blackboxing @ IonuțG.Stan, या mods, क्या आप ब्लैकमेलिंग के संदर्भ में उत्तर को अपडेट कर सकते हैं - एक सामान्य प्रश्न लगता है इस उत्तर के लिए प्रासंगिक है।

— क्रिस हाइन्स

Answer 2

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

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

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

Comments

दो साल पुराना है, और अभी भी इस सवाल का सबसे अच्छा जवाब है।

— स्टुअर्ट

Answer 3

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

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

Comments

यह एक उत्कृष्ट विस्तार है और जावास्क्रिप्ट के माध्यम से समय के भार को बचाता है।

— नील मुनरो

मुझे अक्सर लगता है कि "इवेंट श्रोताओं" "नो इवेंट श्रोताओं" को सूचीबद्ध करता है, और "ईवेंट श्रोता ब्रेकपॉइंट्स"> माउस> क्लिक का चयन करने से ब्रेकपॉइंट नहीं बनता है। यह प्लगइन बहुत अच्छा काम करता है।

— स्टुअर्टन

@ जेवियर> यह एक शानदार प्रतिक्रिया है। यह एक जावास्क्रिप्ट (गैर jQuery) mecanisme के लिए काम करता है?

— महेफा

Answer 4

(नवीनतम 2020 तक) वर्जन क्रोम वर्जन 83.0.4103.61 के लिए :

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

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

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

Answer 5

संपादित करें : मेरे स्वयं के उत्तर के बदले, यह एक बहुत ही उत्कृष्ट है: Firebug (या समान टूल) के साथ जावास्क्रिप्ट / jQuery इवेंट बाइंडिंग को डीबग कैसे करें

Google Chromes डेवलपर टूल में स्क्रिप्ट सेक्शन में एक खोज फ़ंक्शन है

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

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

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

Ex: खोज के लिए #fooआप के लिए ले जाएगा

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

Comments

अच्छी शुरुआत है, लेकिन क्या होगा अगर मेरे पास #foo के 1500 संदर्भ हैं, उनमें से अधिकांश जो कुछ भी बाध्यकारी नहीं हैं, या उस मामले में जहां मेरे पास बाहरी स्क्रिप्ट में एकाधिक #foo आईडी हैं जो वर्तमान मामले में ट्रिगर नहीं हैं?

— FMaz008

बड़ा सवाल है। मेरे अनुभव में, यही वह जगह है जहां मानव डिबगिंग प्रक्रिया आमतौर पर शुरू होती है :)

— माइकल जैस्पर 18

हे, तुम सही हो, लेकिन मेरा सवाल यह भी था कि मैं एक इंसान के रूप में क्या करूं: p

— FMaz008

Answer 6

2018 अपडेट - भविष्य के पाठकों के लिए उपयोगी हो सकता है:

मुझे यकीन नहीं है कि जब यह मूल रूप से क्रोम में पेश किया गया था। लेकिन क्रोम में अब यह किया जा सकता है एक और (आसान) तरीका कंसोल कमांड के माध्यम से है।

उदाहरण के लिए: ( क्रोम कंसोल प्रकार में )

getEventListeners($0)

जबकि $ 0 DOM में चयनित तत्व है।

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4

Answer 7

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

कदम

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

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

उदाहरण :

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

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

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

Answer 8

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

1. Chrome की डेवलपर टूल में, हिटिंग से 'खोज' फलक लाने Ctrl+ Shift+ F।

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

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