परफ़ॉर्मेंस से जुड़ी सुविधाओं का रेफ़रंस

इस पेज पर, Chrome DevTools की सुविधाओं के बारे में पूरी जानकारी दी गई है. इनकी मदद से, परफ़ॉर्मेंस का विश्लेषण किया जा सकता है.

रनटाइम की परफ़ॉर्मेंस का विश्लेषण करने की सुविधा का इस्तेमाल शुरू करना लेख पढ़ें. इसमें, ट्यूटोरियल का विश्लेषण करने का तरीका बताया गया है Chrome DevTools का इस्तेमाल करके, पेज की परफ़ॉर्मेंस रिपोर्ट देखी जा सकती है.

परफ़ॉर्मेंस रिकॉर्ड करना

आपके पास रनटाइम रिकॉर्ड करने या परफ़ॉर्मेंस लोड करने का विकल्प होता है.

रनटाइम की परफ़ॉर्मेंस रिकॉर्ड करें

रनटाइम की परफ़ॉर्मेंस को तब रिकॉर्ड करें, जब आपको किसी पेज के चलने के दौरान उसकी परफ़ॉर्मेंस का विश्लेषण करना हो, जैसे कि वैकल्पिक है.

1. उस पेज पर जाएं जिसका आपको विश्लेषण करना है.
2. DevTools में परफ़ॉर्मेंस टैब पर क्लिक करें.

3. रिकॉर्ड करें पर क्लिक करें.

   

4. पेज के साथ इंटरैक्ट करना. DevTools सभी पेज गतिविधि रिकॉर्ड करता है, जो आपकी इंटरैक्शन.

5. फिर से रिकॉर्ड करें पर क्लिक करें या रिकॉर्डिंग बंद करने के लिए, बंद करें पर क्लिक करें.

रिकॉर्ड लोड की परफ़ॉर्मेंस

जब लोड होने के दौरान पेज की परफ़ॉर्मेंस का विश्लेषण करना हो, तब लोड होने वाली परफ़ॉर्मेंस को इस तरह से रिकॉर्ड करें: अच्छी तरह से काम नहीं करता है.

1. उस पेज पर जाएं जिसका आपको विश्लेषण करना है.
2. DevTools का परफ़ॉर्मेंस पैनल खोलें.

3. प्रोफ़ाइलिंग शुरू करें और पेज को फिर से लोड करें पर क्लिक करें . DevTools सबसे पहले about:blank पर जाकर, बाकी बचे स्क्रीनशॉट और ट्रेस को मिटाता है. इसके बाद, DevTools पेज के फिर से लोड होने के दौरान परफ़ॉर्मेंस मेट्रिक को रिकॉर्ड करता है. इसके बाद, यह अपने-आप बंद हो जाता है लोड होने के कुछ सेकंड बाद.

   

DevTools अपने-आप रिकॉर्डिंग के उस हिस्से पर ज़ूम इन करता है जहां ज़्यादातर गतिविधि हुई है.

इस उदाहरण में, परफ़ॉर्मेंस पैनल में पेज लोड होने के दौरान हुई गतिविधि दिखाई गई है.

रिकॉर्डिंग के दौरान स्क्रीनशॉट लें

रिकॉर्डिंग के दौरान हर फ़्रेम का स्क्रीनशॉट कैप्चर करने के लिए, स्क्रीनशॉट चेकबॉक्स को चालू करें.

स्क्रीनशॉट से इंटरैक्ट करने का तरीका जानने के लिए, स्क्रीनशॉट देखें पर जाएं.

रिकॉर्ड करते समय, कचरा इकट्ठा करने की सुविधा ज़बरदस्ती चालू करें

पेज रिकॉर्ड करते समय, कचरा इकट्ठा करें पर क्लिक करें मॉप करें, ताकि कचरा इकट्ठा किया जा सके.

रिकॉर्डिंग की सेटिंग दिखाएं

सेटिंग कैप्चर करें पर क्लिक करें से DevTools परफ़ॉर्मेंस रिकॉर्डिंग को कैप्चर करने के तरीके से जुड़ी ज़्यादा सेटिंग दिखाता है.

JavaScript के सैंपल बंद करें

डिफ़ॉल्ट रूप से, किसी रिकॉर्डिंग का मुख्य ट्रैक, JavaScript के ज़्यादा जानकारी वाले कॉल स्टैक दिखाता है का उपयोग कर रहे थे जो रिकॉर्डिंग के दौरान कॉल किए गए थे. इन कॉल स्टैक को बंद करने के लिए:

1. कैप्चर सेटिंग मेन्यू खोलें. रिकॉर्डिंग सेटिंग दिखाएं देखें.
2. JavaScript के सैंपल बंद करें चेकबॉक्स को चालू करें.
3. पेज की रिकॉर्डिंग करें.

नीचे दिए गए स्क्रीनशॉट, JavaScript सैंपल को बंद और चालू करने के बीच का अंतर दिखाते हैं. कॉन्टेंट बनाने नमूना लेने की सुविधा बंद होने पर, रिकॉर्डिंग का मुख्य ट्रैक बहुत छोटा हो जाता है. ऐसा इसलिए होता है, क्योंकि इसमें सभी शॉर्ट वीडियो शामिल नहीं होते हैं JavaScript कॉल स्टैक.

इस उदाहरण में, बंद किए गए JS सैंपल वाली रिकॉर्डिंग दिखाई गई है.

इस उदाहरण में, चालू किए गए JS सैंपल वाली रिकॉर्डिंग दिखाई गई है.

रिकॉर्डिंग के दौरान नेटवर्क को थ्रॉटल करें

रिकॉर्ड करते समय नेटवर्क को थ्रॉटल करने के लिए:

1. कैप्चर सेटिंग मेन्यू खोलें. रिकॉर्डिंग सेटिंग दिखाएं देखें.
2. थ्रॉटलिंग के चुने गए लेवल पर नेटवर्क सेट करें.

रिकॉर्ड करते समय सीपीयू को थ्रॉटल करें

रिकॉर्ड करते समय सीपीयू को थ्रॉटल करने के लिए:

1. कैप्चर सेटिंग मेन्यू खोलें. रिकॉर्डिंग सेटिंग दिखाएं देखें.
2. थ्रॉटलिंग के चुने गए लेवल पर सीपीयू सेट करें.

