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

काइस बास्क
केएस बास्क

Chrome 58 में, जो फ़िलहाल कैनरी है

लंबे समय का लक्ष्य, पुराने JavaScript CPU प्रोफ़ाइलर को हटाना और नए वर्कफ़्लो पर काम करने वाले सभी लोगों को बढ़ावा देना है.

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

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

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

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

JS प्रोफ़ाइल कैसे रिकॉर्ड करें

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

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

    पहला डायग्राम. परफ़ॉर्मेंस पैनल.

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

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

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

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

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

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

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

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

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

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

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

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