Chrome 124 में, JavaScript प्रोफ़ाइलर पैनल बंद कर दिया जाएगा. आगे से, Node.js सीपीयू की परफ़ॉर्मेंस की प्रोफ़ाइल बनाने के लिए, परफ़ॉर्मेंस पैनल का इस्तेमाल करें.
हम JavaScript प्रोफ़ाइलर को बंद क्यों कर रहे हैं? (JS प्रोफ़ाइलर)
Chrome 58 के समय ही, DevTools की टीम ने JS Profiler को बंद करने का फ़ैसला लिया था. इसकी कई वजहें हो सकती हैं:
- इसे अब डेवलप नहीं किया जा रहा है. JS प्रोफ़ाइलर को कई सालों से कोई बड़ा अपडेट नहीं मिला है. साथ ही, टीम के पास इसे डेवलप करने के लिए संसाधन नहीं हैं.
- प्रोफ़ाइल बनाने का बेहतर अनुभव. परफ़ॉर्मेंस पैनल का इस्तेमाल, परफ़ॉर्मेंस के सभी तरह के विश्लेषण के लिए पहले से ही किया जा रहा है. साथ ही, Node.js में JavaScript सीपीयू की परफ़ॉर्मेंस की प्रोफ़ाइल बनाने की सुविधा के साथ, एक ही जगह पर सभी चीज़ों को इकट्ठा करना सही रहता है, ताकि परफ़ॉर्मेंस को बेहतर बनाया जा सके.
- परफ़ॉर्मेंस पैनल बेहतर है. हम इसमें नई सुविधाएं और बेहतर सुविधाएं जोड़कर इसे लगातार बेहतर बना रहे हैं. इससे, यह परफ़ॉर्मेंस का विश्लेषण करने के लिए, ज़्यादा असरदार और उपयोगकर्ता के हिसाब से बना टूल बन गया है.
बंद होने के बाद आपको क्या करना चाहिए?
JavaScript सीपीयू की परफ़ॉर्मेंस की प्रोफ़ाइल बनाने के तरीके के बारे में ज़्यादा जानने के लिए, Node.js की परफ़ॉर्मेंस की प्रोफ़ाइल बनाना लेख पढ़ें.
परफ़ॉर्मेंस पैनल का इस्तेमाल करने के लिए, यहां कुछ सलाह दी गई हैं:
- परफ़ॉर्मेंस में आने वाली रुकावटों की पहचान करने के लिए, फ़्लेम चार्ट का इस्तेमाल करें.
- फ़ंक्शन के बीच के संबंधों को समझने के लिए, बॉटम-अप और कॉल ट्री टैब का इस्तेमाल करें.
हम बंद होने की प्रक्रिया को कैसे मैनेज करते हैं?
हमने एक प्रोटोटाइप बनाया और डेवलपर से सुझाव या राय लेने के लिए, GitHub पर सार्वजनिक तौर पर टिप्पणियों का अनुरोध (आरएफ़सी) पब्लिश किया.
इसके अलावा, हम प्रोटोटाइप की जांच करने के लिए डेवलपर विशेषज्ञों से संपर्क करते हैं. साथ ही, किसी भी तरह की समस्या को हल करते हैं, ताकि यह पक्का किया जा सके कि परफ़ॉर्मेंस पैनल, प्रोफ़ाइल बनाने से जुड़ी ज़रूरी शर्तों को पूरा करता है.
हम JS प्रोफ़ाइलर को चार चरणों में धीरे-धीरे बंद कर रहे हैं, ताकि डेवलपर को बदलावों के हिसाब से अडजस्ट करने और उन्हें अपनाने का ज़रूरत के मुताबिक समय मिल सके.
मुख्य समस्याएं और हमने उन्हें कैसे ठीक किया
हमें मिले सुझावों, राय या शिकायतों में, सबसे ज़्यादा तीन मुख्य समस्याओं के बारे में बताया गया है:
.cpuprofileफ़ाइल फ़ॉर्मैट का इस्तेमाल किया जा सकता है. JS प्रोफ़ाइलर, किसी दूसरे फ़ाइल फ़ॉर्मैट का इस्तेमाल करता है. परफ़ॉर्मेंस पैनल में यह सुविधा काम करनी चाहिए.- लोड होने में ज़्यादा समय लगना. पैनल लोड होने में ज़्यादा समय लग रहा था, जिससे प्रोफ़ाइल बनाने की प्रोसेस में रुकावट आ रही थी.
- JavaScript वीएम सिलेक्टर मौजूद नहीं है. JavaScript वीएम इंस्टेंस सिलेक्टर की मौजूदगी न होने की वजह से, कुछ मामलों में प्रोफ़ाइलिंग की सुविधाएं सीमित हो गई हैं.
आइए, इनमें से हर समस्या के बारे में जानें और देखें कि हमने उन्हें कैसे ठीक किया.
धीमी लोडिंग स्पीड
डेवलपर ने हमें बताया कि परफ़ॉर्मेंस पैनल में बड़ी डेटा फ़ाइलें लोड होने में काफ़ी समय लगता है. साथ ही, कभी-कभी यह क्रैश भी हो जाता है.
हमने DevTools का विश्लेषण करने के लिए, DevTools का इस्तेमाल किया. हम इसे "DevTools-on-DevTools" कहते हैं. हमें कुछ समस्याएं मिली हैं और हमने कई ऑप्टिमाइज़ेशन किए हैं:
SetकोArrayडेटा स्ट्रक्चर से बदल दिया गया.- ग़ैर-ज़रूरी
Mapडेटा स्ट्रक्चर हटा दिए गए हैं. - मेमोरी स्टैक के इस्तेमाल को कम करने के लिए, बार-बार दोहराए जाने वाले फ़ंक्शन को बार-बार इस्तेमाल होने वाले फ़ंक्शन (for लूप) में बदला गया.
इन समस्याओं को ठीक करके, हमने बड़ी फ़ाइलों को 80% तेज़ी से लोड करने की सुविधा जोड़ी है! 🎉
इस ब्लॉग पोस्ट में, हमें जो जानकारी मिली उसके बारे में ज़्यादा पढ़ें: परफ़ॉर्मेंस पैनल को 400% तेज़ करने वाला, परफ़ॉर्मेंस से जुड़ी अहम जानकारी देने वाला टूल.
JavaScript वीएम सिलेक्टर मौजूद नहीं है
शुरुआती प्रोटोटाइप में JavaScript VM सिलेक्टर मौजूद नहीं था. डेवलपर इसका इस्तेमाल, किसी खास VM इंस्टेंस का विश्लेषण करने के लिए करते हैं.
हमने परफ़ॉर्मेंस पैनल में, JavaScript VM सिलेक्टर जोड़ा है. यह सभी उपलब्ध 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 कैनरी, डेवलपर या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन झलक वाले चैनलों की मदद से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, इनसे आपको वेब प्लैटफ़ॉर्म के सबसे नए एपीआई की जांच करने में मदद मिलती है. इसके अलावा, इनकी मदद से उपयोगकर्ताओं से पहले ही अपनी साइट पर समस्याओं का पता लगाया जा सकता है!
Chrome DevTools की टीम से संपर्क करना
DevTools से जुड़ी नई सुविधाओं, अपडेट या किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, यहां दिए गए विकल्पों का इस्तेमाल करें.
- crbug.com पर जाकर, हमें सुझाव/राय दें या शिकायत करें. साथ ही, किसी सुविधा का अनुरोध करें.
- DevTools में ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी समस्या की शिकायत करें.
- @ChromeDevTools पर ट्वीट करें.
- DevTools के YouTube वीडियो में नया क्या है या DevTools के बारे में सलाह देने वाले YouTube वीडियो पर टिप्पणियां करें.