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

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

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

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

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

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

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

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

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

रिकॉर्डिंग लोड करना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ब्रेडक्रंब बनाना और ज़ूम लेवल के बीच स्विच करना

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

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

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

किसी ब्रेडक्रंब के चाइल्ड ब्रेडक्रंब हटाने के लिए, पैरंट ब्रेडक्रंब पर दायां क्लिक करें और चाइल्ड ब्रेडक्रंब हटाएं को चुनें.

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

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

Search पर की गई गतिविधियां

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

इंटरैक्शन ट्रैक, खास जानकारी टैब में 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, खास जानकारी टैब के ऊपर एक नया मेमोरी चार्ट दिखाता है. नेट चार्ट के नीचे एक नया चार्ट भी है, जिसे हीप कहा जाता है. HEAP चार्ट में वही जानकारी मिलती है जो मेमोरी चार्ट में JS Heap लाइन में मिलती है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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