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

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

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

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

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

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

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

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

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

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

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

लोकल ओवरराइड

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

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

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

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

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

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

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

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