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