Chrome DevTools: Chrome 58 में JavaScript सीपीयू प्रोफ़ाइलिंग

फ़िलहाल, Canary के तौर पर उपलब्ध Chrome 58 में, टाइमलाइन पैनल का नाम बदलकर परफ़ॉर्मेंस पैनल कर दिया गया है. साथ ही, प्रोफ़ाइल पैनल का नाम बदलकर मेमोरी पैनल कर दिया गया है. इसके अलावा, प्रोफ़ाइल पैनल में मौजूद JavaScript सीपीयू प्रोफ़ाइल रिकॉर्ड करने की सुविधा को ज़्यादा छिपी हुई जगह पर ले जाया गया है.

हमारा मकसद, पुराने JavaScript सीपीयू प्रोफ़ाइलर को हटाना और सभी को नए वर्कफ़्लो के साथ काम करना सिखाना है.

माइग्रेशन से जुड़ी इस छोटी गाइड में, परफ़ॉर्मेंस पैनल में JS प्रोफ़ाइल रिकॉर्ड करने का तरीका बताया गया है. साथ ही, यह भी बताया गया है कि परफ़ॉर्मेंस पैनल का यूज़र इंटरफ़ेस (यूआई), आपके पुराने वर्कफ़्लो से कैसे मैप होता है.

JavaScript का पुराना सीपीयू प्रोफ़ाइलर ऐक्सेस करना

अगर आपको प्रोफ़ाइल पैनल पर उपलब्ध, "JavaScript सीपीयू प्रोफ़ाइल रिकॉर्ड करें" का पुराना वर्कफ़्लो पसंद है, तो इसे अब भी इस तरह ऐक्सेस किया जा सकता है:

  1. DevTools का मुख्य मेन्यू खोलें.
  2. ज़्यादा टूल > JavaScript प्रोफ़ाइलर चुनें. पुराना प्रोफ़ाइलर, JavaScript प्रोफ़ाइलर नाम के नए पैनल में खुलता है.

JS प्रोफ़ाइल रिकॉर्ड करने का तरीका

  1. DevTools खोलें.
  2. परफ़ॉर्मेंस टैब पर क्लिक करें.

    Chrome DevTools का परफ़ॉर्मेंस पैनल

    पहली इमेज. परफ़ॉर्मेंस पैनल.

  3. इनमें से किसी एक तरीके से रिकॉर्ड करें:

    • पेज लोड करने की प्रोफ़ाइल बनाने के लिए, पेज लोड रिकॉर्ड करें पर क्लिक करें. DevTools, रिकॉर्डिंग अपने-आप शुरू करता है और पेज लोड होने के बाद, अपने-आप बंद हो जाता है.
    • किसी पेज की प्रोफ़ाइल बनाने के लिए, रिकॉर्ड करें पर क्लिक करें. इसके बाद, वे कार्रवाइयां करें जिनकी आपको प्रोफ़ाइल बनानी है. जब आपका काम हो जाए, तो बंद करें पर क्लिक करें.

पुराना वर्कफ़्लो, नए वर्कफ़्लो से कैसे मैप होता है

नीचे दिए गए स्क्रीनशॉट में, पुराने वर्कफ़्लो के चार्ट व्यू से, नए वर्कफ़्लो में सीपीयू के इस्तेमाल की खास जानकारी वाले चार्ट (ऊपर वाला ऐरो) और फ़्लेम चार्ट (नीचे वाला ऐरो) की स्थिति दिख रही है.

पुराने वर्कफ़्लो और नए वर्कफ़्लो में फ़्लेम चार्ट के बीच मैपिंग.

दूसरी इमेज. पुराने वर्कफ़्लो (बाईं ओर) और नए वर्कफ़्लो (दाईं ओर) में फ़्लेम चार्ट के बीच मैपिंग.

भारी (बॉटम अप) व्यू, बॉटम-अप टैब में उपलब्ध है:

पुराने वर्कफ़्लो और नए वर्कफ़्लो में, बॉटम-अप व्यू के बीच मैपिंग.

तीसरी इमेज. पुराने वर्कफ़्लो (बाईं ओर) और नए वर्कफ़्लो (दाईं ओर) में, बॉटम-अप व्यू के बीच मैपिंग.

ट्री (टॉप डाउन) व्यू, कॉल ट्री टैब में उपलब्ध है:

पुराने वर्कफ़्लो और नए वर्कफ़्लो में, ट्री व्यू के बीच मैपिंग.

चौथी इमेज. पुराने वर्कफ़्लो (बाईं ओर) और नए वर्कफ़्लो (दाईं ओर) में ट्री व्यू के बीच मैपिंग.