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

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

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

लाइव मेट्रिक स्क्रीन

परफ़ॉर्मेंस पैनल को पहली बार खोलने पर, आपको लाइव मेट्रिक स्क्रीन दिखेगी. इसमें आपको तीन Core Web Vitals का इस्तेमाल करके, मौजूदा पेज की परफ़ॉर्मेंस की खास जानकारी तुरंत मिल जाएगी.

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

लाइव मेट्रिक स्क्रीन की सुविधाएं

लाइव मेट्रिक स्क्रीन पर, मेट्रिक के अलावा ये सुविधाएं भी मौजूद होती हैं:

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

ज़्यादा जानकारी के लिए, DevTools में अपनी लोकल और असल उपयोगकर्ता की Core Web Vitals परफ़ॉर्मेंस को मॉनिटर करना ब्लॉग पोस्ट देखें.

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

स्क्रीन पर सबसे ऊपर बाईं ओर या दाईं ओर मौजूद बटन का इस्तेमाल करके, रनटाइम या लोड परफ़ॉर्मेंस रिकॉर्ड की जा सकती है:

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

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

1. उस पेज पर जाएं जिसका विश्लेषण करना है.
2. DevTools में, परफ़ॉर्मेंस टैब पर क्लिक करें.
3. रिकॉर्ड करें पर क्लिक करें.
4. पेज के साथ इंटरैक्ट करें. DevTools, आपकी गतिविधियों की वजह से पेज पर होने वाली सभी गतिविधियों को रिकॉर्ड करता है.
5. रिकॉर्डिंग बंद करने के लिए, रिकॉर्ड करें पर फिर से क्लिक करें या बंद करें पर क्लिक करें.

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

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

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

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

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

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

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

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

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

रिकॉर्डिंग के दौरान गारबेज कलेक्शन को लागू करना

किसी पेज को रिकॉर्ड करते समय, गार्बेज कलेक्शन को ज़बरदस्ती लागू करने के लिए, गार्बेज इकट्ठा करें mop पर क्लिक करें.

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

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

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

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

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

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

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

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

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

रिकॉर्डिंग के दौरान नेटवर्क की स्पीड कम करने के लिए:

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

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

रिकॉर्डिंग के दौरान सीपीयू की स्पीड कम करना

रिकॉर्डिंग के दौरान सीपीयू को थ्रॉटल करने के लिए:

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

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

ड्रॉप-डाउन मेन्यू में, परफ़ॉर्मेंस पैनल, डिफ़ॉल्ट थ्रॉटलिंग प्रीसेट या ऐसा प्रीसेट भी सुझा सकता है जो फ़ील्ड डेटा के आधार पर आपके उपयोगकर्ताओं के अनुभव से मिलता-जुलता हो.

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

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

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

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

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

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

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

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

पसंद के मुताबिक ट्रैक दिखाएं

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

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

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

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

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

रिकॉर्डिंग में एनोटेशन जोड़ना और उसे शेयर करना

परफ़ॉर्मेंस से जुड़े नतीजों के बारे में जानकारी जोड़ना और उन्हें शेयर करना देखें.

कार्रवाई करने में मददगार अहम जानकारी पाना

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

अगर कोई समस्या नहीं मिलती है, तो अहम जानकारी पास हो जाती है. अहम जानकारी टैब में, ये सुझाव सबसे नीचे, छोटे किए गए अहम जानकारी सेक्शन में दिखते हैं. जिन अहम जानकारी को पास नहीं किया गया है उन्हें उनके लिए बने सेक्शन में लिस्ट किया जाता है.

अहम जानकारी का इस्तेमाल करने के लिए:

1. परफ़ॉर्मेंस रिकॉर्डिंग करना.
2. परफ़ॉर्मेंस पैनल के बाएं साइडबार में, अहम जानकारी टैब खोलें. इसके बाद, अलग-अलग सेक्शन को बड़ा करें और आइटम पर कर्सर घुमाकर क्लिक करें. परफ़ॉर्मेंस पैनल, ट्रेस में मौजूद इवेंट को हाइलाइट करेगा.

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

परफ़ॉर्मेंस ट्रेस पर कर्सर घुमाने पर, परफ़ॉर्मेंस पैनल ये काम करता है:

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

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

नेविगेट करने के लिए, कीबोर्ड शॉर्टकट का इस्तेमाल करना

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

