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