थ्रॉटलिंग आपके कंप्यूटर की क्षमता पर निर्भर करती है. उदाहरण के लिए, 2x धीमा विकल्प इस वजह से, आपका सीपीयू सामान्य से दो गुना धीमा काम करता है. DevTools असल में सीपीयू की नकल नहीं कर सकता एक मोबाइल डिवाइस है, क्योंकि मोबाइल डिवाइस का आर्किटेक्चर, Android, डेस्कटॉप और लैपटॉप.

सीएसएस सिलेक्टर के आंकड़े दिखाने की सुविधा चालू करें

लंबे समय तक चलने वाले स्टाइल इवेंट के दौरान, सीएसएस नियम चुनने वाले टूल के आंकड़े देखने के लिए:

1. कैप्चर सेटिंग मेन्यू खोलें. रिकॉर्डिंग सेटिंग दिखाएं देखें.
2. सीएसएस सिलेक्टर के आंकड़े दिखाने की सुविधा चालू करें चेकबॉक्स पर सही का निशान लगाएं.

ज़्यादा जानकारी के लिए, स्टाइल इवेंट का फिर से आकलन करने के दौरान सीएसएस सिलेक्टर की परफ़ॉर्मेंस का विश्लेषण करने का तरीका देखें.

बेहतर पेंट इंस्ट्रुमेंटेशन चालू करें

पेंट इंस्ट्रुमेंटेशन की जानकारी देखने के लिए:

1. कैप्चर सेटिंग मेन्यू खोलें. रिकॉर्डिंग सेटिंग दिखाएं देखें.
2. बेहतर पेंट इंस्ट्रुमेंटेशन चालू करें चेकबॉक्स पर सही का निशान लगाएं.

पेंट की जानकारी के साथ इंटरैक्ट करने का तरीका जानने के लिए, लेयर देखें और पेंट देखें प्रोफ़ाइलर.

हार्डवेयर के एक साथ कई काम करने की सुविधा को एम्युलेट करें

अलग-अलग प्रोसेसर कोर की संख्या के साथ ऐप्लिकेशन की परफ़ॉर्मेंस की जांच करने के लिए, navigator.hardwareConcurrency प्रॉपर्टी से रिपोर्ट की गई वैल्यू कॉन्फ़िगर की जा सकती है. कुछ ऐप्लिकेशन इस प्रॉपर्टी का इस्तेमाल, अपने ऐप्लिकेशन की समानता को कंट्रोल करने के लिए करते हैं. उदाहरण के लिए, एमस्क्रिप्टन पीथ्रेड पूल के साइज़ को कंट्रोल करने के लिए.

हार्डवेयर के एक साथ कई काम करने की सेटिंग को एम्युलेट करने के लिए:

1. कैप्चर सेटिंग मेन्यू खोलें. रिकॉर्डिंग सेटिंग दिखाएं देखें.
2. हार्डवेयर के एक साथ कई काम करने की सेटिंग पर सही का निशान लगाएं और इनपुट बॉक्स में कोर की संख्या सेट करें.

DevTools, परफ़ॉर्मेंस टैब के बगल में चेतावनी का आइकॉन दिखाता है. इससे आपको यह याद रखने में मदद मिलती है कि हार्डवेयर के एक साथ कई काम करने की सुविधा को चालू करने की सुविधा चालू है.

10 की डिफ़ॉल्ट वैल्यू पर वापस जाने के लिए, वापस लाएं बटन पर क्लिक करें.

रिकॉर्डिंग सेव करना

रिकॉर्डिंग को सेव करने के लिए, राइट क्लिक करें और प्रोफ़ाइल सेव करें को चुनें.

रिकॉर्डिंग लोड करें

रिकॉर्डिंग लोड करने के लिए, राइट क्लिक करें और प्रोफ़ाइल लोड करें चुनें.

पिछली रिकॉर्डिंग मिटाएं

रिकॉर्डिंग करने के बाद, रिकॉर्डिंग हटाएं दबाएं से उस रिकॉर्डिंग को मिटा सकते हैं.

परफ़ॉर्मेंस रिकॉर्डिंग का विश्लेषण करना

रनटाइम की परफ़ॉर्मेंस रिकॉर्ड करने या लोड से जुड़ी परफ़ॉर्मेंस रिकॉर्ड करने के बाद, परफ़ॉर्मेंस पैनल में, अभी-अभी हुई गतिविधि की परफ़ॉर्मेंस का विश्लेषण करने के लिए बहुत सारा डेटा मिलता है.

रिकॉर्डिंग को नेविगेट करना

अपनी परफ़ॉर्मेंस रिकॉर्डिंग की बारीकी से जांच करने के लिए, रिकॉर्डिंग के किसी हिस्से को चुनें, लंबे फ़्लेम चार्ट पर स्क्रोल करें, ज़ूम इन और ज़ूम आउट करें, और एक से दूसरे ज़ूम लेवल पर जाने के लिए ब्रेडक्रंब का इस्तेमाल करें.

रिकॉर्डिंग का कोई हिस्सा चुनें

रिकॉर्डिंग के सबसे ऊपर, परफ़ॉर्मेंस पैनल के कार्रवाई बार में, सीपीयू और नेट चार्ट के साथ टाइमलाइन की खास जानकारी सेक्शन देखा जा सकता है.

रिकॉर्डिंग का कोई हिस्सा चुनने के लिए, उस पर क्लिक करके रखें. इसके बाद, टाइमलाइन की खास जानकारी में बाईं या दाईं ओर खींचें और छोड़ें.

कीबोर्ड का इस्तेमाल करके कोई हिस्सा चुनने के लिए:

1. मुख्य ट्रैक या उसके किसी पड़ोसी पर फ़ोकस करें.
2. ज़ूम इन करने, बाएं ले जाने, ज़ूम आउट करने, और दाएं ले जाने के लिए, क्रम से W, A, S, D बटन का इस्तेमाल करें.

ट्रैकपैड का इस्तेमाल करके वीडियो का कोई हिस्सा चुनने के लिए:

