डेवलपर टूल का उपयोग करके क्रोम में एक बटन या तत्व द्वारा किस कोड को चलाया जाता है, यह कैसे पता करें

Question

मैं Chrome और अपनी वेबसाइट का उपयोग कर रहा हूं।

अंदर से मुझे क्या पता:

1 ) मेरे पास एक रूप है जहां लोग इस नारंगी छवि-बटन पर क्लिक करके साइन अप करते हैं:

2 ) मैं इसका निरीक्षण करता हूं, और यह सब है: <img class="formSend" src="images/botoninscribirse2.png">

3 ) स्रोत कोड के शीर्ष पर, स्क्रिप्ट स्रोतों के टन हैं। मुझे पता है कि कौन सा बटन कॉल करता है क्योंकि मैंने इसे कोडित किया है:<script src="js/jquery2.js" type="text/javascript"></script>

4 ) उस फ़ाइल के भीतर, आप पा सकते हैं: $(".formSend").click(function() { ... });जो कि बटन द्वारा ट्रिगर किया गया है (काफी जटिल रूप सत्यापन और सबमिट करने के लिए) और जो मैं चाहता हूं वह किसी भी वेबसाइट पर क्रोम देव टूल्स का उपयोग करने में सक्षम होना चाहिए ।

मैं कैसे पता लगा सकता हूं कि तत्व कहां कॉल करता है?

श्रोता टैब ने मेरे लिए काम नहीं किया। तो फिर मैंने क्लिक इवेंट श्रोताओं को देखने की कोशिश की, जो मुझे एक सुरक्षित शर्त की तरह लग रहा था, लेकिन ... वहाँ कोई नहीं jquery2.jsहै (और मुझे वास्तव में पता नहीं होगा कि कौन सी कोड फ़ाइल है इसलिए मैं इन सभी की जाँच में समय बर्बाद करूँगा .. ।):

फ़ाइल के $(".formSend").click(function() { ... });भीतर मेरा कार्य jquery2.jsनहीं है।

जेसी बताते हैं क्यों :

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

---

जैसा कि आप में से कुछ ने सुझाव दिया है कि मैंने नीचे एक उत्तर में काम करने वाले तरीकों को एकत्र किया है ।

Comments

मैं आमतौर पर Visual Eventबुकमार्क का उपयोग करता हूं । यह लोकप्रिय पुस्तकालयों से बंधी हुई घटनाओं का पता लगाता है और साइट के एक ओवरले का निर्माण करता है, जहां यह दिखाया जाता है कि आयोजन बाध्य हैं और प्रत्येक घटना के लिए कोड नमूने और स्रोत स्थान दे रहे हैं।

— केविन बी

@DontVoteMeDown लेकिन जो पूरे प्रश्न को हरा देता है। मान लीजिए, मेरे पास दर्जनों * .js फाइलें हैं, तो आपको कैसे पता चलेगा कि बटन द्वारा ट्रिगर किया गया कोड jquery2.js के अंदर है?

— कार्ल्स अल्केला

मैं समझता हूं कि विज़ुअल इवेंट कैसे काम करता है (धन्यवाद BTW) लेकिन जब आप उस बटन पर क्लिक करते हैं, तो आपका ब्राउज़र पूरी तरह से जानता है कि उसे क्या चलाना है , क्योंकि यह इसे चलाता है। मैं सिर्फ यह सुनिश्चित करना चाहता हूं कि यह देव उपकरणों के साथ संभव नहीं है और मैं आगे बढ़ूंगा।

— कार्ल्स अल्केला

अच्छा सवाल है, मैं निश्चित रूप से लगता है कि यह एक विशेषता है क्रोम (या फ़ायरफ़ॉक्स) होना चाहिए

— tomysshadow

यदि आपको इस प्रश्न का उत्तर मिल गया है, तो कृपया इसे उत्तर के रूप में जोड़ें। आपको स्वयं के प्रश्न का उत्तर देना अत्यधिक प्रोत्साहित करता है, लेकिन आपको प्रश्न का संपादन करके इसका उत्तर देना नहीं है।

— द गाइ हैट ​​विथ द हेट

Answer 1

अलेक्जेंडर पावलोव का जवाब आप क्या चाहते हैं के लिए निकटतम हो जाता है।

