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

परफ़ॉर्मेंस पैनल में वेब विटल की जानकारी वाला पॉप-अप

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

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

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

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

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

सीएसएस स्क्रोल-स्नैप

जब आपके पेज पर मौजूद किसी एचटीएमएल एलिमेंट (जैसे, यह डेमो पेज) पर 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 को कॉन्फ़िगर करने के विकल्पों के साथ, नेटवर्क की नई शर्तों का बटन

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

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

कॉन्टेंट को कोड में बदलने की सुविधा को कॉन्फ़िगर करने के विकल्पों के साथ, नेटवर्क की स्थिति का नया बटन

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

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

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

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

कैलकुलेट की गई वैल्यू देखने के लिए नया शॉर्टकट

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

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

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

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

accent-color

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

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

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

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

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

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

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

अब ऐप्लिकेशन पैनल में, ट्रस्ट टोकन पैनल में मौजूद, मिटाएं बटन का इस्तेमाल करके ट्रस्ट टोकन मिटाए जा सकते हैं.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vary हेडर कॉलम

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

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

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

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

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

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

JavaScript प्राइवेट ब्रैंड की जांच

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

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

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

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

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

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

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

'[]' नोटेशन की मदद से, कर्सर घुमाने पर झलक दिखाने की सुविधा

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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