1. टाइमलाइन की खास जानकारी सेक्शन या किसी भी ट्रैक (मुख्य और उसके आस-पास के ट्रैक) पर कर्सर घुमाएं.
2. दो उंगलियों का उपयोग करके, ज़ूम आउट करने के लिए ऊपर स्वाइप करें, बाईं ओर जाने के लिए बाईं ओर स्वाइप करें, ज़ूम इन करने के लिए नीचे स्वाइप करें, और दाईं ओर स्वाइप करें.

ब्रेडक्रंब बनाएं और एक ज़ूम लेवल से दूसरे पर जाएं

टाइमलाइन की खास जानकारी की मदद से, एक के बाद एक कई नेस्ट किए गए ब्रेडक्रंब बनाए जा सकते हैं. साथ ही, ज़ूम लेवल बढ़ाए जा सकते हैं और चुने गए लेवल पर पहुंचा जा सकता है.

ब्रेडक्रंब बनाने और उनका इस्तेमाल करने के लिए:

1. टाइमलाइन की खास जानकारी में, रिकॉर्डिंग का कोई हिस्सा चुनें.
2. चुने गए टेक्स्ट पर कर्सर घुमाएं और N MS zoom_in बटन पर क्लिक करें. चुना गया हिस्सा, टाइमलाइन की खास जानकारी के हिसाब से बड़ा हो जाता है. टाइमलाइन की खास जानकारी के सबसे ऊपर, ब्रेडक्रंब की चेन बन जाती है.
3. नेस्ट किया गया एक और ब्रेडक्रंब बनाने के लिए, पिछले दो चरणों को दोहराएं. ब्रेडक्रंब को नेस्ट करना तब तक जारी रखा जा सकता है, जब तक उन्हें चुनने की सीमा 5 मिलीसेकंड से ज़्यादा हो.
4. किसी चुने गए ज़ूम लेवल पर जाने के लिए, टाइमलाइन की खास जानकारी में सबसे ऊपर मौजूद, चेन में उस ब्रेडक्रंब पर क्लिक करें.

लंबा फ़्लेम चार्ट स्क्रोल करें

मुख्य ट्रैक या उसके किसी पड़ोसी में एक लंबे फ़्लेम चार्ट को स्क्रोल करने के लिए, क्लिक करके रखें, फिर किसी भी दिशा में तब तक खींचें, जब तक कि आप जो ढूंढ रहे हैं, वह व्यू में न आ जाए.

खोज गतिविधियां

परफ़ॉर्मेंस पैनल में सबसे नीचे मौजूद खोज बॉक्स खोलने के लिए, यह दबाएं:

• macOS पर: Command+F
• Windows, Linux: Control+F

इस उदाहरण में सबसे नीचे खोज बॉक्स में एक रेगुलर एक्सप्रेशन दिखाया गया है. इसमें E से शुरू होने वाली कोई भी गतिविधि मिलती है.

अपनी क्वेरी से मेल खाने वाली गतिविधियों को देखने के लिए:

• expand_less पीछे जाएं या expand_less आगे बढ़ें बटन पर क्लिक करें.
• पिछला चुनने के लिए Shift+Enter दबाएं या अगला विकल्प चुनने के लिए Enter दबाएं.

परफ़ॉर्मेंस पैनल में, खोज बॉक्स में चुनी गई गतिविधि पर टूलटिप दिखता है.

क्वेरी सेटिंग में बदलाव करने के लिए:

• क्वेरी केस-सेंसिटिव बनाने के लिए, match_case मैच केस पर क्लिक करें.
• अपनी क्वेरी में रेगुलर एक्सप्रेशन का इस्तेमाल करने के लिए, regular_expression रेगुलर एक्सप्रेशन पर क्लिक करें.

खोज बॉक्स छिपाने के लिए, रद्द करें पर क्लिक करें.

ट्रैक का क्रम बदलें और उन्हें छिपाएं

परफ़ॉर्मेंस ट्रेस को व्यवस्थित रखने के लिए, ट्रैक कॉन्फ़िगरेशन मोड में ट्रैक का क्रम बदला जा सकता है और उन ट्रैक को छिपाया जा सकता है जो काम के नहीं हैं.

ट्रैक को एक से दूसरी जगह ले जाने और छिपाने के लिए:

1. कॉन्फ़िगरेशन मोड में जाने के लिए, ट्रैक के नाम पर राइट क्लिक करें और ट्रैक कॉन्फ़िगर करें चुनें.
2. किसी ट्रैक को ऊपर या नीचे ले जाने के लिए, ऊपर या arrow_downward पर arrow_upward पर क्लिक करें. इसे छिपाने के लिए, visibility_off पर क्लिक करें.
3. काम पूरा होने के बाद, कॉन्फ़िगरेशन मोड से बाहर निकलने के लिए, सबसे नीचे मौजूद ट्रैक कॉन्फ़िगर करना पूरा करें पर क्लिक करें.

इस वर्कफ़्लो को कैसे इस्तेमाल किया जाता है, यह जानने के लिए यह वीडियो देखें.

परफ़ॉर्मेंस पैनल में नए ट्रेस के लिए ट्रैक कॉन्फ़िगरेशन सेव किया जाता है, लेकिन DevTools के अगले सेशन में ऐसा नहीं किया जाता.

मुख्य थ्रेड की गतिविधि देखें

पेज के मुख्य थ्रेड पर हुई गतिविधि देखने के लिए, मुख्य ट्रैक का इस्तेमाल करें.

किसी इवेंट के बारे में ज़्यादा जानकारी देखने के लिए, खास जानकारी टैब में उस इवेंट पर क्लिक करें. परफ़ॉर्मेंस पैनल, चुने गए इवेंट को नीले रंग में दिखाता है.

इस उदाहरण में, खास जानकारी टैब में get फ़ंक्शन कॉल इवेंट के बारे में ज़्यादा जानकारी दिखाई गई है.

फ़्लेम चार्ट को पढ़ें

परफ़ॉर्मेंस पैनल, फ़्लेम चार्ट में मुख्य थ्रेड की गतिविधि को दिखाता है. x-ऐक्सिस, समय के हिसाब से रिकॉर्डिंग दिखाता है. y-ऐक्सिस, कॉल स्टैक को दिखाता है. सबसे ऊपर मौजूद इवेंट की वजह से, नीचे दिए गए इवेंट होते हैं.

