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

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

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

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

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

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