क्या यह पहले से पता है? Chrome DevTools में परफ़ॉर्मेंस से जुड़ी समस्या को डीबग किया जा रहा है. हालांकि, परफ़ॉर्मेंस पैनल में बहुत ज़्यादा जानकारी होने की वजह से, सिर्फ़ सबसे काम के और कार्रवाई करने लायक हिस्सों पर फ़ोकस करना मुश्किल हो जाता है. टाइमलाइन की लंबाई, फ़्लेम चार्ट की गहराई, और डेटा के कई अलग-अलग ट्रैक के विस्तार के बीच, नेविगेट करना मुश्किल हो सकता है. परफ़ॉर्मेंस पैनल बेहद असरदार है, इसलिए इसकी उपयोगिता की वजह से उपयोगिता की कीमत आनी नहीं चाहिए!
Chrome की परफ़ॉर्मेंस टूल को बेहतर बनाने की हमारी पहल के तहत, हमने हाल ही में तीन नई सुविधाएं लॉन्च की हैं. इनका मकसद, जानकारी की डेंसिटी को कम करना और वर्कफ़्लो को पसंद के मुताबिक बनाने में डेवलपर की मदद करना है:
- टाइमलाइन के उन हिस्सों को छिपाएं जो काम के नहीं हैं
- फ़्लेम चार्ट के उन हिस्सों को छिपाएं जो काम के नहीं हैं
- ऐसे ट्रैक छिपाना जो आपके काम के नहीं हैं
हम इस पोस्ट में, इनमें से हर सुविधा के बारे में ज़्यादा जानेंगे. साथ ही, हम जानेंगे कि इन सुविधाओं का इस्तेमाल करके, सिर्फ़ ज़रूरी जानकारी पर फ़ोकस कैसे किया जा सकता है.
टाइमलाइन के उन हिस्सों को छिपाएं जो आपके काम के नहीं हैं
वेब परफ़ॉर्मेंस, मिलीसेकंड के स्केल पर काम करती है. इसलिए, आपकी परफ़ॉर्मेंस की रिकॉर्डिंग सिर्फ़ कुछ सेकंड की होने पर भी, कई बार आपकी परफ़ॉर्मेंस को रिकॉर्ड नहीं किया जा सकता.
Chrome 122 में, हमने ब्रेडक्रंब बनाने की सुविधा जोड़ी है. इस सुविधा से आप समयावधि की सीमाएं तय कर सकते हैं, ताकि आप सिर्फ़ अपनी पसंद के क्षेत्र में ज़ूम या पैन कर सकें. उदाहरण के लिए, अगर आपको जवाब देने से जुड़ी समस्याओं को डीबग करना है, तो टाइमलाइन को इस तरह से सीमित करना आपके लिए काफ़ी फ़ायदेमंद हो सकता है. इससे आपको किसी एक इंटरैक्शन या लंबे टास्क पर फ़ोकस करने में मदद मिलेगी.
पिछले स्क्रीनशॉट में, टाइमलाइन की खास जानकारी का क्लोज़-अप दिखाया गया है. इससे, थ्रेड की मुख्य गतिविधि दिखती है, जैसे कि स्क्रिप्ट चलाना और प्रज़ेंटेशन के काम करना. पॉइंटर को रखने पर, एक नया बटन दिखता है. यह बटन, टाइमलाइन की सीमाओं को मौजूदा विंडो पर सेट करता है. बटन को समय विंडो की चौड़ाई, मिलीसेकंड में, और आइकॉन के हिसाब से लेबल किया जाता है. ब्रेडक्रंब, टाइमलाइन की खास जानकारी के ऊपर मौजूद होते हैं और हर एक को उसकी टाइम विंडो के साइज़ के हिसाब से लेबल किया जाता है.
इस सुविधा का इस्तेमाल करने के लिए:
- टाइमलाइन को अपनी पसंद के हिसाब से ज़ूम और पैन करें.
- टाइमलाइन की खास जानकारी में, टाइमलाइन की खास जानकारी में मौजूद मैग्नीफ़ाइंग ग्लास के आइकॉन पर क्लिक करें और ब्रेडक्रंब सेट करें.
- पसंद के नेस्ट किए गए हिस्से पर ज़ूम इन करने के लिए, ज़रूरत के हिसाब से इसे दोहराएं.
- ब्रेडक्रंब पर क्लिक करके पिछली पसंद की जगहों या टाइमलाइन की पूरी रेंज पर जाएं.
टाइमलाइन में काट-छांट करने से यह पक्का होता है कि आप गलती से सीमा से बाहर स्क्रोल करके टाइमलाइन के उस हिस्से पर नहीं पहुंच जाएंगे जो काम का नहीं है. हालांकि, ज़रूरत पड़ने पर आप ब्रेडक्रंब पर क्लिक करके वापस ज़ूम कर सकते हैं. इसका दूसरा फ़ायदा यह है कि टाइमलाइन की खास जानकारी को यहां दिए गए ट्रैक के साथ अलाइन किया जा सकेगा. इससे फ़ोर्स्ड रीफ़्लो जैसे परफ़ॉर्मेंस अवसरों का पता लगाने और फ़्लेम चार्ट में उनकी असल वजह का पता लगाने में मदद मिल सकती है.
फ़्लेम चार्ट के उन हिस्सों को छिपाएं जो काम के नहीं हैं
मुख्य थ्रेड की गतिविधि का विश्लेषण करना कोई आसान काम नहीं है. परफ़ॉर्मेंस पैनल के इस हिस्से को फ़्लेम चार्ट कहा जाता है. इसकी वजह यह है कि कॉल स्टैक कितने लंबे और लगातार घूम सकते हैं. कुछ गंभीर मामलों में, ये स्टैक इतने भारी हो सकते हैं कि इन्हें समझना मुश्किल हो जाता है. साथ ही, जिस चीज़ को ऑप्टिमाइज़ करना है उस पर फ़ोकस करना मुश्किल हो जाता है.
Chrome 124 से, फ़्लेम चार्ट में उन एंट्री को अपनी पसंद के मुताबिक बनाया जा सकता है जिन्हें छिपाना है. इससे आपको सबसे ज़्यादा कार्रवाई करने वाली जानकारी पर फ़ोकस करने में मदद मिलेगी.
फ़्लेम चार्ट में किसी फ़ंक्शन पर राइट क्लिक करने पर, संदर्भ मेन्यू दिखता है. इस मेन्यू में एंट्री छिपाने के कई विकल्प होते हैं:
- फ़ंक्शन छिपाएं: चुने गए फ़ंक्शन को फ़्लेम चार्ट से हटाएं. इसके चिल्ड्रन, पैरंट के काम करने के तुरंत बाद ऊपर की ओर दिखने लगेंगे.
- बच्चों की फ़ोटो छिपाएं: चुने गए फ़ंक्शन में फ़्लेम चार्ट को छोटा करें और सभी बच्चों को छिपाएं.
- दोहराए जाने वाले बच्चों को छिपाएं: चुने गए फ़ंक्शन के सभी इंस्टेंस को बाकी फ़्लेम चार्ट से हटाएं.
ऐसे कई मददगार कीबोर्ड शॉर्टकट भी उपलब्ध हैं, जिनका इस्तेमाल फ़ंक्शन चुने जाने पर किया जा सकता है:
- H: चुने गए फ़ंक्शन को छिपाएं
- C: चुने गए फ़ंक्शन के चाइल्ड छिपाएं
- R: बाद में स्टैक में चुने गए फ़ंक्शन के इंस्टेंस छिपाएं'
- U: चुने गए फ़ंक्शन के छिपे हुए चाइल्ड दिखाएं
उन स्क्रिप्ट को हमेशा के लिए छिपाएं जो आपके काम की नहीं हैं
सूची को अनदेखा करने के लिए स्क्रिप्ट जोड़ें विकल्प, चुने गए फ़ंक्शन को फ़्लेम चार्ट से छिपा देता है. साथ ही, एक ही स्क्रिप्ट फ़ाइल में तय किए गए अन्य सभी फ़ंक्शन भी छिपा देता है. स्क्रिप्ट को अनदेखा करने की सूची में भी जोड़ दिया जाता है, जिसका इस्तेमाल DevTools डीबगर फ़ंक्शन पर चरण पूरा करने और स्क्रिप्ट से मिलने वाले अपवादों को अनदेखा करने के लिए करता है.
अनदेखा करने की सूची में जोड़ी गई स्क्रिप्ट बनी रहती हैं, ताकि वे नए ट्रेस में फ़्लेम चार्ट से छिपी रहेंगी. ऐसी स्क्रिप्ट जो आपके कंट्रोल में नहीं हैं उन्हें अनदेखा करने की सूची में शामिल किया जा सकता है. वहीं दूसरी ओर, अलग-अलग फ़ंक्शन को छिपाना, मौजूदा ट्रेस से कुछ समय के लिए और स्थिति पर निर्भर करता है. उदाहरण के लिए, हो सकता है कि आप बार-बार होने वाले फ़ंक्शन कॉल के एक भारी स्टैक को छिपाना चाहें, ताकि ट्रेस के साथ काम करना आसान हो सके.
फ़्लेम चार्ट में मौजूद, नज़रअंदाज़ किए जाने वाले फ़ंक्शन या छिपे हुए किसी अन्य फ़ंक्शन को वापस लाने के लिए, संदर्भ मेन्यू का इस्तेमाल करके, चुने गए फ़ंक्शन के चाइल्ड फ़ंक्शन को रीसेट किया जा सकता है. इसके अलावा, पूरे ट्रेस में छिपे हुए सभी फ़ंक्शन को रीसेट किया जा सकता है. छिपाए गए बच्चों के फ़ंक्शन के बारे में ▼ आइकॉन के साथ एनोटेट किया गया है. यह आइकॉन क्लिक करने पर, बच्चों के नाम को भी रीसेट कर देता है.
अगर फ़्लेम चार्ट से कोई भी ग़ैर-ज़रूरी गहराई और जटिलता हटा दी जाए, तो इसे इस्तेमाल करना ज़्यादा आसान हो जाएगा. ज़रूरत पड़ने पर, अपने हिसाब से एंट्री देखी जा सकती है. यह एर्गोनॉमिक सुधार है. इससे आपको काम से जुड़ी सबसे ज़रूरी जानकारी पर ध्यान देने में मदद मिलती है.
ऐसे ट्रैक छिपाएं जो आपके काम के नहीं हैं
मुख्य थ्रेड की गतिविधि से परफ़ॉर्मेंस पैनल का सिर्फ़ एक ट्रैक बनता है. परफ़ॉर्मेंस पैनल में मौजूद ट्रैक, किसी प्रोसेस की गतिविधि को दिखाते हैं. डीबग करने में मदद करने के लिए, उन्हें एक ही टाइमलाइन के हिसाब से बनाया जाता है. मुख्य ट्रैक के अलावा, पेज के ज़रिए इस्तेमाल किए जाने वाले अन्य सबफ़्रेम, थ्रेड, और वर्कर के लिए अलग-अलग ट्रैक होते हैं. साथ ही, नेटवर्क, फ़्रेम, ऐनिमेशन, और इंटरैक्शन ट्रैक का इस्तेमाल भी किया जाता है. और भी ज़्यादा ट्रैक, IO, जीपीयू, और कंपोज़िटर जैसी निचले-लेवल की Chrome प्रोसेस की गतिविधि को मार्क करते हैं. यह तो ढेर सारी जानकारी है! फिर भी, ज़्यादातर परफ़ॉर्मेंस वर्कफ़्लो के लिए, आपको एक बार में सिर्फ़ कुछ ट्रैक से मिलने वाली जानकारी की ज़रूरत होती है.
Chrome 125 में, एक नया कॉन्फ़िगरेशन मोड उपलब्ध कराया गया है जो आपको ग़ैर-ज़रूरी ट्रैक छिपाने या उन्हें अपनी पसंद के हिसाब से फिर से व्यवस्थित करने की सुविधा देता है. उदाहरण के लिए, अगर धीमे इंटरैक्शन को ऑप्टिमाइज़ किया जा रहा है, तो आपके पास इंटरैक्शन, मुख्य, और GPU ट्रैक को छोड़कर बाकी सभी को छिपाने का विकल्प है.
ट्रैक में बदलाव करने के लिए, किसी भी ट्रैक के नाम पर राइट क्लिक करें और ट्रैक कॉन्फ़िगर करें... चुनें. इससे कॉन्फ़िगरेशन मोड खुल जाता है, जहां आप अलग-अलग ट्रैक को दिखा पाएंगे, छिपा पाएंगे या उन्हें फिर से व्यवस्थित कर पाएंगे. अपनी प्राथमिकताओं को सेव करने के लिए, ट्रैक कॉन्फ़िगर करने की प्रोसेस पूरी करें बटन पर क्लिक करें.
ट्रैक को कॉन्फ़िगर करने से, यह कंट्रोल किया जा सकता है कि परफ़ॉर्मेंस पैनल आपके वर्कफ़्लो के लिए अहम जानकारी कैसे दिखाता है. इन सेटिंग का इस्तेमाल करके, गतिविधियों को ऐसी प्रोसेस से छिपाया जा सकता है जो आपके काम से जुड़ी नहीं हैं. साथ ही, ट्रैक को इस तरह इधर-उधर ले जाएं कि आपको ज़रूरी डेटा का आसानी से ऐक्सेस मिल सके.
रैप कर रहा है
ये तीन सुविधाएं आपको अपने परफ़ॉर्मेंस वर्कफ़्लो को पसंद के मुताबिक बनाने के लिए, नए दमदार कंट्रोल उपलब्ध हैं. इन सुविधाओं का इस्तेमाल करके और ग़ैर-ज़रूरी डेटा को कम करके, आप जो खोज रहे हैं उसे खोजने के लिए खुद को बेहतर स्थिति में डाल पाएंगे और डेटा को बेहतर तरीके से समझ पाएंगे.
हमें यह जानकर खुशी होगी कि आपके लिए क्या कारगर साबित हो रहा है या आपके अनुभव को कैसे बेहतर बनाया जा सकता है. अगर आपका कोई सवाल है या आपको कोई सामान्य सुझाव/राय देनी है या शिकायत करनी है, तो @ChromeDevTool पर संपर्क करें. अगर कोई चीज़ काम नहीं कर रही है या आपके पास नई सुविधाओं के लिए कोई सुझाव है, तो इस खुली समस्या पर टिप्पणी करें.
यह Chrome की परफ़ॉर्मेंस टूल को बेहतर बनाने की हमारी पहल की शुरुआत है. साथ ही, परफ़ॉर्मेंस पैनल को इस्तेमाल में आसान और बेहतर बनाने के लिए, हम तैयार की गई बाकी सारी जानकारी शेयर करने के लिए उत्साहित हैं. हम यहां डेवलपर के लिए Chrome ब्लॉग पर सुविधाओं के अगले बैच को प्रदर्शित करते हुए अपनी अगली पोस्ट प्रकाशित करेंगे. इसके अलावा, DevTools और Chrome की सभी नई सुविधाओं के बारे में अप-टू-डेट रहने के लिए, Chrome में नया क्या है पेज पर जाएं.