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

Jecelyn Yeen

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

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

सीएसएस ग्रिड डीबग करना

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

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

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

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

नया WebAuthn टैब

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

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

WebAuthn टैब

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

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

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

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

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

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

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

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

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

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

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

Elements पैनल से जुड़े अपडेट

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

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

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

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

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

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

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

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

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

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

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

Lighthouse पैनल में Lighthouse 6.4

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

लाइटहाउस

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

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

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

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

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

Performance.mark इवेंट

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

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

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

resource-type फ़िल्टर

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

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

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

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

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

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

एंडपॉइंट को रिपोर्ट करना

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

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

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

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

सिर्फ़ रिपोर्टिंग के लिए दिया गया लेबल

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

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

'ज़्यादा टूल' मेन्यू में Settings की सुविधा बंद होना

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

मुख्य पैनल में मौजूद सेटिंग

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

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

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

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

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

कलर कंट्रास्ट कम होने की समस्याएं

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

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

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

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

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

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

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

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

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

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

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

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

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

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