इस उदाहरण में, मुख्य ट्रैक में फ़्लेम चार्ट दिखाया गया है. click इवेंट की वजह से, पहचान छिपाकर फ़ंक्शन का कॉल आया. इसके बदले में इस फ़ंक्शन को onEndpointClick_ और handleClick_ कहा जाता है. इसी तरह अन्य फ़ंक्शन.

परफ़ॉर्मेंस पैनल में किसी भी स्क्रिप्ट को बिना किसी क्रम के रंग दिया जाता है, ताकि फ़्लेम चार्ट को अलग-अलग करके दिखाया जा सके और आसानी से पढ़ा जा सके. पहले के उदाहरण में, एक स्क्रिप्ट से किए गए फ़ंक्शन कॉल का रंग हल्का नीला होता है. किसी अन्य स्क्रिप्ट से की जाने वाली कॉल, हल्के गुलाबी रंग की होती हैं. गहरा पीला रंग स्क्रिप्टिंग गतिविधि को और बैंगनी इवेंट रेंडरिंग गतिविधि को दिखाता है. गहरे पीले और बैंगनी रंग के ये इवेंट, सभी रिकॉर्डिंग में एक जैसे होते हैं.

लंबे टास्क भी हाइलाइट किए जाते हैं. इसके लिए, लाल रंग के ट्राईऐंगल और 50 मिलीसेकंड से ज़्यादा वाले हिस्से को लाल रंग से हाइलाइट किया जाता है:

इस उदाहरण में, टास्क को 400 मिलीसेकंड से ज़्यादा समय लगा, इसलिए पिछले 350 मिलीसेकंड को दिखाने वाला हिस्सा लाल रंग से शेड किया गया है, जबकि शुरुआती 50 मिलीसेकंड नहीं हैं.

इसके अलावा, मुख्य ट्रैक, profile() और profileEnd() कंसोल फ़ंक्शन के साथ शुरू और बंद होने वाली सीपीयू प्रोफ़ाइलों के बारे में जानकारी दिखाता है.

JavaScript कॉल का ज़्यादा जानकारी वाला फ़्लेम चार्ट छिपाने के लिए, JavaScript के सैंपल बंद करना देखें. JS के सैंपल बंद होने पर, आपको सिर्फ़ Event (click) और Function Call जैसे हाई-लेवल इवेंट ही दिखते हैं.

इवेंट शुरू करने वाले लोगों को ट्रैक करें

मुख्य ट्रैक पर, तीर के निशान की मदद से इन ऐप्लिकेशन को शुरू करने वाले लोगों और उनसे जुड़े इवेंट को कनेक्ट किया जा सकता है:

• स्टाइल या लेआउट अमान्य है -> स्टाइल को फिर से कैलकुलेट करना या लेआउट
• ऐनिमेशन फ़्रेम का अनुरोध करें -> ऐनिमेशन फ़्रेम ट्रिगर किया गया
• ऐसे कॉलबैक का अनुरोध करें जो कुछ समय से इस्तेमाल में नहीं हैं -> कुछ समय से इस्तेमाल में न होने पर कॉलबैक करें
• टाइमर इंस्टॉल करें -> टाइमर ट्रिगर किया गया
• WebSocket बनाएं -> भेजें... और WebSocket हैंडशेक पाएं या WebSocket को बंद करें

ऐरो को देखने के लिए, फ़्लेम चार्ट में किसी इवेंट को शुरू करने वाला या उसकी वजह से हुआ इवेंट खोजें और उसे चुनें.

चुने जाने पर, 'खास जानकारी' टैब में, शुरू करने वाले लोगों के लिंक शुरू करने वाले लिंक और उनके इवेंट से जुड़े शुरू किए गए लिंक दिखते हैं. एक इवेंट से दूसरे इवेंट पर जाने के लिए, उन पर क्लिक करें.

फ़्लेम चार्ट में फ़ंक्शन और उनके चिल्ड्रन छिपाएं

मुख्य थ्रेड में, फ़्लेम चार्ट को व्यवस्थित रखने के लिए, चुने गए फ़ंक्शन या उनके बच्चों को छिपाया जा सकता है:

1. मुख्य ट्रैक में, किसी फ़ंक्शन पर राइट-क्लिक करके इनमें से कोई विकल्प चुनें या उससे जुड़ा शॉर्टकट दबाएं:

   • फ़ंक्शन छिपाएं (H)
   • चाइल्ड एंट्री (C) छिपाएं
   • दोहराए जाने वाले चाइल्ड एंट्री छिपाएं (R)
   • चाइल्ड एंट्री (U) को रीसेट करें
   • ट्रेस रीसेट करें (T)
   • सूची को अनदेखा करने के लिए स्क्रिप्ट जोड़ें (I)

   

   छिपे हुए चाइल्ड फ़ंक्शन वाले फ़ंक्शन के नाम के बगल में, arrow_drop_down ड्रॉप-डाउन बटन दिखता है.

2. छिपे हुए बच्चों की संख्या देखने के लिए, arrow_drop_down ड्रॉप-डाउन बटन पर कर्सर घुमाएं.

   

3. छिपे हुए चाइल्ड या पूरे फ़्लेम चार्ट वाले फ़ंक्शन को रीसेट करने के लिए, फ़ंक्शन चुनें और U दबाएं या किसी भी फ़ंक्शन पर राइट क्लिक करें और क्रम से ट्रेस रीसेट करें चुनें.

फ़्लेम चार्ट में स्क्रिप्ट को अनदेखा करें

स्क्रिप्ट को अनदेखा करने की सूची में जोड़ने के लिए, चार्ट में स्क्रिप्ट पर राइट-क्लिक करें और सूची को अनदेखा करने के लिए स्क्रिप्ट जोड़ें चुनें.

चार्ट, अनदेखा की गई स्क्रिप्ट को छोटा करता है, उन्हें ध्यान न देने की सूची पर के तौर पर मार्क करता है और उन्हें सेटिंग में जाकर कस्टम एक्सक्लूज़न नियमों में जोड़ देता है सेटिंग > नज़रअंदाज़ किए जाने वाले कोड की सूची. अनदेखा की गई स्क्रिप्ट तब तक सेव रहती हैं, जब तक आप उन्हें ट्रेस या किसी खास जगह लागू न करने के नियमों से हटा नहीं देते.

