DevTools टाइमलाइन पैनल, परफ़ॉर्मेंस ऑप्टिमाइज़ेशन के पाथ में हमेशा सबसे अच्छा रहा है. आपके ऐप्लिकेशन की गतिविधि को एक ही जगह से देखने की सुविधा से, यह विश्लेषण करने में मदद मिलती है कि कॉन्टेंट लोड करने, स्क्रिप्ट लिखने, रेंडर करने, और पेंटिंग करने में कितना समय बीतता है. हाल ही में, हमने टाइमलाइन को ज़्यादा इंस्ट्रुमेंट के साथ अपग्रेड किया है, ताकि आप अपने ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर तरीके से देख सकें.
हमने ये सुविधाएं जोड़ी हैं:
- इंटिग्रेट किया गया JavaScript प्रोफ़ाइलर. (फ़्लेम चार्ट शामिल है!)
- फ़्रेम व्यूअर का इस्तेमाल करें.
- पेंट प्रोफ़ाइलर का इस्तेमाल करें.
ध्यान दें कि इस लेख में बताए गए पेंट कैप्चर करने के विकल्पों का इस्तेमाल करने से, परफ़ॉर्मेंस पर कुछ ज़्यादा असर पड़ सकता है. इसलिए, उन्हें सिर्फ़ तब फ़्लिप करें, जब आप चाहें.
इंटिग्रेट किया गया JavaScript प्रोफ़ाइलर
अगर आपने कभी प्रोफ़ाइल पैनल का इस्तेमाल किया है, तो हो सकता है कि आप JavaScript सीपीयू प्रोफ़ाइलर के बारे में जानते हों. यह टूल मापता है कि आपकी JavaScript फ़ंक्शन को चलाने में कितना समय लगा. फ़्लेम चार्ट के साथ JavaScript प्रोफ़ाइल देखकर, समय के साथ JavaScript की प्रोसेसिंग को विज़ुअलाइज़ किया जा सकता है.
अब टाइमलाइन पैनल में, JavaScript के लागू होने की पूरी जानकारी देखी जा सकती है. JS प्रोफ़ाइलर कैप्चर विकल्प चुनकर, टाइमलाइन में दूसरे ब्राउज़र इवेंट के साथ-साथ अपने JavaScript कॉल स्टैक देखे जा सकते हैं. इस सुविधा को टाइमलाइन में जोड़ने से, डीबग करने के वर्कफ़्लो को आसान बनाने में मदद मिलती है. हालांकि, इससे बढ़कर यह है कि इसकी मदद से, JavaScript को कॉन्टेक्स्ट के हिसाब से देखा जा सकता है. साथ ही, कोड के उन हिस्सों की पहचान की जा सकती है जो पेज लोड होने में लगने वाले समय और रेंडरिंग पर असर डालते हैं.
JavaScript प्रोफ़ाइलर के अलावा, हमने टाइमलाइन पैनल में फ़्लेम चार्ट व्यू को भी इंटिग्रेट किया है. अब अपने ऐप्लिकेशन की गतिविधि को, इवेंट के क्लासिक वॉटरफ़ॉल या फ़्लेम चार्ट के तौर पर देखा जा सकता है. फ़्लेम चार्ट आइकॉन की मदद से, इन दो व्यू के बीच टॉगल किया जा सकता है.
फ़्रेम व्यूअर
लेयर कंपोज़िटिंग की आर्ट, ब्राउज़र का एक अन्य पहलू है जिसे ज़्यादातर डेवलपर से छिपा दिया गया है. कम से कम और सावधानी से इस्तेमाल किए जाने पर, लेयर को दोबारा पेंट करने से बचाया जा सकता है और परफ़ॉर्मेंस को बेहतर बनाया जा सकता है. हालांकि, यह आसानी से अनुमान नहीं लगाया जा सकता कि ब्राउज़र आपके कॉन्टेंट को कैसे कंपोज़ करेगा. टाइमलाइन के नए पेंट कैप्चर विकल्प का इस्तेमाल करके, रिकॉर्डिंग के हर फ़्रेम में कंपोज़िट लेयर को विज़ुअलाइज़ किया जा सकता है.
जब मुख्य थ्रेड के ऊपर कोई स्लेटी फ़्रेम बार चुना जाता है, तो इसके लेयर पैनल में, उन लेयर का विज़ुअल मॉडल दिखता है जो आपके ऐप्लिकेशन के लिए बनाए गए हैं.
लेयर मॉडल के कॉन्टेंट को एक्सप्लोर करने के लिए, लेयर मॉडल को ज़ूम किया जा सकता है, घुमाया जा सकता है, और खींचा जा सकता है. किसी परत पर माउस घुमाने से, पेज पर इसकी मौजूदा स्थिति दिखती है. किसी लेयर पर राइट क्लिक करने से, आपको एलिमेंट पैनल में उससे जुड़े नोड पर जाने में मदद मिलती है. इन सुविधाओं से पता चलता है कि किसी लेयर में किस चीज़ को प्रमोट किया गया था. अगर कोई लेयर चुनी जाती है, तो कंपोज़िट करने की वजहें लेबल वाली लाइन में यह भी देखा जा सकता है कि इसे क्यों प्रमोट किया गया है.
पेंट प्रोफ़ाइलर
इतना ही नहीं, हमने पेंट प्रोफ़ाइलर भी जोड़ा है, ताकि आप महंगे पेंट की वजह से होने वाले जैंक की पहचान कर सकें. इस सुविधा से टाइमलाइन में, पेंट इवेंट के दौरान Chrome के काम के बारे में ज़्यादा जानकारी मिलती है.
शुरुआत करने वालों के लिए, हर पेंट इवेंट से जुड़े विज़ुअल कॉन्टेंट की पहचान करना अब आसान हो गया है. टाइमलाइन में हरे रंग का कोई इवेंट चुनने पर, जानकारी पैनल में, पेंट किए गए असल पिक्सल की झलक दिखती है.
अगर आपको वाकई में ज़्यादा जानकारी चाहिए, तो पेंट प्रोफ़ाइलर पैनल पर स्विच करें. यह प्रोफ़ाइलर आपको सटीक ड्रॉ कमांड दिखाता है, जिसे ब्राउज़र ने चुने गए पेंट के लिए लागू किया है. इन नेटिव कमांड को अपने ऐप्लिकेशन के असल कॉन्टेंट से जोड़ने में मदद पाने के लिए, ड्रॉ* कॉल पर राइट क्लिक करें और सीधे एलिमेंट पैनल में उससे जुड़े नोड पर जाएं.
पैनल के सबसे ऊपर मौजूद मिनी-टाइमलाइन की मदद से, पेंटिंग की प्रोसेस को फिर से शुरू किया जा सकता है. साथ ही, यह भी समझा जा सकता है कि ब्राउज़र के लिए कौनसी कार्रवाइयां महंगी हैं. ड्रॉइंग ऑपरेशन को इन अलग-अलग कलर कोड में दिखाया जाता है: गुलाबी (आकार), नीला (बिटमैप), हरा (टेक्स्ट), और बैंगनी (विविध). बार की ऊंचाई से कॉल की अवधि का पता चलता है. इसलिए, लंबे बार की जांच करने से आपको यह समझने में मदद मिल सकती है कि किसी खास पेंट की कीमत कितनी ज़्यादा थी.
प्रोफ़ाइल और मुनाफ़ा!
जब बात प्रदर्शन ऑप्टिमाइज़ेशन की हो, तो ब्राउज़र का ज्ञान शानदार हो सकता है. इनसे आपको मिलती है कि टाइमलाइन में क्या बदलाव हुए हैं. इससे आपको अपने कोड और Chrome की रेंडरिंग प्रोसेस के बीच के संबंध को बेहतर तरीके से समझने में मदद मिलेगी. टाइमलाइन में मौजूद इन नए विकल्पों को आज़माएं और देखें कि Chrome DevTools आपके जैंक-हंटिंग वर्कफ़्लो को बेहतर बनाने के लिए क्या कर सकता है!