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

Jecelyn Yeen

स्टाइल पैनल में, बदलाव की जा सकने वाली सीएसएस कंटेनर क्वेरी

अब स्टाइल पैनल में, सीएसएस कंटेनर क्वेरी देखी जा सकती हैं और उनमें बदलाव किया जा सकता है.

कंटेनर क्वेरी, रिस्पॉन्सिव डिज़ाइन के लिए ज़्यादा डाइनैमिक तरीका उपलब्ध कराती हैं. @container at-rule, @media वाली मीडिया क्वेरी की तरह ही काम करता है. हालांकि, जानकारी के लिए व्यूपोर्ट और उपयोगकर्ता एजेंट से क्वेरी करने के बजाय, @container कुछ शर्तों से मेल खाने वाले पैरंट कंटेनर से क्वेरी करता है.

एलिमेंट पैनल में, @container at-rule वाले डीओएम एलिमेंट पर क्लिक करें. इसके बाद, DevTools स्टाइल पैनल में @container की जानकारी दिखाएगा. साइज़ में बदलाव करने के लिए, उस पर क्लिक करें. स्टाइल पैनल में, उससे जुड़े कंटेनर की जानकारी भी दिखती है. पेज पर कंटेनर एलिमेंट को हाइलाइट करने और कंटेनर का साइज़ देखने के लिए, उस पर कर्सर घुमाएं. कंटेनर एलिमेंट चुनने के लिए उस पर क्लिक करें.

फ़िलहाल, कंटेनर क्वेरी की सुविधा एक्सपेरिमेंट के तौर पर उपलब्ध है. इसकी जांच करने के लिए, कृपया chrome://flags में जाकर #enable-container-queries फ़्लैग को चालू करें.

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

नेटवर्क पैनल में वेब बंडल की झलक

वेब बंडल एक फ़ाइल फ़ॉर्मैट है. इसका इस्तेमाल, एक या उससे ज़्यादा एचटीटीपी संसाधनों को एक ही फ़ाइल में शामिल करने के लिए किया जाता है. अब नेटवर्क पैनल में, वेब बंडल कॉन्टेंट की झलक देखी जा सकती है.

फ़िलहाल, वेब बंडल की सुविधा एक्सपेरिमेंट के तौर पर उपलब्ध है. इसकी जांच करने के लिए, कृपया chrome://flags में जाकर #enable-experimental-web-platform-features फ़्लैग को चालू करें.

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

Attribution Reporting API की डीबगिंग

Attribution Reporting API की गड़बड़ियों की जानकारी अब समस्याएं टैब में दी गई है.

एट्रिब्यूशन रिपोर्टिंग एक नया एपीआई है. इसकी मदद से, यह मेज़र किया जा सकता है कि किसी उपयोगकर्ता की कार्रवाई (जैसे, विज्ञापन पर क्लिक या व्यू) से कन्वर्ज़न कब होता है. इसके लिए, क्रॉस-साइट आइडेंटिफ़ायर का इस्तेमाल नहीं किया जाता.

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

Console में स्ट्रिंग को बेहतर तरीके से मैनेज करना

कंसोल में नए कॉन्टेक्स्ट मेन्यू की मदद से, किसी भी स्ट्रिंग को कॉन्टेंट, JavaScript लिटरल या JSON लिटरल के तौर पर कॉपी किया जा सकता है.

Chrome 90 में, DevTools ने कंसोल को अपडेट किया है, ताकि स्ट्रिंग आउटपुट को हमेशा मान्य JSON लिटरल के तौर पर फ़ॉर्मैट किया जा सके. हमें डेवलपर से सुझाव मिला है कि यह बदलाव भ्रम पैदा कर सकता है. कुछ लोगों को लगता है कि एस्केप करने की संख्या ज़्यादा है और इससे आउटपुट को पढ़ा नहीं जा सकता.

कंसोल अब स्ट्रिंग आउटपुट को मान्य JavaScript लिटरल के तौर पर फ़ॉर्मैट करता है. साथ ही, आपको स्ट्रिंग कॉपी करने के तीन विकल्प भी देता है. JavaScript लिटरल के तौर पर कॉपी करें विकल्प, स्ट्रिंग के कॉन्टेंट के हिसाब से, स्ट्रिंग को सिंगल कोट, डबल कोट या बैकटिक में रैप कर देगा. साथ ही, स्ट्रिंग में मौजूद खास वर्णों को एस्केप कर देगा. स्ट्रिंग के कॉन्टेंट कॉपी करें सुविधा, रॉ स्ट्रिंग के कॉन्टेंट को क्लिपबोर्ड पर हूबहू कॉपी करती है. इसमें नई लाइनें और अन्य खास वर्ण भी शामिल होते हैं. आखिर में, JSON लिटरल के तौर पर कॉपी करें विकल्प, स्ट्रिंग को मान्य JSON लिटरल के तौर पर फ़ॉर्मैट करता है और उसे क्लिपबोर्ड पर कॉपी करता है.

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

