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

Jecelyn Yeen

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

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

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

Elements पैनल में, @container ऐट-रूल वाले डीओएम एलिमेंट पर क्लिक करें. अब DevTools, @container की जानकारी को Styles पैन में दिखाता है. आकार में बदलाव करने के लिए, इस पर क्लिक करें. स्टाइल पैनल में, इससे जुड़े कंटेनर की जानकारी भी दिखती है. कंटेनर एलिमेंट को हाइलाइट करने के लिए, उस पर कर्सर घुमाएं. साथ ही, कंटेनर का साइज़ देखें. कंटेनर एलिमेंट को चुनने के लिए, उस पर क्लिक करें.

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

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

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

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

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

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

वेब बंडल की झलक

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

Attribution Reporting API को डीबग करना

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

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

'समस्याएं' टैब में, Attribution Reporting API से जुड़ी गड़बड़ियां

Chromium की समस्या: 1190735

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

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

Console में नया कॉन्टेक्स्ट मेन्यू

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

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

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

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

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

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

सीओआरएस से जुड़ी गड़बड़ी के मैसेज के बगल में मौजूद आइकॉन

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

Lighthouse 8.1

Lighthouse पैनल अब Lighthouse 8.1 पर चल रहा है.

लाइटहाउस

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

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

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

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

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

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

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

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

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

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

सीएसएस मैचिंग सिलेक्टर ठीक किए गए

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

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

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

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

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

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

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

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

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

Chromium की गड़बड़ी: 998674

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

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

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

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

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

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