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