पैनल के सबसे ऊपर दाएं कोने में, सहायता शॉर्टकट दिखाएं पर क्लिक करें. इसके बाद, इनमें से कोई एक विकल्प चुनें:

• क्लासिक: माउस व्हील (टचपैड को ऊपर या नीचे की ओर) से ज़ूम करें. साथ ही, Shift + माउस व्हील से वर्टिकल स्क्रोल करें.
• मॉडर्न: माउस व्हील से वर्टिकल स्क्रोल करें, Shift + माउस व्हील से हॉरिज़ॉन्टल स्क्रोल करें, और Command/Control + माउस व्हील से ज़ूम करें.

शॉर्टकट डायलॉग बॉक्स में, उपलब्ध शॉर्टकट की चीटशीट भी मिलती है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

स्क्रिप्ट को अनदेखा करने के लिए, इनमें से कोई एक काम करें:

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

यह पैनल, ऐसी स्क्रिप्ट के लिए बहुत ज़्यादा नेस्टिंग को अपने-आप छोटा कर देगा और उन्हें On ignore list (REGULAR_EXPRESSION) के तौर पर मार्क कर देगा.

compress नज़रअंदाज़ किए जाने वाले कोड की सूची की सेटिंग का डायलॉग बॉक्स दिखाएं में जाकर, नज़रअंदाज़ किए जाने वाले कोड की सूची के नियमों को चालू और बंद किया जा सकता है.

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

DevTools, सेटिंग सेटिंग > नज़रअंदाज़ किए जाने वाले कोड की सूची में जोड़े गए, नज़रअंदाज़ किए जाने वाले कोड की सूची के नियमों को सेव करता है.

इसके अलावा, सिर्फ़ पहले पक्ष की स्क्रिप्ट पर फ़ोकस करने के लिए, check_box तीसरे पक्ष की स्क्रिप्ट को धुंधला करें को चुनें. परफ़ॉर्मेंस पैनल, तीसरे पक्ष की स्क्रिप्ट को स्लेटी रंग में दिखाएगा.

खोज से जुड़ी गतिविधियां

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

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

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

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

आपकी क्वेरी से मिलती-जुलती गतिविधियों के बीच स्विच करने के लिए:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

पहले और तीसरे पक्ष के इवेंट के बीच अंतर करना

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

सिर्फ़ पहले पक्ष के कोड की परफ़ॉर्मेंस पर फ़ोकस करने के लिए:

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

'पहले / तीसरे पक्ष' की टेबल की मदद से इवेंट हाइलाइट करना

टाइमलाइन की खास जानकारी में चुनी गई सीमा के अंदर और जब कोई भी इवेंट नहीं चुना जाता है, तब खास जानकारी टैब में पहली / तीसरी पार्टी की टेबल दिखती है. इसमें, इन चीज़ों के ट्रांसफ़र साइज़ और मुख्य थ्रेड के समय की जानकारी दी जाती है:

• पहले पक्ष की इकाई को 1st party बैज से मार्क किया गया है.
• चुनी गई रेंज में, तीसरे पक्ष की पहचानी गई सभी इकाइयां, जिन्हें मार्क नहीं किया गया है.
• Extension बैज वाले एक्सटेंशन.
• अन्य [unattributed] इकाइयां.

ट्रेस में हाइलाइट किए गए मिलते-जुलते इवेंट और धूसर किए गए बाकी इवेंट देखने के लिए, टेबल में मौजूद इकाइयों पर कर्सर घुमाएं. किसी इकाई के इवेंट को हाइलाइट करने के लिए, उसे टेबल में चुनें. हाइलाइटिंग हटाने के लिए, ट्रेस में मौजूद किसी भी खाली जगह पर क्लिक करें.

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

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

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

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

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

ज़्यादा समय लेने वाले टास्क को भी हाइलाइट किया जाता है. इसके लिए, लाल रंग के त्रिकोण का इस्तेमाल किया जाता है. साथ ही, 50 मिलीसेकंड से ज़्यादा समय लेने वाले हिस्से को लाल रंग से शेड किया जाता है:

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

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

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

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

Main ट्रैक में ऐसे ऐरो दिख सकते हैं जो इनिशिएटर और उनकी वजह से हुए इवेंट को कनेक्ट करते हैं:

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

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

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

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

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

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 है.

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

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