JQuery के अमूर्तता और कार्यक्षमता के विस्तार के कारण, घटना के मांस को प्राप्त करने के लिए बहुत सारे हुप्स को कूदना पड़ता है। मैंने इस jsFiddle को काम प्रदर्शित करने के लिए स्थापित किया है ।

---

1. इवेंट श्रोता ब्रेकपॉइंट की स्थापना

आप इस एक के करीब थे।

1. Chrome देव टूल (F12) खोलें, और स्रोत टैब पर जाएं।
2. माउस को नीचे गिराएँ -> क्लिक करें (ज़ूम करने के लिए क्लिक करें)
   
   

---

2. बटन पर क्लिक करें!

Chrome देव टूल स्क्रिप्ट निष्पादन को रोक देगा, और आपको इस एकीकृत कोड के सुंदर उलझाव के साथ प्रस्तुत करेगा:

(ज़ूम करने के लिए क्लिक करें)

---

3. शानदार कोड का पता लगाएं!

अब, यहाँ चाल को कुंजी दबाने से दूर नहीं जाना है , और स्क्रीन पर नज़र रखना है।

1. F11जब तक वांछित स्रोत कोड प्रकट नहीं होता तब तक कुंजी (चरण में) दबाएं
2. सोर्स कोड आखिरकार पहुंच गया
   • में jsFiddle नमूना ऊपर दी गई, मैं प्रेस करना पड़ा F11 108 बार वांछित ईवेंट हैंडलर / समारोह तक पहुँचने से पहले
   • घटनाओं को बांधने के लिए उपयोग किए जाने वाले jQuery (या फ्रेमवर्क लाइब्रेरी) के संस्करण के आधार पर आपका माइलेज अलग-अलग हो सकता है
   • पर्याप्त समर्पण और समय के साथ, आप किसी भी घटना हैंडलर / फ़ंक्शन को पा सकते हैं

---

4. व्याख्या

मेरे पास सटीक उत्तर, या स्पष्टीकरण नहीं है कि jQuery अमूर्तता की कई परतों से क्यों गुजरता है - सभी मैं यह सुझाव दे सकता हूं कि यह इसलिए है क्योंकि यह नौकरी के कोड को निष्पादित करने वाले ब्राउज़र से इसके उपयोग को दूर करने के लिए करता है। ।

यहाँ jQuery के डिबग संस्करण के साथ एक jsFiddle है (यानी, न्यूनतम नहीं)। जब आप पहले (गैर-लघु) ब्रेकपॉइंट पर कोड को देखते हैं, तो आप देख सकते हैं कि कोड कई चीजों को संभाल रहा है:

    // ...snip...

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

    // ...snip...

मुझे लगता है कि इसका कारण आपको अपने प्रयास में याद आया जब " निष्पादन रुक जाता है और मैं लाइन से लाइन कूदता हूं ", ऐसा इसलिए है क्योंकि आपने स्टेप इन के बजाय "स्टेप ओवर" फ़ंक्शन का उपयोग किया होगा। यहाँ एक StackOverflow का अंतर बताते हुए उत्तर दिया गया है।

अंत में, कारण यह है कि आपका फ़ंक्शन सीधे क्लिक इवेंट हैंडलर के लिए बाध्य नहीं है, क्योंकि jQuery एक फ़ंक्शन देता है जो बाध्य हो जाता है। बदले में jQuery का फ़ंक्शन कुछ अमूर्त परतों और जांचों से गुजरता है, और कहीं न कहीं , यह आपके फ़ंक्शन को निष्पादित करता है।

Comments

वाह, आप हैं और @ अलेक्जेंडर-पावलोव पूरी तरह से सही है, मैं इसे याद किया। अब मैं बस फिर से कोशिश की है और यह मुझे 132 F11 महत्वपूर्ण हिट लेता है ! अब यह समझ में आता है, लेकिन यह सिर्फ अव्यवहारिक है। मैं हालांकि अपने सवाल को सही करूंगा।

— कार्ल्स अल्कोली

@ कार्ल्सअल्किया यूप - यह बिल्कुल अव्यावहारिक है, लेकिन असंभव नहीं है। अपने हाथों पर पर्याप्त समर्पण और समय के साथ कोई भी HTML और जावास्क्रिप्ट में किए गए कुछ भी पा सकता है, भले ही गहराई से और टकराई हो। जैसा कि स्वीकार किया गया है, अलेक्जेंडर पावलोव के उत्तर या मेरे लिए स्वतंत्र महसूस करें।

