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

सीएसएस ग्रिड को डीबग करने वाले नए टूल

DevTools अब सीएसएस ग्रिड डीबगिंग के लिए बेहतर सहायता उपलब्ध है!

जब आपके पेज के किसी एचटीएमएल एलिमेंट पर display: grid या display: inline-grid लागू होता है, तो इसका मतलब है कि एलिमेंट पैनल में, इसके बगल में grid बैज दिख सकता है. डिसप्ले को टॉगल करने के लिए बैज पर क्लिक करें पर क्लिक करें.

नए लेआउट पैनल में, ग्रिड सेक्शन होता है. इसमें ग्रिड.

ज़्यादा जानने के लिए दस्तावेज़ देखें.

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

नया WebAuthn टैब

अब आपके पास पुष्टि करने वाले लोगों को एम्युलेट करने का विकल्प है. साथ ही, नए WebAuthn की मदद से Web Authentication API को डीबग किया जा सकता है टैब पर जाएं.

ज़्यादा विकल्प को चुनें > ज़्यादा टूल > WebAuthn टैब खोलने के लिए WebAuthn.

नए WebAuthn टैब से पहले, Chrome पर कोई नेटिव WebAuthn डीबगिंग सहायता मौजूद नहीं थी. वेब ऐप्लिकेशन की पुष्टि करने वाले वेब ऐप्लिकेशन की जांच करने के लिए, डेवलपर को फ़िज़िकल ऑथेंटिकेटर की ज़रूरत होती है.

नए WebAuthn टैब के साथ, वेब डेवलपर अब इन पुष्टि करने वालों की तरह काम कर सकते हैं. साथ ही, और अपने राज्यों की जांच करता है. इसके लिए, किसी फ़िज़िकल ऑथेंटिकेटर की ज़रूरत नहीं होती. इससे और आसानी से डीबग किया जा सकता है.

WebAuthn सुविधा के बारे में ज़्यादा जानने के लिए हमारा दस्तावेज़ देखें.

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

टूल को सबसे ऊपर और सबसे नीचे वाले पैनल के बीच ले जाना

DevTools अब ऊपर और नीचे वाले पैनल के बीच, DevTools में टूल ले जाने की सुविधा है. इस तरह, आपको ये काम करने में मदद मिलेगी किसी भी दो टूल को एक साथ देखें.

उदाहरण के लिए, अगर आपको एलिमेंट और सोर्स पैनल एक साथ देखना है, तो सोर्स पैनल पर क्लिक करें और उसे सबसे नीचे ले जाने के लिए, सोर्स पैनल पर क्लिक करें.

इसी तरह, आप किसी टैब पर राइट क्लिक करके और यहां ले जाएं सबसे ऊपर.

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

एलिमेंट पैनल के अपडेट

स्टाइल पैनल में कंप्यूट किया गया साइडबार पैनल देखें

अब स्टाइल पैनल में कंप्यूट किए गए साइडबार पैनल को टॉगल किया जा सकता है.

स्टाइल पैनल में, कंप्यूट किए गए साइडबार पैनल को डिफ़ॉल्ट रूप से छोटा किया जाता है. इस बटन पर क्लिक करके तो इसे टॉगल करें.

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

कंप्यूटेड पैनल में सीएसएस प्रॉपर्टी को ग्रुप करना

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

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

एलिमेंट पैनल पर, कोई एलिमेंट चुनें. सीएसएस को ग्रुप या अनग्रुप करने के लिए, ग्रुप चेकबॉक्स को टॉगल करें प्रॉपर्टी.

Chromium से जुड़ी समस्याएं: 1096230, 1084673, 1106251

लाइटहाउस पैनल में लाइटहाउस 6.4

Lighthouse पैनल अब लाइटहाउस 6.4 पर चल रहा है. पूरी जानकारी के लिए प्रॉडक्ट की जानकारी देखें बदलावों की सूची.

लाइटहाउस 6.4 में नए ऑडिट:

• फ़ॉन्ट पहले से लोड करना. इस बात की पुष्टि करता है कि font-display: optional का इस्तेमाल करने वाले सभी फ़ॉन्ट पहले से लोड किए गए हैं या नहीं.
• मान्य सोर्स मैप. यह ऑडिट करता है कि किसी पेज में, पहले पक्ष की बड़ी JavaScript के लिए मान्य सोर्स मैप मौजूद हैं या नहीं.
• [प्रयोग के तौर पर] बड़ी JavaScript लाइब्रेरी. बड़ी JavaScript लाइब्रेरी की वजह से खराब परफ़ॉर्मेंस हो सकती है परफ़ॉर्मेंस. इस ऑडिट में, आम और बड़ी JavaScript लाइब्रेरी के बजाय सस्ते विकल्प बताए गए हैं. जैसे, moment.js.

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

