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

Jecelyn Yeen

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

DevTools में अब सीएसएस ग्रिड डीबग करने की सुविधा बेहतर तरीके से काम करती है!

सीएसएस ग्रिड की डीबगिंग

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

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

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

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

नया WebAuthn टैब

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

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

WebAuthn टैब

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

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

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

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

टूल को ऊपर और नीचे मौजूद पैनल के बीच ले जाना

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

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

सबसे नीचे ले जाएं

इसी तरह, किसी टैब पर दायां क्लिक करके, सबसे ऊपर ले जाएं को चुनकर, सबसे नीचे मौजूद किसी भी टैब को सबसे ऊपर ले जाया जा सकता है.

सबसे ऊपर ले जाएं

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

एलिमेंट पैनल से जुड़े अपडेट

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

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

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

कंप्यूटेड साइडबार पैनल

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

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

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

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

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

सीएसएस प्रॉपर्टी को ग्रुप करना

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

Lighthouse पैनल में Lighthouse 6.4

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

लाइटहाउस

Lighthouse 6.4 में नए ऑडिट:

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

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

performance.mark() टाइमिंग सेक्शन में मौजूद इवेंट

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

Performance.mark इवेंट

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

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

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

रिसॉर्स टाइप फ़िल्टर

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

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

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

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

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

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

रिपोर्टिंग टू एंडपॉइंट

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

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

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

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

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

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