सीओआरएस डीबग करने की बेहतर सुविधा

कंसोल में, सीओआरएस से जुड़ी TypeErrors अब नेटवर्क पैनल और समस्याओं वाले टैब से लिंक की गई हैं.

नेटवर्क अनुरोध देखने के लिए, CORS से जुड़ी गड़बड़ी के मैसेज के बगल में मौजूद दो नए आइकॉन पर क्लिक करें. इसके अलावा, गड़बड़ी के मैसेज को बेहतर तरीके से समझने और समस्याओं के टैब में संभावित समाधान पाने के लिए भी इन आइकॉन पर क्लिक करें.

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

Lighthouse 8.1

Lighthouse पैनल में अब Lighthouse 8.1 का इस्तेमाल किया जा रहा है.

अगर आपकी साइट, Lighthouse को सोर्स मैप दिखाती है, तो ट्रीमैप देखें बटन ढूंढें. इससे, आपको शिप किए गए JavaScript का ब्रेकडाउन दिखेगा. इसे लोड होने पर, साइज़ और कवरेज के हिसाब से फ़िल्टर किया जा सकता है.

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

परफ़ॉर्मेंस कैटगरी में, स्कोरिंग के कई बदलाव किए गए हैं. इन बदलावों का मकसद, परफ़ॉर्मेंस के अन्य टूल के साथ अलाइन करना और वेब की स्थिति को बेहतर तरीके से दिखाना है.

बदलावों की पूरी सूची के लिए, रिलीज़ नोट देखें.

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

मेनिफ़ेस्ट पैनल में नए नोट का यूआरएल दिखाना

मेनिफ़ेस्ट पैनल में अब नया नोट यूआरएल दिखता है.

फ़िलहाल, ChromeOS (CrOS) पर "नया नोट" सुविधा देने वाले Chrome ऐप्लिकेशन और Android ऐप्लिकेशन को, स्टाइलस की सेटिंग में नोट लेने वाले ऐप्लिकेशन के तौर पर चुना जा सकता है. यह सुविधा तब दिखती है, जब CrOS डिवाइस का इस्तेमाल स्टाइलस के साथ किया गया हो. नोट लेने वाले ऐप्लिकेशन के तौर पर चुने जाने पर, ऐप्लिकेशन को स्टाइलस पैलेट के "नोट बनाएं" बटन से लॉन्च किया जा सकता है. ऐप्लिकेशन मेनिफ़ेस्ट में new-note-url फ़ील्ड जोड़ने का मकसद, वेब ऐप्लिकेशन में मिलती-जुलती सुविधाएं जोड़ना है.

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

सीएसएस मैच करने वाले सिलेक्टर को ठीक किया गया

DevTools में, सीएसएस मैचिंग सिलेक्टर की समस्या को ठीक कर दिया गया है. यह समस्या पिछली रिलीज़ में काम नहीं कर रही थी.

स्टाइल पैनल में, कॉमा से अलग किए गए सिलेक्टर अलग-अलग रंग के होते हैं. यह इस बात पर निर्भर करता है कि वे चुने गए डीओएम नोड से मैच करते हैं या नहीं:

• मैच न करने वाले हिस्से को हल्के स्लेटी रंग में दिखाया जाता है.
• मैच करने वाले चुनने वाले हिस्से को काले रंग में दिखाया जाता है.

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

नेटवर्क पैनल में JSON रिस्पॉन्स को प्रीटी-प्रिंट करना

अब नेटवर्क पैनल में, JSON रिस्पॉन्स को प्रीटी प्रिंट किया जा सकता है.

नेटवर्क पैनल में JSON रिस्पॉन्स खोलें. इसके बाद, उसे प्रीटी प्रिंट करने के लिए {} आइकॉन पर क्लिक करें.

Chromium में मौजूद गड़बड़ी: 998674

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

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

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

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

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

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

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