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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

एलिमेंट पैनल में बैज की नई सेटिंग वाला पैनल

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

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

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 हेडर सही तरीके से सेट न करना वगैरह.
• नुकसान पहुंचा सकने वाले आने वाले बदलाव (पीला). ऐसी समस्याएं जो वेब प्लैटफ़ॉर्म में होने वाले ऐसे बदलाव के बारे में बताती हैं जो काम नहीं करेगा.इससे पेज की सुविधाओं के काम न करने की समस्या हो सकती है. उदाहरण के लिए, CORS RFC 1918 में होने वाले बदलावों के बारे में चेतावनी.
• बेहतर बनाने के संभावित तरीके (नीले रंग में). पेज को बेहतर बनाने के लिए सुझाव, लेकिन फ़िलहाल पेज की बुनियादी सुविधाओं पर कोई असर नहीं पड़ रहा है. जैसे, ऐक्सेसिबिलिटी से जुड़ी समस्याएं

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

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

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

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

Chromium की समस्या: 1126824

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

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

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

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

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

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

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

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

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

Chromium की समस्या: 1186049

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

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

DevTools अब JavaScript की नई सुविधा, private brand check के साथ काम करता है. इसे #foo in obj भी कहा जाता है.

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

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

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 रेफ़रंस दिखते थे.

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

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

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

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

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

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

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

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

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