— जेसी

हां, मैं अभी पूरा कर रहा हूं। FYI करें, यदि आप इसे पहले से नहीं जानते हैं, यदि आप नीचे की ओर बाईं ओर घुंघराले ब्रेसिज़ बटन ( i.imgur.com/ALoMQkR.png ) को मिनिफ़ाइंड स्क्रिप्ट पर क्लिक करते हैं, तो यह इसे "सुशोभित" करेगा, और डिबगिंग पर भी काम करेगा।

— कार्ल्स अल्कोली

2014 तक क्रोम ने क्रोम देव टूल्स में एक ब्लैक बॉक्स फीचर बनाया है जो ऊपर # 1 की आवश्यकता को हटा देता है।

— ब्रायन

@ ब्रायन और यहाँ एक ब्लॉग पोस्ट है जो ब्लैक-बॉक्सिंग स्क्रिप्ट का विवरण देता है ।

— क्रिस्चियन डियाकोन्सु

Answer 2

समाधान 1: फ्रेमवर्क ब्लैकबॉक्सिंग

महान, न्यूनतम सेटअप और कोई तीसरा पक्ष नहीं।

Chrome के दस्तावेज़ के अनुसार :

जब आप किसी स्क्रिप्ट को ब्लैकबॉक्स करते हैं तो क्या होता है?

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

यहाँ अद्यतन वर्कफ़्लो है:

1. पॉप खुला Chrome डेवलपर टूल ( F12या ⌘+ ⌥+ i), सेटिंग में जाना (ऊपरी दाएँ, या F1)। बाईं ओर एक टैब खोजें जिसे " ब्लैकबॉक्सिंग " कहा जाता है

