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

Jecelyn Yeen

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

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

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

एलिमेंट पैनल में, @container नियम वाले DOM एलिमेंट पर क्लिक करें. 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 अब नेटवर्क पैनल और 'समस्याएं' टैब से लिंक कर दी गई हैं.

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

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

लाइटहाउस 8.1

Lighthouse पैनल अब लाइटहाउस 8.1 पर चल रहा है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

नेटवर्क पैनल में, JSON के जवाबों को प्रिटी-प्रिंटिंग से जोड़ा जा सकता है

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

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

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

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

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

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

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

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

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

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