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

Jecelyn Yeen

Chrome 100

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

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

स्टाइल पैनल में, @supports ऐट रूल देखना और उनमें बदलाव करना

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

@supports ऐट रूल देखना और उनमें बदलाव करना

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

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

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

रिकॉर्डिंग के दौरान यूनीक सिलेक्टर तय करते समय, 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 Canary, Dev या Beta को डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन प्रीव्यू चैनलों से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, आपको वेब प्लैटफ़ॉर्म के नए एपीआई को आज़माने का मौका मिलता है. इसके अलावा, आपको अपनी साइट पर मौजूद समस्याओं का पता लगाने में मदद मिलती है. इससे पहले कि आपके उपयोगकर्ता उन समस्याओं का पता लगाएं!

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

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

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

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