2. यह वह जगह है जहाँ आप उन फ़ाइलों के RegEx पैटर्न को डालते हैं जो आप चाहते हैं कि Chrome डीबगिंग के दौरान अनदेखा करे। उदाहरण के लिए: jquery\..*\.js(ग्लोब पैटर्न / मानव अनुवाद: jquery.*.js)
3. यदि आप कई पैटर्न वाली फ़ाइलों को छोड़ना चाहते हैं, तो आप उन्हें पाइप वर्ण का उपयोग करके जोड़ सकते हैं |, जैसे: jquery\..*\.js|include\.postload\.js(जो कि "या" इस पैटर्न "की तरह कार्य करता है, इसलिए बोलना है। या" ऐड "बटन के साथ उन्हें जोड़ना जारी रखें।)
4. अब नीचे दिए गए समाधान 3 पर जारी रखें ।

बोनस टिप! मैं नियमित रूप से Regex101 का उपयोग करता हूं (लेकिन कई अन्य लोग हैं :) अपने जंग खाए रेगेक्स पैटर्न को जल्दी से जांचने के लिए और यह पता लगाता हूं कि मैं कदम दर कदम रेग्ज डिबगर के साथ कहां गलत हूं। यदि आप नियमित अभिव्यक्तियों में अभी तक "धाराप्रवाह" नहीं हैं, तो मैं आपको उन साइटों का उपयोग शुरू करने की सलाह देता हूं जो आपको लिखने में मदद करती हैं और उन्हें विज़ुअलाइज़ करती हैं जैसे http://buildregex.com/ और https://www.debuggex.com/।

आप स्रोत पैनल में काम करते समय संदर्भ मेनू का भी उपयोग कर सकते हैं। फ़ाइल देखते समय, आप संपादक में राइट-क्लिक कर सकते हैं और ब्लैकबॉक्स स्क्रिप्ट चुन सकते हैं। यह सेटिंग पैनल में सूची में फ़ाइल जोड़ देगा:

समाधान 2: दृश्य घटना

यह एक उत्कृष्ट उपकरण है :

विजुअल इवेंट एक ओपन-सोर्स जावास्क्रिप्ट बुकमार्कलेट है जो उन डोमिंग तत्वों से जुड़ी घटनाओं के बारे में डिबगिंग जानकारी प्रदान करता है। दृश्य घटना शो:

• किन तत्वों से जुड़ी हुई घटनाएं हैं
• किसी तत्व से जुड़ी घटनाओं का प्रकार
• कोड जो इवेंट के साथ चलाया जाएगा, ट्रिगर किया गया है
• स्रोत फ़ाइल और लाइन नंबर जहां संलग्न फ़ंक्शन को परिभाषित किया गया था (केवल वेबकिट ब्राउज़र और ओपेरा)

समाधान 3: डिबगिंग

जब आप पृष्ठ में कहीं क्लिक करते हैं, या जब डोम को संशोधित किया जाता है तो आप कोड को रोक सकते हैं ... और अन्य प्रकार के जेएस ब्रेकपॉइंट्स जो जानना उपयोगी होगा। आपको बुरे सपने से बचने के लिए यहां ब्लैकबॉक्सिंग लागू करना चाहिए ।

इस उदाहरण में, मैं जानना चाहता हूं कि बटन क्लिक करने पर वास्तव में क्या होता है।

1. देव उपकरण खोलें -> स्रोत टैब, और दाईं ओर खोजें Event Listener Breakpoints:

   

2. विस्तार Mouseऔर चयन करेंclick

3. अब तत्व पर क्लिक करें (निष्पादन को रोकना चाहिए), और अब आप कोड को डीबग कर रहे हैं। आप सभी कोड दबाने F11(जो चरण में है ) के माध्यम से जा सकते हैं । या स्टैक में कुछ जंप वापस जाएं। एक टन की छलांग हो सकती है

समाधान 4: मछली पकड़ने के कीवर्ड

देव उपकरण सक्रिय के साथ, आप के साथ पूरे codebase (सभी फाइलों में सभी कोड) खोज सकते हैं ⌘+ ⌥+ Fया:

और आप #envioजो भी टैग / वर्ग / आईडी खोज रहे हैं या पार्टी शुरू कर रहे हैं और आप प्रत्याशित की तुलना में कहीं तेज हो सकते हैं।

ध्यान रखें कभी-कभी न केवल imgढेर सारे तत्व ढेर होते हैं, और आपको पता नहीं चलता कि कौन सा कोड ट्रिगर करता है।

यदि यह आपके ज्ञान से थोड़ा बाहर है, तो डीबगिंग पर क्रोम के ट्यूटोरियल पर एक नज़र डालें ।

Comments

कहीं ब्लैकबॉक्सिंग नहीं मिली? कोशिश करें: क्रोम: // झंडे / # सक्षम- devtools- प्रयोग

— खंड

@CarlesAlcolea भयानक !! आपने अभी-अभी इस ट्रिक से मुझे बचाया है!

— प्रिक्स

किसी को भी पता है कि जब दृश्य घटना चल रही होती है तो पेज खुद को ताज़ा कर लेगा, इस तरह सारी जानकारी खो जाएगी?

— एडू कैस्ट्रिलॉन

समाधान 1 के लिए, आपको दूर दाहिने कोने में स्थित गलियारों पर क्लिक करना होगा, जब तक कि देवटूल खुला न हो, तब पूर्ण चौराहे के उप-मार्ग पर पहुंचें या F1 दबाएं। अब आप बायीं ओर ब्लैकबॉक्सिंग को टैब के रूप में देखेंगे। का आनंद लें!

— pensebien

ब्लैकबॉक्स स्क्रिप्ट के नए सबसे अच्छे तरीके की तरह लगता है आश्चर्यजनक रूप से आसान है। बस स्रोत पैनल में उस फ़ाइल पर जाएं और फ़ाइल में राइट क्लिक करें (बाईं ओर इसकी सूची आइटम पर नहीं, वास्तव में फ़ाइल खोलें और फ़ाइल में राइट क्लिक करें), फिर बस "ब्लैकबॉक्स इस स्क्रिप्ट" का चयन करें। तुम वहाँ जाओ!

— दान

Answer 3

लगता है जैसे "... और मैं लाइन से लाइन कूदता हूं ..." भाग गलत है। क्या आप स्टेपओवर या स्टेपइन करते हैं और क्या आप सुनिश्चित हैं कि आप गलती से संबंधित कॉल को याद नहीं करते हैं?

यह कहा, डिबगिंग चौखटे वास्तव में इस कारण के लिए थकाऊ हो सकता है। समस्या को कम करने के लिए, आप "सक्षम डिबगिंग समर्थन सक्षम करें" प्रयोग को सक्षम कर सकते हैं । खुश डिबगिंग! :)

Comments

