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

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. सीपीयू को थ्रॉटलिंग के चुने गए लेवल पर सेट करें.

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

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

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

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

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

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

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

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_more आगे बढ़ें बटन पर क्लिक करें.
• पिछला चुनने के लिए Shift+Enter दबाएं या अगला बटन चुनने के लिए Enter दबाएं.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

नेटवर्क से जुड़े अनुरोध देखना

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

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

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

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

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

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

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

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

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

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

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

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

मेमोरी मेट्रिक देखना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

लेयर का विश्लेषण करने की सुविधा को काम करते हुए देखें:

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

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

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

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

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

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

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

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

फ़्रेम की रेंडरिंग से जुड़े आंकड़े देखें.

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

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

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

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

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

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

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

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

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