टेबल में गतिविधियां देखें

पेज रिकॉर्ड करने के बाद, आपको गतिविधियों का विश्लेषण करने के लिए, सिर्फ़ मुख्य ट्रैक पर निर्भर रहने की ज़रूरत नहीं है. DevTools में गतिविधियों का विश्लेषण करने के लिए, तीन टेबल व्यू भी हैं. हर व्यू से आपको अपने-आप गतिविधियों के बारे में जानकारी:

• सबसे ज़्यादा काम करने वाली रूट ऐक्टिविटी देखने के लिए, कॉल ट्री का इस्तेमाल करें टैब पर जाएं.
• जब आप उन गतिविधियों को देखना चाहते हों जिनमें सबसे अधिक समय बिताया गया था, तो बॉटम-अप टैब.
• जब आपको गतिविधियों को उसी क्रम में देखना हो जिस क्रम में वे रिकॉर्डिंग के दौरान हुई थीं, तो इसका इस्तेमाल करें इवेंट लॉग टैब.

आपको जो कॉन्टेंट चाहिए उसे तेज़ी से ढूंढने में आपकी मदद करने के लिए, तीनों टैब में फ़िल्टर बार के बगल में बेहतर फ़िल्टर करने के बटन मौजूद होते हैं:

• match_case केस मिलाएं.
• regular_expression रेगुलर एक्सप्रेशन.
• match_word पूरा शब्द मैच करें.

परफ़ॉर्मेंस पैनल में टेबल के तौर पर मौजूद हर व्यू में, फ़ंक्शन कॉल जैसी गतिविधियों के लिंक दिखते हैं. डीबग करने में आपकी मदद करने के लिए, DevTools सोर्स फ़ाइलों में उससे जुड़े फ़ंक्शन की जानकारी ढूंढता है. इसके अलावा, अगर सही सोर्स मैप मौजूद हैं और उन्हें चालू किया गया है, तो DevTools अपने-आप ओरिजनल फ़ाइलें ढूंढता है.

सोर्स पैनल में सोर्स फ़ाइल खोलने के लिए, लिंक पर क्लिक करें.

रूट ऐक्टिविटी

यहां रूट ऐक्टिविटी कॉन्सेप्ट के बारे में जानकारी दी गई है. इसके बारे में कॉल ट्री टैब में बताया गया है, बॉटम-अप टैब और इवेंट लॉग वाले सेक्शन.

रूट ऐक्टिविटी ऐसी होती हैं जिनकी वजह से ब्राउज़र कुछ काम करता है. उदाहरण के लिए, जब आप पेज पर, ब्राउज़र Event गतिविधि को रूट गतिविधि के रूप में सक्रिय करता है. फिर, उस Event की वजह से हैंडलर बन सकता है करने के लिए डिज़ाइन किया गया है.

मुख्य ट्रैक के फ़्लेम चार्ट में, रूट गतिविधियां, चार्ट के सबसे ऊपर होती हैं. कॉल में ट्री और इवेंट लॉग टैब, रूट गतिविधियां टॉप-लेवल आइटम हैं.

रूट गतिविधियों के उदाहरण के लिए, कॉल ट्री टैब देखें.

कॉल ट्री टैब

सबसे ज़्यादा काम करने वाली रूट गतिविधियों की जानकारी देखने के लिए, कॉल ट्री टैब का इस्तेमाल करें.

कॉल ट्री टैब में, रिकॉर्डिंग के चुने गए हिस्से के दौरान की गतिविधियां ही दिखती हैं. यहां जाएं: रिकॉर्डिंग के किसी हिस्से को चुनने का तरीका जानें.

इस उदाहरण में, गतिविधि कॉलम में आइटम के टॉप-लेवल, जैसे कि Event, Paint, और Composite Layers मुख्य गतिविधियां हैं. नेस्टिंग, कॉल स्टैक को दिखाती है. तय सीमा में इस उदाहरण में, Event की वजह से Function Call हुआ और button.addEventListener और b की वजह से, वगैरह.

सेल्फ़ टाइम, उस गतिविधि में बिताए गए समय को दिखाता है. कुल समय से पता चलता है कि उस गतिविधि या उसके किसी बच्चे में बिताया गया समय.

टेबल को उस कॉलम के हिसाब से क्रम में लगाने के लिए, सेल्फ़ टाइम, कुल समय या गतिविधि पर क्लिक करें.

गतिविधि के नाम के हिसाब से इवेंट फ़िल्टर करने के लिए, फ़िल्टर बॉक्स का इस्तेमाल करें.

डिफ़ॉल्ट रूप से, ग्रुप करना मेन्यू कोई ग्रुप नहीं पर सेट होता है. इन्हें क्रम से लगाने के लिए, ग्रुपिंग मेन्यू का इस्तेमाल करें गतिविधि टेबल दिखाई जाती है.

सबसे ज़्यादा स्टैक दिखाएं पर क्लिक करें गतिविधि टेबल की दाईं ओर, दूसरा टेबल दिखाने के लिए. जानकारी भरने के लिए, किसी गतिविधि पर क्लिक करें सबसे ज़्यादा स्टैक वाली टेबल. सबसे ज़्यादा स्टैक वाली टेबल से पता चलता है कि चुने गए सेक्शन में से कौनसे बच्चे हैं गतिविधि को लागू करने में सबसे ज़्यादा समय लगा.

बॉटम-अप टैब

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

बॉटम-अप टैब, रिकॉर्डिंग के चुनिंदा हिस्से के दौरान की गतिविधियों को ही दिखाता है. यहां जाएं: रिकॉर्डिंग के किसी हिस्से को चुनने का तरीका जानें.

इस उदाहरण के मुख्य ट्रैक के फ़्लेम चार्ट में, आप देख सकते हैं कि wait() को तीन कॉल करते समय समय बिताया गया. इसी वजह से, सबसे नीचे टैब wait है. फ़्लेम चार्ट में, ग्राफ़ के नीचे पीला wait पर किए जाने वाले कॉल असल में हज़ारों Minor GC कॉल हैं. इस प्रकार, आप इसे सबसे नीचे टैब, अगली सबसे महंगी गतिविधि Minor GC है.

