Chrome 124 में, JavaScript प्रोफ़ाइलर पैनल बंद कर दिया जाएगा. आगे से, Node.js सीपीयू की परफ़ॉर्मेंस की प्रोफ़ाइल बनाने के लिए, परफ़ॉर्मेंस पैनल का इस्तेमाल करें.
हम JavaScript प्रोफ़ाइलर को बंद क्यों कर रहे हैं? (JS प्रोफ़ाइलर)
Chrome 58 के समय ही, DevTools की टीम ने JS Profiler को बंद करने का फ़ैसला लिया था. इसकी कई वजहें हैं:
- इसे अब डेवलप नहीं किया जा रहा है. JS प्रोफ़ाइलर को कई सालों से कोई बड़ा अपडेट नहीं मिला है. साथ ही, टीम के पास इसे डेवलप करने के लिए संसाधन नहीं हैं.
- प्रोफ़ाइल बनाने का बेहतर अनुभव. परफ़ॉर्मेंस पैनल का इस्तेमाल पहले से ही सभी तरह के परफ़ॉर्मेंस विश्लेषण के लिए किया जाता है. साथ ही, Node.js में JavaScript सीपीयू परफ़ॉर्मेंस की प्रोफ़ाइल बनाने की इस सुविधा की वजह से सभी चीज़ों को एक ही जगह इकट्ठा करना सही रहता है, ताकि एक जैसा अनुभव मिले और बेहतर तरीके से काम किया जा सके.
- परफ़ॉर्मेंस पैनल बेहतर है. हम इसमें नई सुविधाएं और बेहतर बनाने वाले बदलाव जोड़कर, इसे लगातार बेहतर बना रहे हैं. इससे यह परफ़ॉर्मेंस का विश्लेषण करने के लिए, ज़्यादा असरदार और उपयोगकर्ता के हिसाब से बना टूल बन गया है.
बंद होने के बाद आपको क्या करना चाहिए?
JavaScript सीपीयू की परफ़ॉर्मेंस की प्रोफ़ाइल बनाने के तरीके के बारे में ज़्यादा जानने के लिए, Node.js की परफ़ॉर्मेंस की प्रोफ़ाइल बनाना लेख पढ़ें.
परफ़ॉर्मेंस पैनल का इस्तेमाल करने के लिए यहां कुछ सलाह दी गई है:
- परफ़ॉर्मेंस में आने वाली रुकावटों की पहचान करने के लिए, फ़्लेम चार्ट का इस्तेमाल करें.
- फ़ंक्शन के बीच के संबंधों को समझने के लिए, बॉटम-अप और कॉल ट्री टैब का इस्तेमाल करें.
हम बंद होने की प्रक्रिया को कैसे मैनेज करते हैं?
हमने एक प्रोटोटाइप बनाया और डेवलपर से सुझाव या राय लेने के लिए, GitHub पर सार्वजनिक तौर पर टिप्पणियों का अनुरोध (आरएफ़सी) पब्लिश किया.
इसके अलावा, हम प्रोटोटाइप की जांच करने के लिए डेवलपर विशेषज्ञों से संपर्क करते हैं. साथ ही, किसी भी तरह की समस्या को हल करते हैं, ताकि यह पक्का किया जा सके कि परफ़ॉर्मेंस पैनल, प्रोफ़ाइल बनाने से जुड़ी ज़रूरी शर्तों को पूरा करता है.
हम JS प्रोफ़ाइलर को चार चरणों में धीरे-धीरे बंद कर रहे हैं, ताकि डेवलपर को बदलावों के हिसाब से अडजस्ट करने और उन्हें अपनाने का ज़रूरत के मुताबिक समय मिल सके.
मुख्य समस्याएं और हमने उन्हें कैसे ठीक किया
हमें मिले सुझावों, राय या शिकायतों में, सबसे ज़्यादा तीन मुख्य समस्याओं के बारे में बताया गया है:
- यह
.cpuprofileफ़ाइल फ़ॉर्मैट के साथ काम करता है. JS Profiler किसी दूसरे फ़ाइल फ़ॉर्मैट का इस्तेमाल करता है. परफ़ॉर्मेंस पैनल में यह सुविधा काम करनी चाहिए. - लोड होने में ज़्यादा समय लगना. पैनल के लोड होने की स्पीड धीमी लग रही थी, जिससे प्रोफ़ाइल बनाने की प्रोसेस में रुकावट आ रही थी.
- JavaScript वीएम सिलेक्टर मौजूद नहीं है. JavaScript वीएम इंस्टेंस सिलेक्टर की मौजूदगी न होने की वजह से, कुछ मामलों में प्रोफ़ाइलिंग की सुविधाएं सीमित हो गई हैं.
आइए, इनमें से हर समस्या के बारे में जानें और देखें कि हमने उन्हें कैसे ठीक किया.
धीमी लोडिंग स्पीड
डेवलपर ने हमें बताया कि परफ़ॉर्मेंस पैनल में बड़ी डेटा फ़ाइलें लोड होने में काफ़ी समय लगता है. साथ ही, कभी-कभी यह क्रैश भी हो जाता है.
हमने DevTools का विश्लेषण करने के लिए, DevTools का इस्तेमाल किया. हम इसे "DevTools-on-DevTools" कहते हैं. हमें कुछ समस्याएं मिली हैं और हमने कई ऑप्टिमाइज़ेशन किए हैं:
SetकोArrayडेटा स्ट्रक्चर से बदला गया.- ग़ैर-ज़रूरी
Mapडेटा स्ट्रक्चर हटा दिए गए हैं. - मेमोरी स्टैक के इस्तेमाल को कम करने के लिए, बार-बार दोहराए जाने वाले फ़ंक्शन को बार-बार इस्तेमाल होने वाले फ़ंक्शन (for लूप) में बदला गया.
इन समस्याओं को ठीक करके, हमने बड़ी फ़ाइलों के लोड होने की प्रोसेस को 80% तेज़ कर दिया है! 🎉
इस ब्लॉग पोस्ट में, हमें जो जानकारी मिली उसके बारे में ज़्यादा पढ़ें: परफ़ॉर्मेंस पैनल को 400% तेज़ करने वाला, परफ़ॉर्मेंस से जुड़ी अहम जानकारी देने वाला टूल.
JavaScript वीएम सिलेक्टर मौजूद नहीं है
शुरुआती प्रोटोटाइप में JavaScript वीएम सिलेक्टर मौजूद नहीं था. डेवलपर इसका इस्तेमाल, किसी खास VM इंस्टेंस का विश्लेषण करने के लिए करते हैं.
अब हमने परफ़ॉर्मेंस पैनल में JavaScript वीएम सिलेक्टर जोड़ा है. यह सभी उपलब्ध JavaScript VM इंस्टेंस की ड्रॉप-डाउन सूची दिखाता है. जब कोई इंस्टेंस चुना जाता है, तो परफ़ॉर्मेंस पैनल उस खास इंस्टेंस के लिए सीपीयू प्रोफ़ाइल लोड करता है.
cpuprofile फ़ाइल फ़ॉर्मैट का इस्तेमाल किया जा सकता है
पहले, परफ़ॉर्मेंस पैनल में सिर्फ़ ट्रैक फ़ाइलें काम करती थीं. ये ट्रैक इवेंट के कलेक्शन वाली JSON फ़ाइलें होती हैं.
दूसरी ओर, JS प्रोफ़ाइलर, सीपीयू प्रोफ़ाइलों के साथ काम करता है. ये .cpuprofile एक्सटेंशन वाली फ़ाइलें होती हैं, जिनमें JSON ऑब्जेक्ट होता है. ये इस तरह दिखते हैं:
{
// The list of profile nodes. First item is the root node.
nodes: ProfileNode[];
// Profiling start timestamp in microseconds.
startTime: number;
// Profiling end timestamp in microseconds.
endTime: number;
// Ids of samples at top nodes.
samples?: integer[];
// Time intervals between adjacent samples in microseconds.
// The first delta is relative to the profile startTime.
timeDeltas?: integer[];
}
नए वर्कफ़्लो की वजह से, डेवलपर को मौजूदा cpuprofile का विश्लेषण करने से नहीं रोका जाना चाहिए. इसलिए, परफ़ॉर्मेंस पैनल में अब ट्रेस फ़ाइलें और सीपीयू प्रोफ़ाइल, दोनों का इस्तेमाल किया जा सकता है. cpuprofile फ़ाइल को परफ़ॉर्मेंस में इंपोर्ट किया जा सकता है और यह सही तरीके से लोड हो जाएगी.
पर्दे के पीछे, हम रेगुलर एक्सप्रेशन का इस्तेमाल करके ऑब्जेक्ट की बनावट में अंतर का पता लगाते हैं. अगर फ़ाइल का कॉन्टेंट {"nodes":[ से शुरू होता है, तो यह सीपीयू प्रोफ़ाइल है. अगर ऐसा नहीं है, तो यह एक ट्रेस फ़ाइल है.
कॉन्टेंट के टाइप का पता चलने के बाद, हम उसे उसी हिसाब से प्रोसेस करते हैं. ट्रेस फ़ाइल के लिए, हम इवेंट को पार्स करके टाइमलाइन बनाते हैं. सीपीयू प्रोफ़ाइल के लिए, हम JSON ऑब्जेक्ट को पार्स करते हैं और फ़्लेम चार्ट बनाते हैं.
नतीजा
वेबसाइट और Node.js और Deno ऐप्लिकेशन, दोनों के लिए सीपीयू की परफ़ॉर्मेंस की प्रोफ़ाइल बनाने के साथ-साथ बेहतर प्रोफ़ाइल बनाने के लिए, परफ़ॉर्मेंस पैनल का इस्तेमाल करें.
अगर आपके पास कोई सुझाव या राय है, तो इस बग पर टिप्पणी करें या इनमें से किसी एक विकल्प का इस्तेमाल करके हमसे संपर्क करें.
झलक वाले चैनल डाउनलोड करना
Chrome Canary, Dev या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन झलक वाले चैनलों की मदद से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, इनसे आपको वेब प्लैटफ़ॉर्म के सबसे नए एपीआई की जांच करने में मदद मिलती है. इसके अलावा, इनकी मदद से उपयोगकर्ताओं से पहले ही अपनी साइट पर समस्याओं का पता लगाया जा सकता है!
Chrome DevTools की टीम से संपर्क करना
नई सुविधाओं, अपडेट या DevTools से जुड़ी किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, इन विकल्पों का इस्तेमाल करें.
- crbug.com पर जाकर, हमें सुझाव/राय दें या शिकायत करें. साथ ही, किसी सुविधा का अनुरोध करें.
- DevTools में ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी समस्या की शिकायत करें.
- @ChromeDevTools पर ट्वीट करें.
- DevTools के बारे में YouTube वीडियो में क्या नया है या DevTools के बारे में YouTube वीडियो में सलाह पर टिप्पणियां करें.