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

इस पेज पर, 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 मोबाइल डिवाइस के सीपीयू को सिम्युलेट नहीं कर सकता, क्योंकि मोबाइल डिवाइस का आर्किटेक्चर डेस्कटॉप और लैपटॉप से बहुत अलग है.

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

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

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 रेगुलर एक्सप्रेशन पर क्लिक करें.

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

पेज रिकॉर्ड करने के बाद, आपको गतिविधियों का विश्लेषण करने के लिए, सिर्फ़ मुख्य ट्रैक पर निर्भर रहने की ज़रूरत नहीं है. 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() कॉल. नीचे एक पीला स्पैन दिखाया गया है, जिसे धीमा इंटरैक्शन लेबल किया गया है.

खास जानकारी टैब में ज़्यादा जानकारी देखने के लिए, कोई मार्कर चुनें. मार्कर का टाइमस्टैंप देखने के लिए, समय ट्रैक में उस पर कर्सर घुमाएं.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अनुरोधों को इस तरह से कलर कोड किया जाता है:

• HTML: नीला
• CSS: बैंगनी
• JS: पीला
• इमेज: हरा

खास जानकारी टैब में, किसी अनुरोध के बारे में ज़्यादा जानकारी देखने के लिए उस पर क्लिक करें. पहले के उदाहरण में, खास जानकारी टैब, चुने गए हरे रंग के अनुरोध के बारे में जानकारी दिखा रहा है.

किसी अनुरोध के सबसे ऊपर बाईं ओर, गहरे नीले रंग के स्क्वेयर का मतलब है कि वह ज़्यादा प्राथमिकता वाला अनुरोध है. हल्के-नीले रंग के स्क्वेयर का मतलब है कम प्राथमिकता. पहले के उदाहरण में, चुना गया अनुरोध ज़्यादा प्राथमिकता वाला है और उसके ऊपर दिया गया नीला अनुरोध सबसे ज़्यादा प्राथमिकता वाला है.

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

पहले के उदाहरण में, www.google.com के अनुरोध को बाईं ओर एक लाइन से दिखाया गया है. इसके बीच में एक बार को गहरे रंग वाले हिस्से और हल्के रंग के हिस्से को दिखाया गया है. साथ ही, दाईं ओर एक लाइन से भी दिखाया गया है. अगला स्क्रीनशॉट, नेटवर्क पैनल के समय टैब में, इसी अनुरोध से जुड़े मिलते-जुलते अनुरोध दिखाता है. यहां बताया गया है कि ये दोनों निरूपण एक-दूसरे को कैसे मैप करते हैं:

• बाईं लाइन में, इवेंट के Connection Start ग्रुप के सभी इवेंट शामिल हैं. दूसरे शब्दों में, Request Sent से पहले का सब कुछ खास है.
• बार का हल्का हिस्सा Request Sent और Waiting (TTFB) है.
• बार का गहरे रंग वाला हिस्सा Content Download है.
• सही लाइन का मतलब है, मुख्य थ्रेड तक पहुंचने में लगने वाला समय. यह समय टैब में नहीं दिखाया जाता.

इस उदाहरण में, www.google.com अनुरोध को लाइन-बार दिखाने के तरीके के बारे में बताया गया है.

इस उदाहरण में, www.google.com अनुरोध को दिखाने के लिए, समय टैब दिखाया गया है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• X और Y ऐक्सिस पर जाने के लिए, पैन मोड पर क्लिक करें.
• Z ऐक्सिस पर घुमाने के लिए, घुमाएं मोड पर क्लिक करें.
• डायग्राम को उसकी ओरिजनल पोज़िशन पर रीसेट करने के लिए, बदलाव रीसेट करें पर क्लिक करें.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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