'समय' सेक्शन में performance.mark() इवेंट

परफ़ॉर्मेंस की रिकॉर्डिंग के समय सेक्शन में, अब performance.mark() इवेंट मार्क किए जाते हैं.

नेटवर्क पैनल में नए resource-type और url फ़िल्टर

नेटवर्क अनुरोधों को फ़िल्टर करने के लिए, नेटवर्क पैनल में नए resource-type और url कीवर्ड इस्तेमाल करें.

उदाहरण के लिए, resource-type:image का इस्तेमाल करके उन नेटवर्क अनुरोधों पर फ़ोकस करें जो इमेज हैं.

resource-type जैसे ज़्यादा खास कीवर्ड खोजने के लिए, प्रॉपर्टी के हिसाब से फ़िल्टर करने के अनुरोध देखें और url.

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

फ़्रेम की जानकारी वाले व्यू से जुड़े अपडेट

COEP और COOP reporting to एंडपॉइंट दिखाएं

अब आपके पास क्रॉस-ऑरिजिन एम्बेडर नीति (सीओईपी) और क्रॉस-ऑरिजिन ओपनर नीति देखने का विकल्प है (COOP)reporting to का एंडपॉइंट सुरक्षा और आइसोलेशन सेक्शन.

Reporting API एक नए एचटीटीपी हेडर, Report-To के बारे में जानकारी देता है. इसकी मदद से, वेब डेवलपर ब्राउज़र के सर्वर एंडपॉइंट को तय करें, ताकि ब्राउज़र को चेतावनियां और गड़बड़ियां भेजी जा सकें.

COEP और COOP को चालू करने और अपनी वेबसाइट बनाने के तरीके के बारे में ज़्यादा जानने के लिए, यह लेख पढ़ें "क्रॉस-ऑरिजिन आइसोलेटेड".

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

COEP और COOP report-only मोड दिखाएं

DevTools अब report-only मोड पर सेट किए गए COEP और COOP के लिए report-only लेबल दिखाता है.

जानकारी लीक होने से रोकने और COOP और COEP को चालू करने का तरीका जानने के लिए, यह वीडियो देखें आपकी वेबसाइट पर आते हैं.

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

ज़्यादा टूल मेन्यू में Settings का बंद होना

'ज़्यादा टूल' मेन्यू में मौजूद Settings को हटा दिया गया है. मुख्य पैनल से सेटिंग खोलें आज़माएं.

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

प्रयोग के तौर पर शुरू की गई सुविधाएं

सीएसएस की खास जानकारी वाले पैनल में, कलर कंट्रास्ट से जुड़ी समस्याओं को देखना और उन्हें ठीक करना

सीएसएस की खास जानकारी पैनल, अब आपके पेज के लो कलर कंट्रास्ट टेक्स्ट की सूची दिखाता है.

इस उदाहरण में, डेमो पेज में कलर कंट्रास्ट की समस्या कम है. समस्या पर क्लिक करके, ये काम किए जा सकते हैं उन एलिमेंट की सूची देखें जिनमें समस्या है.

एलिमेंट पैनल में एलिमेंट खोलने के लिए, सूची में किसी एलिमेंट पर क्लिक करें. DevTools अपने-आप काम करता है रंग का सुझाव दिया गया है, ताकि आपको कम कंट्रास्ट वाले टेक्स्ट को ठीक करने में मदद मिल सके.

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

DevTools में कीबोर्ड शॉर्टकट को पसंद के मुताबिक बनाएं

अब DevTools में अपने पसंदीदा निर्देशों के लिए, कीबोर्ड शॉर्टकट में अपने हिसाब से बदलाव किए जा सकते हैं.

सेटिंग पर जाएं > शॉर्टकट, किसी निर्देश पर कर्सर घुमाते हुए और बदलाव करें बटन (पेन आइकॉन) पर क्लिक करें कीबोर्ड शॉर्टकट को पसंद के मुताबिक बनाने के लिए.

सभी शॉर्टकट को रीसेट करने के लिए, डिफ़ॉल्ट शॉर्टकट वापस लाएं पर क्लिक करें.

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

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

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

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

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

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

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

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