सबसे ज़्यादा स्टैक वाली टेबल

कॉल ट्री या बॉटम-अप टैब की दाईं ओर, right_panel_open सबसे ज़्यादा मेमोरी इस्तेमाल करने वाला स्टैक दिखाएं पर क्लिक करें. इससे सबसे ज़्यादा मेमोरी इस्तेमाल करने वाला स्टैक टेबल दिखेगी.

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

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

गतिविधियों का ब्यौरा टैब

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

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

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

सेल्फ़ टाइम कॉलम से पता चलता है कि उस गतिविधि में कितना समय लगा.

कुल समय कॉलम से पता चलता है कि किसी गतिविधि या उसकी किसी चाइल्ड गतिविधि में कितना समय बिताया गया.

टेबल को किसी कॉलम के हिसाब से क्रम में लगाने के लिए, शुरू होने का समय, सेल्फ़ टाइम या कुल समय पर क्लिक करें.

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

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

लोडिंग, स्क्रिप्टिंग, रेंडरिंग या पेंटिंग चेकबॉक्स को बंद करें, ताकि उन कैटगरी की सभी गतिविधियों को फ़िल्टर किया जा सके.

परफ़ॉर्मेंस मार्कर देखना

परफ़ॉर्मेंस ट्रेस में वर्टिकल लाइनों वाले ओवरले में, आपको परफ़ॉर्मेंस के अहम मार्कर दिख सकते हैं. जैसे:

• साइट का पहला एलिमेंट लोड होने में लगने वाला समय (एफ़सीपी)
• सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी)
• DOMContentLoaded इवेंट (DCL)
• Onload इवेंट (L)

ट्रेस के सबसे नीचे मौजूद मार्कर के नामों पर कर्सर घुमाकर, उनका टाइमस्टैंप देखें.

कस्टम टाइमिंग देखना

टाइमिंग ट्रैक पर, अपनी पसंद के मुताबिक बनाए गए परफ़ॉर्मेंस मार्कर देखें. जैसे:

• performance.mark() कॉल. यहां 813.44 मि॰से॰ पर टूलटिप के साथ एक अलग मार्क दिखाया गया है. इस पर JavaScript को चलाना शुरू किया जा रहा है लेबल लगा है.
• performance.measure() कॉल. नीचे पीले रंग का स्पैन दिखाया गया है, जिस पर धीमा इंटरैक्शन लेबल लगा है.

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

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

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

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

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

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

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

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

लेआउट शिफ़्ट देखना

लेआउट शिफ़्ट ट्रैक पर लेआउट शिफ़्ट देखें. शिफ़्ट को बैंगनी रंग के डायमंड के तौर पर दिखाया जाता है. साथ ही, टाइमलाइन पर उनकी नज़दीकी के आधार पर, उन्हें क्लस्टर (बैंगनी रंग की लाइनें) में ग्रुप किया जाता है.

व्यूपोर्ट में लेआउट शिफ़्ट करने वाले एलिमेंट को हाइलाइट करने के लिए, उससे जुड़े डायमंड पर कर्सर घुमाएं.

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

ज़्यादा जानकारी के लिए, लेआउट शिफ़्ट होने में लगने वाला समय (सीएलएस) देखें.

ऐनिमेशन देखना

ऐनिमेशन ट्रैक पर ऐनिमेशन देखें. ऐनिमेशन के नाम, उनसे जुड़ी सीएसएस प्रॉपर्टी या एलिमेंट के नाम पर रखे जाते हैं. उदाहरण के लिए, transform या my-element. नॉन-कंपोज़िटिंग ऐनिमेशन, सबसे ऊपर दाएं कोने में लाल रंग के त्रिभुजों से मार्क किए जाते हैं.

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

जीपीयू की गतिविधि देखना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

रेंडर-ब्लॉकिंग अनुरोधों को सबसे ऊपर दाएं कोने में लाल रंग के त्रिभुज से मार्क किया जाता है.

किसी अनुरोध पर कर्सर घुमाकर, टूलटिप में यह जानकारी देखी जा सकती है:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

डायग्राम को मूव करने के लिए:

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

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

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

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

1. ऐडवांस पेंट इंस्ट्रुमेंटेशन चालू करें.
2. Main ट्रैक में, Paint इवेंट चुनें.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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