DevTools (Chrome 64) में नया क्या है

Kayce Basques
Kayce Basques
X GitHub

आपका फिर से स्वागत है! Chrome 64 में DevTools में आने वाली नई सुविधाओं में ये शामिल हैं:

यहां पढ़ें या रिलीज़ नोट का वीडियो वर्शन देखें.

परफ़ॉर्मेंस मॉनिटर

परफ़ॉर्मेंस मॉनिटर का इस्तेमाल करके, पेज के लोड या रनटाइम परफ़ॉर्मेंस के अलग-अलग पहलुओं को रीयल-टाइम में देखें. इनमें ये शामिल हैं:

  • सीपीयू का इस्तेमाल.
  • JavaScript हीप का साइज़.
  • पेज पर मौजूद डीओएम नोड, JavaScript इवेंट लिसनर, दस्तावेज़, और फ़्रेम की कुल संख्या.
  • हर सेकंड में लेआउट और स्टाइल को फिर से कैलकुलेट करने की संख्या.

अगर उपयोगकर्ताओं का कहना है कि आपका ऐप्लिकेशन धीमा या रुक-रुककर चल रहा है, तो इसकी वजह जानने के लिए परफ़ॉर्मेंस मॉनिटर देखें.

लोडिंग की परफ़ॉर्मेंस क्यों मायने रखती है: BookMyShow ने तेज़ी पर फ़ोकस करने वाला प्रोग्रेसिव वेब ऐप्लिकेशन बनाया, जिससे उन्हें कन्वर्ज़न में 80% की बढ़ोतरी हुई. ज़्यादा जानें.

परफ़ॉर्मेंस मॉनिटर का इस्तेमाल करने के लिए:

  1. कमांड मेन्यू खोलें.

  2. Performance टाइप करना शुरू करें. इसके बाद, Show Performance Monitor चुनें.

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

  3. किसी मेट्रिक को दिखाने या छिपाने के लिए, उस पर क्लिक करें. पहले चित्र में, सीपीयू के इस्तेमाल, जेएस हीप साइज़, और जेएस इवेंट लिसनर चार्ट दिखाए गए हैं.

मिलती-जुलती सुविधाएं:

  • परफ़ॉर्मेंस पैनल. उपयोगकर्ता की गतिविधि को ध्यान में रखते हुए, पेज पर होने वाली हर गतिविधि को रिकॉर्ड करें. इसमें JavaScript गतिविधि, नेटवर्क अनुरोध, सीपीयू का इस्तेमाल वगैरह शामिल है. इसका इस्तेमाल, लोड की परफ़ॉर्मेंस का विश्लेषण करने के लिए भी किया जा सकता है. ज़्यादा जानें.
  • ऑडिट पैनल. किसी भी यूआरएल के लिए, लोड और रनटाइम परफ़ॉर्मेंस की जांच करने वाले ऑटोमेटेड टेस्ट चलाएं. ज़्यादा जानें.

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

कंसोल साइडबार

बड़ी साइटों पर, Console में तुरंत काम के नहीं होने वाले मैसेज की संख्या बढ़ सकती है. कंसोल के नए साइडबार का इस्तेमाल करके, ग़ैर-ज़रूरी मैसेज को हटाएं और अपने लिए ज़रूरी मैसेज पर फ़ोकस करें.

सिर्फ़ गड़बड़ी के मैसेज दिखाने के लिए, कंसोल साइडबार का इस्तेमाल करना

दूसरी इमेज. सिर्फ़ गड़बड़ी के मैसेज दिखाने के लिए, कंसोल साइडबार का इस्तेमाल करना

कंसोल साइडबार डिफ़ॉल्ट रूप से छिपा होता है. इसे दिखाने के लिए, कंसोल साइडबार दिखाएं कंसोल साइडबार दिखाना पर क्लिक करें.

मिलती-जुलती सुविधाएं:

  • फ़िल्टर करें टेक्स्ट बॉक्स. कोई टेक्स्ट डालें. इसके बाद, Console सिर्फ़ उस टेक्स्ट वाले मैसेज दिखाएगा. यह रेगुलर एक्सप्रेशन पैटर्न, नेगेटिव फ़िल्टर, और यूआरएल फ़िल्टर के साथ भी काम करता है.

मिलते-जुलते कंसोल मैसेज का ग्रुप बनाना

Console अब मिलते-जुलते मैसेज को डिफ़ॉल्ट रूप से एक साथ ग्रुप करता है. उदाहरण के लिए, तीसरे चित्र में मैसेज [Violation] Avoid using document.write() के 27 उदाहरण हैं.

कंसोल में एक जैसे मैसेज को एक साथ ग्रुप करने का उदाहरण

तीसरी इमेज. कंसोल में एक जैसे मैसेज को एक साथ ग्रुप करने का उदाहरण

किसी ग्रुप को बड़ा करके, मैसेज का हर इंस्टेंस देखने के लिए उस पर क्लिक करें.

Console के मैसेज के बड़े किए गए ग्रुप का उदाहरण

चौथी इमेज. Console के मैसेज के बड़े किए गए ग्रुप का उदाहरण

इस सुविधा को बंद करने के लिए, मिलते-जुलते चेहरों की पहचान करके ग्रुप बनाएं चेकबॉक्स से सही का निशान हटाएं.

मिलती-जुलती सुविधाएं:

  • console.group() की मदद से, अपने Console मैसेज को ग्रुप किया जा सकता है.

स्थानीय बदलाव

ओह! हमने इस सुविधा को Chrome 64 में लॉन्च करने के लिए शेड्यूल किया था. हालांकि, इसमें कुछ समस्याएं आ रही थीं, इसलिए हमने इसे लॉन्च करने की समयसीमा खत्म होने से कुछ समय पहले ही लॉन्च कर दिया है. ऐसा लगता है कि'नया क्या है' पेज का यूज़र इंटरफ़ेस (यूआई) समय पर अपडेट नहीं हुआ. माफ़ करें!

यह सुविधा Chrome 65 में उपलब्ध होगी. यह Chrome 64 के रिलीज़ होने के करीब छह हफ़्ते बाद रिलीज़ होगी. ज़्यादा जानने के लिए, स्थानीय बदलाव देखें. अगर आपके पास Windows या Mac है, तो Chrome Canary डाउनलोड करके, Chrome 65 को अभी आज़माया जा सकता है.

झलक वाले चैनल डाउनलोड करना

अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर, Chrome कैनरी, डेवलपर या बीटा का इस्तेमाल करें. इन झलक वाले चैनलों की मदद से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, इनसे आपको वेब प्लैटफ़ॉर्म के सबसे नए एपीआई की जांच करने में मदद मिलती है. साथ ही, इससे आपको अपनी साइट पर उपयोगकर्ताओं से पहले समस्याओं का पता लगाने में मदद मिलती है!

Chrome DevTools की टीम से संपर्क करना

DevTools से जुड़ी नई सुविधाओं, अपडेट या किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, यहां दिए गए विकल्पों का इस्तेमाल करें.

DevTools में नया क्या है

DevTools में नया क्या है सीरीज़ में शामिल सभी चीज़ों की सूची.