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

Jecelyn Yeen

Chrome 100

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

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

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

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

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

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

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

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

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

  • data-testid
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • 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 से जुड़ी नई सुविधाओं, अपडेट या किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, यहां दिए गए विकल्पों का इस्तेमाल करें.

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

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