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

Kayce Basques

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

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

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

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

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

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

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

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

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

1. Command मेन्यू खोलें.

2. Performance टाइप करना शुरू करें, फिर Show Performance Monitor चुनें.

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

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

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

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

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

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

बड़ी साइटों पर, कंसोल में तेज़ी से ऐसे मैसेज दिख सकते हैं जो काम के नहीं हैं. नए कंसोल का इस्तेमाल करना साइडबार का इस्तेमाल करें, ताकि शोर कम किया जा सके और उन मैसेज पर फ़ोकस किया जा सके जो आपके लिए ज़रूरी हैं.

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

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

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

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

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

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

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

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

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

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

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

• console.group() का इस्तेमाल करके, अपने कंसोल मैसेज का ग्रुप बनाया जा सकता है.

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

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

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

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

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

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

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

• crbug.com के ज़रिए हमें कोई सुझाव या फ़ीडबैक सबमिट करें.
• ज़्यादा विकल्प   > का इस्तेमाल करके DevTools से जुड़ी समस्या की शिकायत करें सहायता > DevTools में DevTools से जुड़ी समस्याओं की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools YouTube वीडियो या DevTools के बारे में सलाह YouTube वीडियो में नया क्या है, इस पर टिप्पणी करें.

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

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