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 अपने-आप रिकॉर्डिंग शुरू करता है. पेज लोड होने का पता चलने पर, यह अपने-आप बंद हो जाता है.
    • चल रहे पेज की प्रोफ़ाइल बनाने के लिए, रिकॉर्ड करें पर क्लिक करें, वे कार्रवाइयां करें जिन्हें आप प्रोफ़ाइल बनाना चाहते हैं, और काम पूरा हो जाने पर बंद करें पर क्लिक करें.

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

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

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

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

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

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

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

अगर हमसे कोई सुविधा छूट गई हो या इस लेख के बारे में आपका कोई सवाल हो, तो Twitter पर @ChromeDevTools को पिंग करें या अपने दस्तावेज़ रेपो पर GitHub से जुड़ी समस्या खोलें.