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

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट, परफ़ॉर्मेंस पैनल में पॉप-अप होती है

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

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

सीएसएस स्क्रोल-स्नैप को विज़ुअलाइज़ करें

सीएसएस स्क्रोल-स्नैप अलाइनमेंट की जांच करने के लिए, अब एलिमेंट पैनल में scroll-snap बैज को टॉगल किया जा सकता है.

जब आपके पेज के किसी एचटीएमएल एलिमेंट (जैसे, इस demo पेज) पर scroll-snap-type लागू होता है, तो आपको एलिमेंट पैनल में उसके बगल में scroll-snap बैज दिख सकता है. पेज पर स्क्रोल-स्नैप ओवरले के डिसप्ले को टॉगल करने के लिए बैज पर क्लिक करें.

ऊपर दिए गए उदाहरण में, आपको स्नैप के किनारों पर बिंदु के निशान दिख सकते हैं. स्नैप आइटम में डैश की आउटलाइन है और स्क्रोल पोर्ट को ठोस रूप से आउटलाइन किया गया है. स्क्रोल पैडिंग हरे रंग से भरी जाती है और स्क्रोल मार्जिन नारंगी रंग से भरी जाती है.

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

नया मेमोरी इंस्पेक्टर

JavaScript में ArrayBuffer के साथ-साथ Wasm मेमोरी की जांच करने के लिए, नए मेमोरी इंस्पेक्टर का इस्तेमाल करें.

यह डेमो पेज खोलें. सोर्स पैनल में, demo-js.js फ़ाइल खोलें और लाइन 18 पर एक ब्रेकपॉइंट सेट करें.

पेज रीफ़्रेश करें. दाएं डीबगर पैनल में मौजूद स्कोप सेक्शन को बड़ा करें. बफ़र वैल्यू के बगल में मौजूद नया आइकॉन देखें. मेमोरी इंस्पेक्टर देखने के लिए, इस पर क्लिक करें.

इस नए मेमोरी इंस्पेक्टर की मदद से, JavaScript ArrayBuffer और WebAssembly.Memory की जांच करने के बारे में ज़्यादा जानने के लिए, दस्तावेज़ देखें.

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

एलिमेंट पैनल में नया बैज सेटिंग पैनल

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

एलिमेंट पैनल में, किसी भी एलिमेंट पर राइट क्लिक करें. संदर्भ मेन्यू से, बैज की सेटिंग चुनें. इसके बाद, सबसे ऊपर बैज सेटिंग वाला पैनल दिखेगा. बैज दिखाने/छिपाने के लिए, किसी भी चेकबॉक्स को चालू या बंद करें.

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

आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) की जानकारी के साथ इमेज की बेहतर झलक

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

इस जानकारी से आपको इमेज को बेहतर ढंग से समझने और ज़रूरत पड़ने पर ऑप्टिमाइज़ेशन लागू करने में मदद मिलती है.

इमेज के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) की जानकारी, नेटवर्क पैनल में तब भी उपलब्ध होती है, जब इमेज की झलक देखने के लिए उस पर क्लिक किया जाता है.

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

नेटवर्क की नई शर्तों वाला बटन, जिसमें Content-Encoding को कॉन्फ़िगर करने के विकल्प हैं

नेटवर्क पैनल में, नेटवर्क की शर्तों का एक नया बटन जोड़ा गया है. नेटवर्क की शर्तें टैब खोलने के लिए, नेटवर्क पर क्लिक करें.

नेटवर्क की शर्तें टैब में, स्वीकार किए गए कॉन्टेंट-एन्कोडिंग का नया विकल्प जोड़ा गया है. इसे यह जांचने के लिए कॉन्फ़िगर करें कि क्या सर्वर के रिस्पॉन्स को ऐसे ब्राउज़र में सही तरीके से एन्कोड किया गया है जो gzip, brotli या आने वाले अन्य Content-Encoding के साथ काम नहीं करते.

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

स्टाइल पैनल को बेहतर बनाने की सुविधा

स्टाइल पैनल में कंप्यूट की गई वैल्यू देखने के लिए नया शॉर्टकट

अब आपके पास स्टाइल पैनल में मौजूद किसी सीएसएस प्रॉपर्टी पर राइट क्लिक करने का विकल्प है. इसके बाद, कंप्यूट की गई सीएसएस वैल्यू देखने के लिए, कंप्यूट की गई वैल्यू देखें चुनें.

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

accent-color कीवर्ड के लिए सहायता

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

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

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

समस्या के टाइप को रंगों और आइकॉन में अलग-अलग कैटगरी में बांटें

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

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

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

ट्रस्ट टोकन मिटाएं

अब आपके पास ऐप्लिकेशन पैनल के ट्रस्ट टोकन पैनल में, 'मिटाएं' नए बटन का इस्तेमाल करके ट्रस्ट टोकन मिटाने का विकल्प है.

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

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

