इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

Jecelyn Yeen

Chrome 100

पेश है Chrome का 100वां वर्शन! Chrome DevTools, डेवलपर के लिए भरोसेमंद टूल उपलब्ध कराता रहेगा, ताकि आप उन्हें वेब पर बना सकें. इन उपलब्धियों का जश्न मनाने के लिए, नया क्या है टैब पर क्लिक करें.

हमेशा की तरह, इमेज पर क्लिक करके, DevTools में नया क्या है वीडियो देखा जा सकता है.

स्टाइल पैनल में नियमों पर @supports की जानकारी देखें और उसमें बदलाव करें

अब आपके पास स्टाइल पैनल में, सीएसएस @supports के नियमों को देखने और उनमें बदलाव करने का विकल्प है. ये बदलाव, रीयल टाइम में नियमों के इस्तेमाल को आसान बनाते हैं. इस डेमो पेज को खोलें और <div class=”box”> एलिमेंट की inspect. इसके बाद, स्टाइल पैनल में @supports के नियम देखें. नियम के एलान पर क्लिक करके उसमें बदलाव करें.

नियमों में @supports की जानकारी देखें और उसमें बदलाव करें

Chromium से जुड़ी समस्याएं: 1222574, 1222573

रिकॉर्डर पैनल में किए गए सुधार

सामान्य सिलेक्टर को डिफ़ॉल्ट तौर पर इस्तेमाल करें

रिकॉर्डिंग के दौरान यूनीक सिलेक्टर तय करते समय, Recorder पैनल अब अपने-आप इन एट्रिब्यूट वाले एलिमेंट को प्राथमिकता देता है:

डेटा-टेस्टिड
डेटा-टेस्ट
data-qa
data-cy
data-test-id
data-qa-id
डेटा-टेस्टिंग

ऊपर दिए गए एट्रिब्यूट, टेस्ट ऑटोमेशन में इस्तेमाल किए जाने वाले सामान्य सिलेक्टर हैं.

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

ईमेल एलिमेंट में data-testid तय किया गया है, इसलिए इसका इस्तेमाल id या class एट्रिब्यूट के बजाय, अपने-आप चुनने वाले विकल्प के तौर पर किया जाता है.

सामान्य सिलेक्टर को डिफ़ॉल्ट तौर पर इस्तेमाल करें

रिकॉर्डिंग के सिलेक्टर को पसंद के मुताबिक बनाना

अगर सामान्य सिलेक्टर का इस्तेमाल नहीं किया जा रहा है, तो रिकॉर्डिंग के सिलेक्टर को अपनी पसंद के मुताबिक बनाया जा सकता है.

उदाहरण के लिए, यह डेमो पेज, सिलेक्टर के तौर पर data-automate एट्रिब्यूट का इस्तेमाल करता है. नई रिकॉर्डिंग शुरू करें और सिलेक्टर वाले एट्रिब्यूट के तौर पर data-automate डालें. कोई ईमेल पता भरें और सिलेक्टर की वैल्यू ([data-automate=email-address]) देखें.

रिकॉर्डिंग के सिलेक्टर को पसंद के मुताबिक बनाना

कस्टम सिलेक्टर चुनने से मिला नतीजा

रिकॉर्डिंग का नाम बदलना

अब Recorder पैनल में रिकॉर्डिंग का नाम बदला जा सकता है. नाम बदलने के लिए, रिकॉर्डिंग के टाइटल के बगल में मौजूद 'बदलाव करें' बटन (पेंसिल आइकॉन) का इस्तेमाल करें.

रिकॉर्डिंग का नाम बदलना

कर्सर घुमाने पर, क्लास/फ़ंक्शन प्रॉपर्टी की झलक देखें

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

कर्सर घुमाने पर, क्लास/फ़ंक्शन प्रॉपर्टी की झलक देखें

Chromium की समस्या: 1049947

परफ़ॉर्मेंस पैनल में ऐसे फ़्रेम जिनका कुछ हिस्सा दिखाया गया है

परफ़ॉर्मेंस रिकॉर्डिंग की सुविधा चालू होने पर अब फ़्रेम टाइमलाइन में, "कुछ हिस्से पर दिखाए गए फ़्रेम" वाली नई फ़्रेम कैटगरी दिखेगी.

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

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

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

परफ़ॉर्मेंस पैनल में ऐसे फ़्रेम जिनका कुछ हिस्सा दिखाया गया है

Chromium की समस्या: 1261130

अन्य हाइलाइट

इस रिलीज़ में ये कुछ अहम सुधार हैं:

सिम्युलेट किए गए डिवाइसों के लिए, iPhone की उपयोगकर्ता एजेंट स्ट्रिंग को अपडेट किया गया. पांच के बाद के सभी iPhone वर्शन में, iPhone OS 13_2_3 वाली उपयोगकर्ता एजेंट स्ट्रिंग होती है. (1289553)
अब स्निपेट को सीधे JavaScript फ़ाइल के तौर पर सेव किया जा सकता है. पहले, आपको .js फ़ाइल एक्सटेंशन को मैन्युअल तरीके से जोड़ना पड़ता था. (1137218)
अब सोर्स पैनल, सोर्स मैप से डीबग करते समय स्कोप वैरिएबल के नाम को सही तरीके से दिखाता है. पहले, सोर्स पैनल, सोर्स मैप उपलब्ध कराने के बावजूद छोटे किए गए स्कोप वैरिएबल के नाम दिखाता है. (1294682)
सोर्स पैनल, अब पेज लोड होने पर स्क्रोल की पोज़िशन को सही तरीके से फिर से शुरू कर देता है. पहले, पोज़िशन को ठीक से वापस नहीं लाया गया था. इस वजह से, डीबग करने में परेशानी होती थी. (1294422)

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

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

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

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

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