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

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

हमारा लक्ष्य पुराने JavaScript सीपीयू प्रोफ़ाइलर को हटाना और सभी को नए वर्कफ़्लो के साथ काम में जोड़ना है.

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

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

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

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

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

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

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

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

  3. इनमें से किसी एक तरीके का इस्तेमाल करके वीडियो रिकॉर्ड करें:

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

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

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

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

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

बहुत ज़्यादा (सबसे नीचे) व्यू, बॉटम-अप टैब में उपलब्ध होता है:

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

तीसरी इमेज. पुराने वर्कफ़्लो (बाएं) और नए वर्कफ़्लो (दाएं) में नीचे से ऊपर के व्यू के बीच मैप करना.

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

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

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