यह पूरी तरह से काम करता है (और आप सही हैं, मैं कूद से चूक गया ), मैं इसे अपने प्रश्न में जोड़ूंगा। इसने मुझे रीगेक्स पैटर्न को फिर से पढ़ने के लिए भी मजबूर किया है: पी थैंक्स।

— कार्ल्स अल्कोली

Answer 4

आप findHandlersJS का उपयोग कर सकते हैं

आप क्रोम कंसोल में कर हैंडलर पा सकते हैं:

findEventHandlers("click", "img.envio")

आपको क्रोम के कंसोल में निम्नलिखित जानकारी मिलेगी:

• तत्व
  वास्तविक तत्व जहां ईवेंट हैंडलर पंजीकृत किया गया था
• ईवेंट
  इवेंट प्रकार जो हम में रुचि रखते हैं (जैसे क्लिक, परिवर्तन, आदि) के लिए jquery ईवेंट हैंडलर के बारे में जानकारी दें
• हैंडलर
  वास्तविक घटना हैंडलर विधि जिसे आप इसे राइट क्लिक करके और शो फंक्शन की परिभाषा का चयन करके देख सकते हैं
• चयनकर्ता
  चयनित घटनाओं के लिए प्रदान किया गया चयनकर्ता। यह सीधी घटनाओं के लिए खाली होगा।
• लक्ष्य
  उन तत्वों के साथ सूचीबद्ध होते हैं जिन्हें यह ईवेंट हैंडलर लक्षित करता है। उदाहरण के लिए, एक प्रत्यायोजित ईवेंट हैंडलर के लिए जो दस्तावेज़ ऑब्जेक्ट में पंजीकृत है और एक पृष्ठ के सभी बटन को लक्षित करता है, यह संपत्ति पृष्ठ के सभी बटन को सूचीबद्ध करेगी। आप उन्हें हॉवर कर सकते हैं और उन्हें क्रोम में हाइलाइट करके देख सकते हैं।

अधिक जानकारी यहाँ है और आप इसे यहाँ इस उदाहरण साइट में आज़मा सकते हैं ।

Answer 5

इस समाधान को jQuery की डेटा विधि की आवश्यकता है ।

1. Chrome का कंसोल खोलें (हालाँकि jQuery लोड वाला कोई भी ब्राउज़र काम करेगा)
2. Daud $._data($(".example").get(0), "events")
3. वांछित घटना हैंडलर को खोजने के लिए आउटपुट को ड्रिल करें।
4. "हैंडलर" पर राइट-क्लिक करें और "शो फंक्शन डेफिनिशन" चुनें
5. कोड को स्रोत टैब में दिखाया जाएगा

$._data()सिर्फ jQuery के डेटा विधि तक पहुँच रहा है। अधिक पठनीय विकल्प हो सकता है jQuery._data()।

इस SO उत्तर से दिलचस्प बिंदु :

1.8 jQuery के रूप में, घटना डेटा अब डेटा के लिए "सार्वजनिक एपीआई" से उपलब्ध नहीं है। इस jQuery ब्लॉग पोस्ट को पढ़ें । अब आपको इसका उपयोग करना चाहिए:

jQuery._data( elem, "events" ); एलएम एक HTML तत्व होना चाहिए, न कि एक jQuery ऑब्जेक्ट, या चयनकर्ता।

कृपया ध्यान दें, यह एक आंतरिक, 'निजी' संरचना है, और इसे संशोधित नहीं किया जाना चाहिए। इसका उपयोग केवल डीबगिंग उद्देश्यों के लिए करें।

JQuery के पुराने संस्करणों में, आपको पुरानी पद्धति का उपयोग करना पड़ सकता है जो है:

jQuery( elem ).data( "events" );

एक संस्करण अज्ञेय jQuery होगा: (jQuery._data || jQuery.data)(elem, 'events');

Comments

अधिक विचारों में फेंकने के लिए धन्यवाद। यह इसे करने का एक और तरीका है। नकारात्मक पक्ष यह है कि यह jQuery की जरूरत है और इस सवाल का शीर्षक केवल क्रोम के उपकरणों पर भरोसा करने के लिए कहता है। मैं यह स्पष्ट करने के लिए आपकी प्रतिक्रिया संपादित करूंगा कि यह एक jQuery विधि है और "BEST सॉल्यूशन एवर" की तुलना में कुछ अधिक उचित का उपयोग करें :) :) कृपया stackoverflow.com/help/how-to-answer

— Carles Alcolea