2012-02-03 10 views
51

मेरे पास ~ 100-200 जावास्क्रिप्ट फ़ंक्शन एक वेब साइट पर लोड हैं। मैं यह निर्धारित करना चाहता हूं कि जब मैं Google Chrome में एक आइटम या किसी अन्य पर क्लिक करता हूं तो जावास्क्रिप्ट फ़ंक्शन निष्पादित किया जाता है। मैं इसे क्रोम वेब डेवलपर टूल के साथ कैसे कर सकता हूं? धन्यवाद!जावास्क्रिप्ट निष्पादन ट्रैकिंग - कैसे?

उत्तर

64

क्रोम डेवलपर टूल्स शुरू करने के लिए एक सरल तरीका है, स्रोत पैनल पर स्विच करें और F8 (रोक निष्पादन) दबाएं। यह पहले निष्पादित जावास्क्रिप्ट कथन पर टूट जाएगा।

एक और तरीका mousedown के लिए इवेंट श्रोता ब्रेकपॉइंट सेट करना है या क्लिक करें: उसी स्रोत पैनल में, राइथेंड साइडबार में "ईवेंट श्रोता ब्रेकपॉइंट्स" का विस्तार करें। "माउस" आइटम का विस्तार करें और उन ईवेंट की जांच करें जिन्हें आप तोड़ना चाहते हैं (उदा। "क्लिक करें", "mousedown")। फिर अपने पेज पर क्लिक करें और DevTools में जेएस निष्पादन ब्रेक देखें। का आनंद लें!

+0

thx बहुत कुछ! यदि मैं FCKeditor में टेक्स्ट का चयन करता हूं, तो "माउस-बायाँ क्लिक", माउस को दूसरी जगह पर ले जाता है और रिलीज़ करता है, तो मुझे क्या माउस ईवेंट पकड़ना चाहिए। – Pave

+0

"माउसअप", शायद। हालांकि, FCKeditor से परिचित नहीं है। –

+0

मैंने कोशिश की, लेकिन ... अभी भी काम नहीं कर रहा है ... मैं खुद कोशिश करूँगा। धन्यवाद! – Pave

14

मैं यह निर्धारित करना चाहता हूं कि जब मैं Google Chrome में एक आइटम या किसी अन्य पर क्लिक करता हूं तो जावास्क्रिप्ट फ़ंक्शन निष्पादित किया जाता है।

अब Visual Event नामक एक शानदार विस्तार है जो ठीक है। यह केवल लोकप्रिय जेएस पुस्तकालयों (jQuery, यूयूआई, म्यूटूल, प्रोटोटाइप, चमक) और डीओएम स्तर 0 घटनाओं के माध्यम से सेट ईवेंट हैंडलर को पहचानता है।

+0

अच्छी तरह से काम करता है। सुरक्षा के बारे में निश्चित नहीं है, इसलिए जब मैं डिबगिंग नहीं कर रहा हूं तो मैं छोड़ देता हूं। – MagicLAMP

17

निष्पादन (जो आमतौर पर अच्छा काम करता है, लेकिन पृष्ठों पर अच्छी तरह से काम नहीं करता है जो अक्सर समय-समय पर कोड निष्पादित)

आप समय की एक छोटी अवधि के लिए रिकॉर्ड करने के लिए क्रोम का उपयोग कर सकते हैं प्रोफाइलर रोक के लिए एक वैकल्पिक। रिकॉर्डिंग समाप्त करने के बाद, यह आपको रिकॉर्डिंग के दौरान निष्पादित किए गए किसी भी फ़ंक्शन में बिताए गए सीपीयू समय का सारांश दिखाएगा। हम वास्तव में सीपीयू समय की परवाह नहीं करते हैं, बस इस उपकरण का उपयोग कर रहे थे क्योंकि यह हमें दिखाएगा कि कौन से फ़ंक्शंस निष्पादित किए गए थे।

मूल रूप से बस रिकॉर्डिंग शुरू:

chrome profiler start button

फिर अपने कार्रवाई (जैसे, वेब पेज पर एक बटन क्लिक करें, या जो कुछ भी दिलचस्प कोड निष्पादित करने के लिए कारण होगा करते हैं) से करते हैं। फिर रिकॉर्डिंग बंद करो और परिणाम देखने:

profiler result summary

सूचना मैं "शीर्ष नीचे" उपयोग कर रहा हूँ दृश्य मोड - जो आप कॉल स्टैक से पता चलता है, और आप को देखने के लिए जो कार्य करता है अंत में बुला लिया गया विश्लेषण कर सकते हैं। उदाहरण के लिए, कुछ अज्ञात फ़ंक्शन को पहले (संभावित रूप से सेटटाइमआउट या शायद कुछ क्लिक इवेंट हैंडलर के परिणामस्वरूप) कहा जाता था, और फिर इसे s.track.s.t द्वारा पहचाना गया कुछ विधि कहा जाता है जिसे बाद में s_doPlugins कहा जाता है और इसी तरह ... महत्वपूर्ण बात यह है कि शीर्ष में डाउन मोड, पेड़ के शीर्ष पर प्रविष्टियां कॉल स्टैक की शुरुआत होती हैं, और इसलिए वे आमतौर पर कुछ टाइमर फ़ंक्शन (setTimeout, setInterval, requestAnimationFrame, आदि ...) द्वारा पंजीकृत फ़ंक्शन हैं या कुछ ईवेंट हैंडलर (click) , mousemove, load, आदि ...)।

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

बीटीडब्ल्यू - मेरा मानना ​​है कि अधिकांश अन्य आधुनिक ब्राउज़रों की समान क्षमता है।