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

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

Chrome 58 में, जो अब कैनरी है

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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