सेल्फ़ टाइम कॉलम, उस गतिविधि में बिताए गए कुल समय को दिखाता है. मिलती है.

कुल समय कॉलम, उस गतिविधि या उसके किसी बच्चे में बिताए गए कुल समय को दिखाता है.

इवेंट लॉग टैब

इवेंट लॉग टैब का इस्तेमाल करके, इवेंट के दौरान गतिविधियों को उसी क्रम में देखें जिसमें वे इवेंट के दौरान हुई थीं रिकॉर्डिंग शामिल है.

इवेंट लॉग टैब में, रिकॉर्डिंग के चुने गए हिस्से के दौरान की गतिविधियां ही दिखती हैं. यहां जाएं: रिकॉर्डिंग के किसी हिस्से को चुनने का तरीका जानें.

शुरू होने का समय कॉलम में, शुरुआत के समय के मुकाबले उस जगह की जानकारी मिलती है जहां से गतिविधि शुरू हुई थी रिकॉर्ड किया जा सकता है. इस उदाहरण में चुने गए आइटम के लिए 1573.0 ms के शुरू होने का समय इसका मतलब है कि रिकॉर्डिंग शुरू होने के बाद गतिविधि 1573 मि॰से॰ शुरू हुई.

सेल्फ़ टाइम कॉलम, उस गतिविधि में बिताए गए समय के बारे में बताता है.

कुल समय कॉलम उस गतिविधि में या उसके किसी बच्चे.

टेबल को उस कॉलम के हिसाब से क्रम में लगाने के लिए, शुरू होने का समय, खुद का समय या कुल समय पर क्लिक करें.

गतिविधियों को नाम के हिसाब से फ़िल्टर करने के लिए, फ़िल्टर बॉक्स का इस्तेमाल करें.

1 मि॰से॰ या 15 मि॰से॰ से कम समय लेने वाली किसी भी गतिविधि को फ़िल्टर करने के लिए, अवधि मेन्यू का इस्तेमाल करें. डिफ़ॉल्ट तौर पर अवधि मेन्यू सभी पर सेट है, जिसका मतलब है कि सभी गतिविधियां दिखाई गई हैं.

सभी को फ़िल्टर करने के लिए लोडिंग, स्क्रिप्टिंग, रेंडरिंग या पेंटिंग चेकबॉक्स अक्षम करें गतिविधियाँ शामिल की हैं.

समय देखें

समय ट्रैक पर, ज़रूरी मार्कर देखें, जैसे:

• फ़र्स्ट पेंट (एफ़पी)
• फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी)
• सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी)
• DOMContentLoaded इवेंट (डीसीएल)
• ऑनलोड इवेंट (L)
• आपके कस्टम performance.mark() कॉल. टूलटिप के साथ एक अलग चिह्न नीचे 813.44 ms पर दिखाया गया है, जिस पर JavaScript चलाना शुरू किया जा रहा है लेबल होता है.
• आपके कस्टम performance.measure() कॉल. नीचे एक पीला स्पैन दिखाया गया है, जिसे धीमा इंटरैक्शन लेबल किया गया है.

किसी मार्कर को चुनकर खास जानकारी टैब में ज़्यादा जानकारी देखें. इस जानकारी में टाइमस्टैंप, कुल समय, सेल्फ़ टाइम, और detail ऑब्जेक्ट भी शामिल है.

इंटरैक्शन देखें

जवाब देने से जुड़ी संभावित समस्याओं को ट्रैक करने के लिए, इंटरैक्शन ट्रैक पर उपयोगकर्ता के इंटरैक्शन देखें.

इंटरैक्शन देखने के लिए:

1. उदाहरण के लिए, इस डेमो पेज पर DevTools खोलें.
2. परफ़ॉर्मेंस पैनल खोलें और रिकॉर्डिंग शुरू करें.
3. किसी एलिमेंट (कॉफ़ी) पर क्लिक करें और रिकॉर्डिंग बंद करें.
4. टाइमलाइन में इंटरैक्शन ट्रैक ढूंढें.

इस उदाहरण में, इंटरैक्शन ट्रैक, Pointer इंटरैक्शन दिखाता है. इंटरैक्शन में व्हिस्कर होते हैं, जो प्रोसेसिंग की समयसीमा में इनपुट और प्रज़ेंटेशन में होने वाली देरी को दिखाते हैं. इनपुट में देरी, प्रोसेस होने में लगने वाला समय, और प्रज़ेंटेशन में देरी वाला टूलटिप देखने के लिए, इंटरैक्शन पर कर्सर घुमाएं.

इंटरैक्शन ट्रैक, खास जानकारी टैब में और कर्सर घुमाने पर टूलटिप में, 200 मिलीसेकंड से ज़्यादा लंबे इंटरैक्शन के लिए इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) से जुड़ी चेतावनियां भी दिखाता है:

इंटरैक्शन ट्रैक, 200 मिलीसेकंड से ज़्यादा के इंटरैक्शन को एक लाल त्रिभुज के साथ सबसे ऊपर दाएं कोने में दिखाता है.

जीपीयू पर की गई गतिविधि देखें

GPU सेक्शन में जीपीयू से जुड़ी गतिविधि देखें.

रास्टर गतिविधि देखें

Thread पूल सेक्शन में रास्टर गतिविधि देखें.

फ़्रेम प्रति सेकंड (एफ़पीएस) का विश्लेषण करें

DevTools में फ़्रेम प्रति सेकंड का विश्लेषण करने के कई तरीके हैं:

• किसी खास फ़्रेम में लगने वाला समय देखने के लिए, फ़्रेम सेक्शन का इस्तेमाल करें.
• पेज के चलने के दौरान, FPS (फ़्रेम प्रति सेकंड) का रीयल-टाइम अनुमान लगाने के लिए, एफ़पीएस मीटर का इस्तेमाल करें. फ़्रेम प्रति सेकंड देखें एफ़पीएस मीटर से रीयल टाइम में.

फ़्रेम सेक्शन

फ़्रेम सेक्शन से, आपको यह पता चलता है कि किसी फ़्रेम में कितना समय लगा.