फ़्रेम की जानकारी वाले व्यू में ब्लॉक की गई सुविधाओं की जानकारी देखें

अब फ़्रेम की जानकारी वाले व्यू में, अनुमतियों की नीति सेक्शन में जाकर, ब्लॉक की गई सुविधाओं की जानकारी देखी जा सकती है.

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

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

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

एक्सपेरिमेंट सेटिंग में एक्सपेरिमेंट फ़िल्टर करें

नए प्रयोग फ़िल्टर की सहायता से तेज़ी से प्रयोग खोजें. उदाहरण के लिए, सेटिंग > पर जाएं एक्सपेरिमेंट, फ़िल्टर टेक्स्ट बॉक्स में, "कंट्रास्ट" टाइप करें सभी प्रयोगों को "कंट्रास्ट" शब्द से फ़िल्टर करने के लिए.

कैश मेमोरी पैनल में नया Vary Header कॉलम

Vary एचटीटीपी रिस्पॉन्स हेडर देखने के लिए, कैश मेमोरी पैनल में नए Vary Header कॉलम का इस्तेमाल करें.

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

सोर्स पैनल में सुधार

JavaScript की नई सुविधाओं के लिए सहायता

DevTools अब निजी ब्रैंड जांच की नई JavaScript भाषा सुविधा के साथ काम करता है. इसे #foo in obj भी कहते हैं.

ब्रैंड की जांच करने की इस निजी सुविधा का इस्तेमाल, किसी भी ऑब्जेक्ट के लिए इन ऑपरेटर की जांच के लिए किया जाता है. इससे प्राइवेट क्लास फ़ील्ड की टेस्टिंग की जा सकती है.

इसे कंसोल और सोर्स पैनल में आज़माएं. डीबगर पैनल के स्कोप सेक्शन में जाकर भी निजी फ़ील्ड की जांच की जा सकती है.

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

ब्रेकपॉइंट डीबग करने के लिए बेहतर सहायता

DevTools अब एक से ज़्यादा स्क्रिप्ट में, सही तरीके से ब्रेकपॉइंट सेट करता है. Webpack, Rollup जैसे मॉडर्न JavaScript बंडलर, कोड को बांटने की सुविधा में काम करते हैं. कुछ स्थितियों में, शेयर किए गए किसी एक कॉम्पोनेंट को एक से ज़्यादा रूट (कोड स्प्लिट) में शामिल किया जा सकता है.

इससे पहले, DevTools सिर्फ़ एक रॉ जगह पर ब्रेकपॉइंट सेट कर सकता था. इस नए सुधार की मदद से, DevTools सभी काम की जगहों में सही तरीके से ब्रेकपॉइंट सेट कर सकता है.

Chromium से जुड़ी समस्याएं: 1142705, 979000, 1180794

[] नोटेशन के साथ कर्सर घुमाने पर झलक देखें

DevTools अब JavaScript सदस्य एक्सप्रेशन पर कर्सर घुमाने पर झलक की सुविधा देता है. ये ऐसे JavaScript सदस्य एक्सप्रेशन हैं जो सोर्स पैनल में [] नोटेशन का इस्तेमाल करते हैं.

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

HTML फ़ाइलों की बेहतर आउटलाइन

DevTools अब एचटीएमएल फ़ाइलों के लिए, बेहतर आउटलाइन वाली सुविधा है. सोर्स पैनल में, कोई एचटीएमएल फ़ाइल खोलें. Mac में कीबोर्ड Cmd + Shift + O या Windows में Ctrl + Shift + O से कोड आउटलाइन को टॉगल किया जा सकता है.

नीचे दिए गए उदाहरण में, DevTools अब आउटलाइन में सभी फ़ंक्शन को सही तरीके से लिस्ट करता है. इससे पहले, DevTools में सिर्फ़ कुछ ही फ़ंक्शन दिखते थे.

Chromium से जुड़ी समस्या: 761019, 1191465

Wasm डीबग करने के लिए गड़बड़ी के सही स्टैक ट्रेस

DevTools अब इनलाइन फ़ंक्शन कॉल को ठीक करता है और Wasm डीबग करने के लिए गड़बड़ियों के सही स्टैक ट्रेस दिखाता है.

इससे पहले, DevTools में गड़बड़ी वाले स्टैक ट्रेस में सिर्फ़ सामान्य Wasm रेफ़रंस दिखते थे.

बाईं ओर मौजूद Chrome का पुराना वर्शन, गड़बड़ी के स्टैक ट्रेस में सोर्स की जगह (जैसे कि dsquare) नहीं दिखाता, जबकि दाईं ओर मौजूद नए वर्शन में सोर्स की जगह की जानकारी नहीं दिखती.

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

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

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

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

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

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

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

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