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

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

Chrome 100

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

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

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

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

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

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

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

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

• data-testid
• data-test
• data-qa
• डेटा-साय
• 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 वीडियो में नया क्या है, इस पर टिप्पणी करें.

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

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