किसी फ़्रेम के बारे में ज़्यादा जानकारी देने वाला टूलटिप देखने के लिए, उस पर कर्सर घुमाएं.

इस उदाहरण में, किसी फ़्रेम पर कर्सर घुमाने पर एक टूलटिप दिखता है.

फ़्रेम सेक्शन में चार तरह के फ़्रेम दिख सकते हैं:

1. कुछ समय से इस्तेमाल न होने वाला फ़्रेम (सफ़ेद). कोई परिवर्तन नहीं.
2. फ़्रेम (हरा). उम्मीद के मुताबिक और सही समय पर रेंडर किया गया है.
3. कुछ हद तक दिखने वाला फ़्रेम (पीले रंग में, चौड़ी डैश-लाइन पैटर्न के साथ). Chrome ने कम से कम कुछ विज़ुअल अपडेट रेंडर करने की पूरी कोशिश की है. उदाहरण के लिए, अगर रेंडरर प्रोसेस (कैनवस ऐनिमेशन) के मुख्य थ्रेड का काम देर से हो रहा है, लेकिन कंपोज़िटर थ्रेड (स्क्रोलिंग) समय पर है.
4. छोड़ा गया फ़्रेम (लाल रंग का सॉलिड लाइन वाला पैटर्न). Chrome उचित समय में फ़्रेम को रेंडर नहीं कर सकता.

इस उदाहरण में, कुछ हद तक दिखाए गए फ़्रेम पर कर्सर घुमाने पर एक टूलटिप दिखता है.

खास जानकारी टैब में फ़्रेम के बारे में ज़्यादा जानकारी देखने के लिए, फ़्रेम पर क्लिक करें. DevTools चुने गए फ़्रेम को नीले रंग में आउटलाइन करता है.

नेटवर्क अनुरोध देखें

परफ़ॉर्मेंस रिकॉर्डिंग के दौरान मिले नेटवर्क अनुरोधों का वॉटरफ़ॉल देखने के लिए, नेटवर्क सेक्शन को बड़ा करें.

नेटवर्क के ट्रैक के नाम के बगल में, कलर कोड वाले अनुरोध के टाइप वाला एक लेजेंड होगा.

रेंडर होने से रोकने के अनुरोधों के ऊपर, दाएं कोने में लाल त्रिकोण का निशान बना होता है.

इसके साथ टूलटिप देखने के लिए, किसी अनुरोध पर कर्सर घुमाएं:

• अनुरोध का यूआरएल और उसे चलाने में लगा कुल समय.
• प्राथमिकता या प्राथमिकता में बदलाव, जैसे कि Medium -> High.
• अनुरोध Render blocking का है या नहीं.
• अनुरोध के समय की जानकारी, जिसके बारे में आगे बताया गया है.

किसी अनुरोध पर क्लिक करने पर, नेटवर्क ट्रैक, अनुरोध करने वाले टूल से उस अनुरोध तक एक ऐरो की मदद से दिखाता है.

इसके अलावा, परफ़ॉर्मेंस पैनल में आपको अनुरोध के बारे में ज़्यादा जानकारी के साथ खास जानकारी टैब दिखता है. इसमें शुरुआती प्राथमिकता और (फ़ाइनल) प्राथमिकता फ़ील्ड के अलावा, और भी चीज़ें शामिल हो सकती हैं. अगर उनकी वैल्यू अलग-अलग हैं, तो रिकॉर्डिंग के दौरान अनुरोध की फ़ेच करने की प्राथमिकता बदल गई है. ज़्यादा जानकारी के लिए, फ़ेच प्राथमिकता एपीआई के ज़रिए संसाधन लोड होने को ऑप्टिमाइज़ करना देखें.

खास जानकारी टैब में, अनुरोध की समयावधि की जानकारी भी दिखती है.

www.google.com के अनुरोध को बाईं ओर एक लाइन (|–), बीच में एक बार से गहरे रंग के हिस्से और हल्के रंग के हिस्से से, और दाईं ओर एक लाइन (–|) से दिखाया गया है.

नेटवर्क टैब में जाकर, टाइमिंग का दूसरा ब्रेकडाउन देखा जा सकता है. नेटवर्क ट्रैक में अनुरोध पर या खास जानकारी टैब में इसके यूआरएल पर राइट क्लिक करें. इसके बाद, नेटवर्क पैनल में दिखाएं पर क्लिक करें. DevTools आपको नेटवर्क पैनल पर ले जाता है और उससे जुड़ा अनुरोध चुनता है. उसका समय टैब खोलें.

यहां बताया गया है कि ये दोनों ब्रेकडाउन एक-दूसरे के साथ कैसे मैप किए जाते हैं:

• बाईं ओर मौजूद लाइन (|–) में, इवेंट के Connection start ग्रुप तक के सभी इवेंट शामिल हैं. दूसरे शब्दों में, यह Request Sent से पहले का सब कुछ है.
• बार का हल्का हिस्सा Request sent और Waiting for server response है.
• बार का गहरे रंग वाला हिस्सा Content download है.
• दाईं लाइन (–|), मुख्य थ्रेड के लिए इंतज़ार में लगा समय दिखाती है. नेटवर्क > समय टैब यह नहीं दिखाता.

मेमोरी की मेट्रिक देखें

पिछली रिकॉर्डिंग की मेमोरी मेट्रिक देखने के लिए, मेमोरी चेकबॉक्स को चालू करें.

DevTools खास जानकारी टैब के ऊपर, एक नया मेमोरी चार्ट दिखाता है. यहां एक नया चार्ट भी मौजूद है NET चार्ट, जिसे NET कहा जाता है. HEAP चार्ट वही जानकारी देता है जो JS मेमोरी चार्ट में हीप लाइन.

इस उदाहरण में, खास जानकारी टैब के ऊपर मौजूद मेमोरी मेट्रिक दिखाई गई हैं.

चार्ट मैप पर मौजूद रंगीन लाइनें, चार्ट के ऊपर मौजूद रंगीन चेकबॉक्स पर सेट की जाती हैं. इसके लिए, चेकबॉक्स को बंद करें उस कैटगरी को चार्ट से छिपा दें.

