जंगल में दूर, अधिक मोटा भाग। नहीं, ऐसा नहीं है। पुराने वेब, अधिक जावास्क्रिप्टहर साल वेब एप्लिकेशन में वास्तव में अधिक से अधिक क्लाइंट कोड होता है। कभी-कभी ये सैकड़ों कार्यों के साथ दर्जनों फाइलें हैं। और जब हमें किसी घटना पर निष्पादित कोड को बदलने की आवश्यकता होती है, तो क्या करें (उदाहरण के लिए, एक लिंक पर क्लिक करके)। उसे कैसे खोजेंगे? इस समस्या के समाधान को देखते हुए, मैं कई अलग-अलग विकल्पों के साथ आया। उनमें से प्रत्येक के पास इसके पेशेवरों और विपक्ष हैं। और लेख के अंत में, मैं एक विधि का प्रस्ताव करता हूं जो मुझे इष्टतम लगती है।
कार्य विवरण
मुझे तुरंत यह कहना होगा कि शीर्षक प्रश्न का सार दर्शाता है: हम एक ईवेंट हैंडलर की तलाश कर रहे हैं जिसे jQuery लाइब्रेरी का उपयोग करके जोड़ा गया था, जो अब बहुत लोकप्रिय है। समाधान प्रदर्शित करने के लिए, हम Google Chrome डेवलपर टूल का उपयोग करेंगे, क्योंकि वे कुछ उन्नत सुविधाएँ प्रदान करते हैं जो अन्य ब्राउज़रों के कंसोल में उपलब्ध नहीं हैं। इन चिप्स के बिना, कुछ समाधान बिल्कुल भी संभव नहीं हैं।
प्रायोगिक खरगोश
हम यैंडेक्स मुख्य पृष्ठ पर ईवेंट हैंडलर कोड की खोज करेंगे। ज्यादातर क्योंकि यह jQuery का उपयोग करता है। बहुत नया संस्करण नहीं, हालांकि 1.4, लेकिन बिंदु नहीं। इस बार हमें इस बात में दिलचस्पी होगी कि जब आप लिंक "Yandex को अपना प्रारंभ पृष्ठ बनाएँ" पर क्लिक करते हैं तो किस कोड को निष्पादित किया जाता है। खोजने के लिए स्क्रिप्ट फ़ाइल का नाम जानने के लिए, लाइन नंबर। और निश्चित रूप से कोड को ही देखें।
विधि नंबर 1
Google Chrome डेवलपर टूल (F12) का उपयोग करते हुए, आपको केवल लिंक पर राइट-क्लिक करना है, "आइटम कोड देखें" चुनें, दाईं ओर "ईवेंट श्रोताओं" टैब पर क्लिक करें और वहां सभी ईवेंट हैंडलर देखें। JQuery का उपयोग करने के साथ समस्या यह है कि इस मामले में यह कोड jQuery के आंतरिक के एक टुकड़े से ज्यादा कुछ नहीं होगा।
गौरव
- साधारण मामलों में यह काम करता है
कमियों
- यदि jQuery का उपयोग किया जाता है, तो यह विधि अप्रभावी है
- यदि हैंडलर को लाइव () के माध्यम से लटका दिया जाता है, तो यह सिर्फ सूची में नहीं दिखाई देगा
घटना पर एक ब्रेकपॉइंट लगाएं
Google Chrome डेवलपर टूल की समृद्ध कार्यक्षमता हमें किसी भी ईवेंट पर ब्रेकप्वाइंट सेट करने की क्षमता प्रदान करती है। कंसोल खोलें (F12), "स्क्रिप्ट्स" टैब का चयन करें, "ईवेंट श्रोता ब्रेकपॉइंट" का विस्तार करें, माउस पर ब्रेकपॉइंट सेट करें। हम लिंक पर क्लिक करते हैं, हम कुछ प्रकार के आंतरिक अंग jQuery में प्राप्त करते हैं - पाचन तंत्र में सबसे अधिक संभावना है। कुछ मामलों में, यह विधि प्रभावी है, और हम तुरंत बुलाया कोड देख सकते हैं। लेकिन ऐसा नहीं है। मैं ईमानदारी से नहीं जानता कि इस स्थान से आवश्यक कोड कैसे प्राप्त करें।
गौरव
कमियों
- इस बार काम नहीं किया
- यदि कई हैंडलर लटका दिए जाते हैं, तो हम केवल पहले वाले को पकड़ सकते हैं, हम बाकी को नहीं खोज पाएंगे
अगर हम कुछ जानते हैं
ऐसा होता है कि कभी-कभी हमें कोड के आवश्यक टुकड़े के बारे में पहले से कुछ पता होता है। उदाहरण के लिए, एक बटन के स्पर्श पर, यह एक अलग रंग बन जाता है। इस मामले में, एक विधि है। हम एक तत्व पर राइट-क्लिक करते हैं, "तत्व कोड देखें" का चयन करें, DOM पदानुक्रम में पाए गए तत्व पर राइट-क्लिक करें और "विशेषताओं संशोधनों पर ब्रेक" का चयन करें। यह केवल लिंक पर क्लिक करने के लिए रहता है - और हम कोड के वांछित भाग में आते हैं।
गौरव
कमियों
- आप हमेशा लागू नहीं कर सकते, समाधान सार्वभौमिक नहीं है
Chrome एक्सटेंशन का उपयोग करना
Chrome -
विज़ुअल ईवेंट का ऐसा अद्भुत विस्तार है, जो पहली नज़र में ही अद्भुत काम करता है। यह वांछित पृष्ठ पर एक्सटेंशन आइकन पर क्लिक करने के लिए पर्याप्त है - और प्रत्येक तत्व के लिए उन पर टिका सभी हैंडलर दिखाई देंगे। जब आप ईवेंट आइकन पर होवर करते हैं, तो आप ईवेंट पर निष्पादित कोड देख सकते हैं।
गौरव
- उपयोग करने के लिए बहुत आसान है
- अपनी जरूरत की हर चीज दिखाता है
कमियों
- आपको कुछ स्थापित करने की आवश्यकता है
- जटिल लेआउट वाले पृष्ठों पर, कई आइकन बस देखने के लिए दुर्गम होंगे
- कार्य अभी भी पूरी तरह से हल नहीं हुआ है: हमने कोड देखा, लेकिन यह किस फ़ाइल में और किस लाइन पर स्थित है, हमें नहीं पता
आप बिना विस्तार के कर सकते हैं
Tru हैकर्स को जावास्क्रिप्ट कंसोल में केवल $ (चयनकर्ता) .data ('इवेंट') लिखने की आवश्यकता होती है और आप तत्व से जुड़े सभी हैंडलर देख सकते हैं। यदि हैंडलर को लाइव () के माध्यम से लटका दिया जाता है, तो आपको $ (दस्तावेज़) .डेटा ('ईवेंट') आउटपुट करने की आवश्यकता है और सूची में वांछित एक की तलाश करें। हालांकि, विस्तार के मामले में, यह विधि समस्या को अंत तक हल नहीं करती है, और साथ ही, आपको वांछित हैंडलर की काफी समय तक खोज करने की आवश्यकता है।
अंत में,
मैं समस्या के इष्टतम समाधान के रूप में क्या प्रस्तावित करूं?
- Google Chrome डेवलपर टूल (F12) खोलें, "स्क्रिप्ट" टैब चुनें और ड्रॉप-डाउन सूची में jQuery स्क्रिप्ट ढूंढें।
- सौंदर्यशास्त्र के लिए "सुंदर प्रिंट" बटन पर क्लिक करें।
- हम खोज में "हैंडल:" लिखकर jQuery ईवेंट हैंडलर पाते हैं। अंत में बृहदान्त्र समारोह की घोषणा के लिए तुरंत आगे बढ़ने के लिए रखा गया है। लाइब्रेरी के नए संस्करणों में, इस फ़ंक्शन को प्रेषण कहा जाता है, लेकिन बिंदु नहीं। यह फ़ंक्शन वह बिंदु है जिसके माध्यम से सभी असाइन किए गए ईवेंट पास होते हैं। पर्याप्त कोड है, जिस पंक्ति में आवेदन करने के लिए कॉल है वह हमारे लिए महत्वपूर्ण है - यह अनिवार्य रूप से हमारे वांछित कोड का कॉल है।
- बहुत सारी घटनाएँ समारोह से गुजरती हैं, इसलिए हम एक पारंपरिक ब्रेकपॉइंट नहीं, बल्कि एक सशर्त एक सेट करते हैं। फ़ंक्शन का पहला पैरामीटर ईवेंट ऑब्जेक्ट है, इसलिए हम "तर्क [0] .type == 'क्लिक करें" लिखते हैं।
- हम लिंक पर क्लिक करते हैं और हमारी लाइन पर ब्रेकपॉइंट को ट्रिगर किया जाता है।
- कोड के वांछित टुकड़े पर जाने के लिए, "अगले फ़ंक्शन कॉल में कदम" (F11) पर क्लिक करें। देखा! हमें न केवल कोड का आवश्यक टुकड़ा मिला, हम अब यह भी जानते हैं कि यह किस फ़ाइल में और किस लाइन पर स्थित है। समस्या हल हो गई है। ठीक।
- यदि कई प्रोसेसर हैं, तो क्रमिक रूप से F8 F11 दबाने पर, हम वांछित को प्राप्त करते हैं।
गौरव
- वास्तव में समस्या हल करती है
- कार्य मानक उपकरण के साथ हल किया गया है
- सार्वभौमिक विधि
कमियों