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

Jecelyn Yeen

Chrome 100

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

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

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

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

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

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

डिफ़ॉल्ट रूप से सामान्य सिलेक्टर के साथ काम करना

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

• data-testid
• data-test
• data-qa
• data-cy
• data-test-id
• डेटा-qa-आईडी
• data-testing

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

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

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

रिकॉर्डिंग चुनने वाले टूल को अपनी पसंद के मुताबिक बनाएं

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

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

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

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

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

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

Chromium से जुड़ी समस्या: 1049947

परफ़ॉर्मेंस पैनल में कुछ फ़्रेम पेश किए गए

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

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

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

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

Chromium से जुड़ी समस्या: 1261130

अन्य हाइलाइट

इस रिलीज़ में, कुछ ऐसी समस्याएं ठीक की गई हैं जिन पर ध्यान देने की ज़रूरत है:

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

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

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

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

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

• crbug.com पर जाकर, हमें सुझाव/राय दें या शिकायत करें. साथ ही, किसी सुविधा का अनुरोध करें.
• DevTools में more_vert ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके DevTools से जुड़ी समस्या की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools YouTube वीडियो में नया क्या है या DevTools सलाह YouTube वीडियो पर टिप्पणी की जा सकती हैं.

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

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