2012-01-20 6 views
13

उदाहरण के लिए, जावास्क्रिप्ट कोड दिखाएं जो एक बटन क्लिक होने पर someFunction() निष्पादित करेगा और मैं उस बटन पर क्लिक करता हूं। मुझे आश्चर्य है कि someFunction() को देखने का कोई तरीका है या नहीं। क्या रीयल टाइम में क्रोम में कौन से फ़ंक्शन निष्पादित किए गए हैं यह देखने का कोई तरीका है?क्या यह देखने का कोई तरीका है कि जावास्क्रिप्ट फ़ंक्शंस (फ़ंक्शंस का नाम) क्रोम के इंस्पेक्टर में वास्तविक समय में निष्पादित करता है?

यदि यह इंस्पेक्टर में प्रोफाइल टैब है जो चाल करता है, तो आप वास्तव में बताते हैं कि वास्तविक समय में कौन से कार्यों में आग लगती है?

संपादित 2012/01/21 12: 36p प्रशांत: नीचे ब्रायन निकल की टिप्पणी से, निरीक्षक में समयसीमा टैब रास्ता देखने के लिए वास्तविक समय में होता है, लेकिन कैसे आप में मार डाला कार्यों के नाम देख पा रहे हैं समयरेखा?

+2

वास्तविक वास्तविक समय कुछ हद तक बेकार होगा, क्योंकि यह अनुसरण करने के लिए बहुत तेज़ तरीका होगा। उस कोड पर * ब्रेकपॉइंट्स * सेट करें जिसे आप मॉनीटर करना चाहते हैं। – deceze

+2

मैंने टाइमलाइन में सूचीबद्ध व्यक्तिगत कार्यों को देखा है। –

+0

मैं ब्रेकपॉइंट्स सेट नहीं कर सकता क्योंकि यह मेरा कोड नहीं है और मुझे नहीं पता कि ब्रेकपॉइंट्स कहां सेट करें। Hehe। यही वह है जिसे मैं समझने की कोशिश कर रहा हूं! @ ब्रायन निकेल, आप किस समयरेखा के बारे में बात कर रहे हैं? – trusktr

उत्तर

12

उल्लेख इस लक्ष्य को पूरा करने के लिए टाइमलाइन और स्क्रिप्ट डेवलपर टूल का उपयोग किया जा सकता है।

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

यदि आप मिनीस्क्रिप्ट जावास्क्रिप्ट और ब्रेकपॉइंट्स (क्योंकि प्रत्येक पंक्ति इतनी लंबी है) के साथ परेशानी में हैं, यहां एक टिप है: ड्रॉपडाउन के माध्यम से स्क्रिप्ट पैनल में मिनीस्क्रिप्ट स्क्रिप्ट फ़ाइल खोलें, फिर {} पर क्लिक करें। यह सुंदर प्रिंट को सक्षम करेगा, जो कि व्हाइटस्पेस जोड़कर कुछ और पठनीय में छोटा कोड बढ़ाएगा। यह आपको ब्रेकपॉइंट्स को अधिक ग्रैन्युलरिटी डालने की अनुमति देता है। ध्यान दें कि यदि आप अब टाइमलाइन पैनल पर वापस आते हैं, तो स्क्रिप्ट संदर्भ (उदा।, jquery.min.js:3) अब सुंदर मुद्रित लाइन संख्याओं का उपयोग करें, न कि minified, whitespaceless वाले।

+0

मैं देखता हूं, यह आपको कोड की रेखाओं पर ले जाता है जहां फ़ंक्शन मिल जाता है। अच्छा! मैं देखता हूं कि यह असीमित कोड के साथ अच्छी तरह से काम करता है, लेकिन यदि आपके पास एक छोटा कोड है जिसमें सब कुछ एक से तीन लाइनों पर है, तो आप भाग्य से बाहर हैं क्योंकि एक पंक्ति पर कई फ़ंक्शन परिभाषित किए जा सकते हैं। मुझे लगता है कि यह अभी हमारे पास सबसे अच्छा है। यह सुविधाजनक होगा अगर यह कॉलम गिनती भी शामिल है, न केवल लाइन गिनती। उदाहरण के लिए, 'jquery.min.js: 3: 56' सिर्फ' jquery.min.js: 3' से बेहतर होगा। – trusktr

+1

असल में, इसके आसपास काम करने के लिए एक चाल है। कृपया मेरा संशोधित उत्तर देखें। – cheeken

+0

आह, अच्छा! दरअसल यह करने का बिल्कुल सही तरीका है! – trusktr

0

वहाँ आप उपयोग कर सकते हैं अच्छा उपयोगिताओं का एक बहुत हैं: console.trace();, debugger, आदि

+0

यह देखने के लिए एक तरीका प्रदान नहीं करता है कि कोड को संशोधित किए बिना वास्तविक समय में कौन से फ़ंक्शन कॉल किए जाते हैं। – trusktr

0

अनुग्रह जवाब देने के लिए जोड़ा जा रहा है, कृपया इन दो लेख भी

http://blog.chromium.org/2009/06/developer-tools-for-google-chrome.html

http://www.sagarganatra.com/2011/05/javascript-debugging-with-chrome.html

+0

दिलचस्प है, लेकिन मेरे पास कोड मेरा कोड नहीं है, इसलिए मैं यह समझने की कोशिश कर रहा हूं कि कोड के कौन से हिस्से कुछ क्रियाओं के साथ निष्पादित होते हैं (उदाहरण के लिए ऑनक्लिक)। दूसरे लेख में वह सब कुछ अच्छा है, लेकिन आपको पता होना चाहिए कि ब्रेकपॉइंट्स सेट करने के लिए और किस अभिव्यक्ति की निगरानी करने के लिए, जिसके बारे में मुझे कोई जानकारी नहीं है। क्या कोई तरीका है कि कोई निश्चित ईवेंट (जैसे एक क्लिक) होता है जब प्रारंभिक फ़ंक्शन निष्पादित होता है? – trusktr

संबंधित मुद्दे

 संबंधित मुद्दे