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

Kayce Basques

Sofia Emelianova

इस पेज पर, परफ़ॉर्मेंस का विश्लेषण करने से जुड़ी 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. सीपीयू को थ्रॉटलिंग के चुने गए लेवल पर सेट करें.

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

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

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

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

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

हार्डवेयर एक साथ काम करने वाली दूसरी चीज़ों को एम्युलेट करें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

लॉन्ग फ़्लेम चार्ट को स्क्रोल करें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

फ़्लेम चार्ट को पढ़कर सुनाएं

परफ़ॉर्मेंस पैनल, फ़्लेम चार्ट में थ्रेड की मुख्य गतिविधि को दिखाता है. 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 अपने-आप मूल फ़ाइलें ढूंढ लेता है.

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

ध्यान दें:अगले तीन सेक्शन उसी डेमो से जुड़े हैं. गतिविधि टैब डेमो पर जाकर, यह डेमो खुद चलाया जा सकता है. साथ ही, GoogleChrome/devtools-samples/perf/activitytabs.html पर जाकर सोर्स देखें.

रूट गतिविधियां

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

रूट गतिविधियां वे होती हैं जिनकी वजह से ब्राउज़र कुछ काम करता है. उदाहरण के लिए, जब किसी पेज पर क्लिक किया जाता है, तो ब्राउज़र 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 इवेंट (DCL)
• ऑनलोड इवेंट (L)
• आपकी पसंद के मुताबिक performance.mark() कॉल. टूलटिप के साथ एक अलग निशान नीचे 813.44 मि॰से॰ पर दिखाया गया है, जिसे JavaScript चलाना शुरू किया जा रहा है लेबल किया गया है.
• आपकी पसंद के मुताबिक performance.measure() कॉल. नीचे पीले रंग का स्पैन दिखाया गया है, जिसे धीमा इंटरैक्शन लेबल किया गया है.

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

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

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

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

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

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

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

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

जीपीयू से जुड़ी गतिविधि देखें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

किसी रिकॉर्डिंग का कुल समय देखना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Paint Flashing की मदद से, रीयल टाइम में पेंटिंग के इवेंट देखें

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

पेंट फ़्लैशिंग देखें.

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

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

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

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

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

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