चार्ट में, रिकॉर्डिंग का सिर्फ़ वह हिस्सा दिखाया जाता है जिसे चुना गया है. पहले के उदाहरण में, मेमोरी चार्ट में सिर्फ़ रिकॉर्डिंग की शुरुआत में हुए 1,000 मि॰से॰ के निशान तक, मेमोरी के इस्तेमाल की जानकारी दिखाई गई है.

रिकॉर्डिंग के किसी हिस्से की अवधि देखना

नेटवर्क या मुख्य जैसे सेक्शन का विश्लेषण करते समय, कभी-कभी आपको ज़्यादा सटीक अनुमान की ज़रूरत होती है कुछ इवेंट में कितना समय लगा. कोई हिस्सा चुनने के लिए, Shift को दबाकर रखें. इसके बाद, क्लिक करके रखें और बाईं या दाईं ओर खींचें और छोड़ें रिकॉर्ड किया जा सकता है. आपके चुने गए हिस्से के सबसे नीचे, DevTools आपको दिखाता है कि इस हिस्से में कितना समय लगा.

इस उदाहरण में, चुने गए हिस्से के निचले हिस्से में मौजूद 488.53ms टाइमस्टैंप बताता है कि कितनी देर तक वह हिस्सा ले लिया.

स्क्रीनशॉट देखें

स्क्रीनशॉट की सुविधा चालू करने का तरीका जानने के लिए, रिकॉर्डिंग के दौरान स्क्रीनशॉट कैप्चर करना देखें.

टाइमलाइन की खास जानकारी पर कर्सर घुमाकर, यह जानें कि रिकॉर्डिंग शामिल है. टाइमलाइन की खास जानकारी वह सेक्शन है जिसमें सीपीयू, एफ़पीएस, और नेट चार्ट शामिल होते हैं.

फ़्रेम सेक्शन में किसी फ़्रेम पर क्लिक करके भी स्क्रीनशॉट देखे जा सकते हैं. DevTools डिफ़ॉल्ट तौर पर खास जानकारी टैब में दिए गए स्क्रीनशॉट का छोटा वर्शन.

यह उदाहरण, फ़्रेम सेक्शन में 195.5ms फ़्रेम पर क्लिक करने पर, खास जानकारी टैब में उसका स्क्रीनशॉट दिखाता है.

स्क्रीनशॉट पर ज़ूम इन करने के लिए, खास जानकारी टैब में थंबनेल पर क्लिक करें.

इस उदाहरण में, खास जानकारी टैब में उसके थंबनेल पर क्लिक करने के बाद, ज़ूम इन किया गया एक स्क्रीनशॉट दिखता है.

लेयर की जानकारी देखें

किसी फ़्रेम के बारे में बेहतर लेयर की जानकारी देखने के लिए:

1. बेहतर पेंट इंस्ट्रुमेंटेशन चालू करें.
2. फ़्रेम सेक्शन में कोई फ़्रेम चुनें. DevTools, इसकी लेयर के बारे में जानकारी दिखाता है इवेंट लॉग टैब के बगल में मौजूद नया लेयर टैब.

डायग्राम में किसी लेयर को हाइलाइट करने के लिए, उस पर कर्सर घुमाएं.

यह उदाहरण, लेयर #39 पर कर्सर घुमाने पर, हाइलाइट की गई लेयर दिखाता है.

डायग्राम को एक जगह से दूसरी जगह ले जाने के लिए:

• पैन मोड पर क्लिक करें X और Y ऐक्सिस पर चलने के लिए.
• घुमाएं मोड पर क्लिक करें घुमाने के लिए पर क्लिक करें.
• ट्रांसफ़ॉर्म रीसेट करें पर क्लिक करें डायग्राम को उसकी मूल जगह पर रीसेट करने के लिए.

लेयर के विश्लेषण का उदाहरण देखें:

पेंट प्रोफ़ाइलर देखें

पेंट इवेंट के बारे में बेहतर जानकारी देखने के लिए:

1. बेहतर पेंट इंस्ट्रुमेंटेशन चालू करें.
2. मुख्य ट्रैक में, कोई पेंट इवेंट चुनें.

रेंडरिंग टैब की मदद से रेंडरिंग की परफ़ॉर्मेंस का विश्लेषण करना

अपने पेज की रेंडरिंग परफ़ॉर्मेंस को विज़ुअलाइज़ करने के लिए, रेंडरिंग टैब की सुविधाओं का इस्तेमाल करें.

रेंडरिंग टैब खोलें.

एफ़पीएस मीटर की मदद से, रीयल टाइम में फ़्रेम प्रति सेकंड देखें

फ़्रेम रेंडरिंग के आंकड़े एक ओवरले होता है. यह आपके व्यूपोर्ट के सबसे ऊपर दाएं कोने में दिखता है. इससे पेज के चलने के दौरान, रीयल-टाइम में FPS (फ़्रेम प्रति सेकंड) का अनुमान मिलता है.

फ़्रेम रेंडर करने के आंकड़े देखें.

पेंट फ़्लैशिंग की मदद से, पेंटिंग के इवेंट रीयल टाइम में देखें

पेंट फ़्लैशिंग का इस्तेमाल करके, पेज पर पेंट किए गए सभी इवेंट रीयल टाइम में देखें.

पेंट फ़्लैश करता है देखें.

लेयर बॉर्डर वाली लेयर का ओवरले देखें

पेज के सबसे ऊपर, लेयर बॉर्डर और टाइल का ओवरले देखने के लिए, लेयर बॉर्डर का इस्तेमाल करें.

लेयर बॉर्डर देखें.

रीयल टाइम में, स्क्रोल की परफ़ॉर्मेंस से जुड़ी समस्याएं ढूंढना

स्क्रोल करने की परफ़ॉर्मेंस से जुड़ी समस्याएं का इस्तेमाल करके, पेज के उन एलिमेंट की पहचान करें जिनमें स्क्रोलिंग से जुड़े इवेंट लिसनर हैं और जो पेज की परफ़ॉर्मेंस को नुकसान पहुंचा सकते हैं. DevTools, टील में ऐसे एलिमेंट शामिल हैं जो समस्या का सामना कर सकते हैं.

परफ़ॉर्मेंस की समस्याओं को स्क्रोल करना देखें.