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

Sofia Emelianova
Sofia Emelianova
GitHub

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

इस वर्शन में, नेटवर्क पैनल में कई सुधार किए गए हैं.

नेटवर्क फ़िल्टर को बेहतर बनाया गया

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

यूज़र इंटरफ़ेस (यूआई) को साफ़-सुथरा बनाने के लिए, छिपाने, ब्लॉक करने, और तीसरे पक्ष से जुड़े चेकबॉक्स को ड्रॉप-डाउन सूची में ले जाएं. सूची में एक संख्या होती है, जो आपको बताती है कि ड्रॉप-डाउन में कितने फ़िल्टर चुने गए हैं.

छिपाने, ब्लॉक करने, और तीसरे पक्ष से जुड़े फ़िल्टर को ड्रॉप-डाउन में ले जाने से पहले और बाद की इमेज.

फ़िल्टर के पुराने डिज़ाइन को वापस लाने के लिए, सेटिंग > प्रयोग > नेटवर्क पैनल में फ़िल्टर बार का रीडिज़ाइन से चुने हुए का निशान हटाएं.

नए डिज़ाइन के बारे में हमें अपनी राय दें.

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

अब HAR एक्सपोर्ट में, संवेदनशील डेटा डिफ़ॉल्ट रूप से शामिल नहीं किया जाता

संवेदनशील जानकारी के गलती से लीक होने की संभावनाओं को कम करने के लिए, HAR फ़ॉर्मैट में एक्सपोर्ट किए गए नेटवर्क लॉग में अब डिफ़ॉल्ट रूप से Cookie, Set-Cookie, और Authorization हेडर शामिल नहीं होंगे.

संवेदनशील डेटा के साथ, लॉग को HAR फ़ॉर्मैट में एक्सपोर्ट करने के लिए, सेटिंग > प्राथमिकताएं > नेटवर्क > संवेदनशील डेटा के साथ HAR जनरेट करने की अनुमति दें को चालू करें. नेटवर्क पैनल, एक्सपोर्ट करें बटन को ऐरो के साथ मार्क करेगा. बटन को दबाकर रखें और ड्रॉप-डाउन मेन्यू से संवेदनशील डेटा के साथ HAR एक्सपोर्ट करें चुनें.

संवेदनशील डेटा के साथ और बिना संवेदनशील डेटा के, HAR एक्सपोर्ट में एक्सपोर्ट के विकल्प जोड़ने से पहले और बाद की इमेज.

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

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

इस वर्शन में, एलिमेंट पैनल में कई सुधार किए गए हैं.

text-emphasis-* प्रॉपर्टी के लिए, अपने-आप पूरी होने वाली वैल्यू

स्टाइल टैब में, अपने-आप भरने की सुविधा अब इन सीएसएस प्रॉपर्टी के लिए वैल्यू का सुझाव देती है:

'text-emphasis-*' प्रॉपर्टी के लिए, अपने-आप पूरा होने की सुविधा का विकल्प जोड़ने से पहले और बाद की इमेज.

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

बैज के साथ मार्क किए गए स्क्रोल ओवरफ़्लो

एलिमेंट पैनल में, अब ऐसे एलिमेंट को नए 'स्क्रोल' बैज से मार्क किया जाता है जिनमें ओवरफ़्लो होने वाला कॉन्टेंट होता है और जिनमें overflow: scroll या overflow: auto होता है. इससे, स्क्रोल ओवरफ़्लो को आसानी से देखा जा सकता है. अन्य बैज की तरह, यह बैज मौजूदा डीओएम को दिखाता है. अगर कॉन्टेंट का साइज़ बदलने की वजह से, कॉन्टेंट ओवरफ़्लो होना बंद हो जाता है, तो यह बैज दिखना बंद हो जाता है.

बैज के साथ स्क्रोल ओवरफ़्लो को मार्क करने से पहले और बाद की इमेज.

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

नेस्ट किए गए नियमों के बाद, सादे एलान "अप शिफ़्ट" नहीं करते

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

यहां दिए गए कोड सैंपल में, नेस्ट किए गए नियम के बाद सादे एलान की वजह से, Chrome अब कैस्केड में स्टाइल का क्रम अचानक से नहीं बदलता:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

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

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

परफ़ॉर्मेंस पैनल में सुधार

इस वर्शन में, परफ़ॉर्मेंस पैनल में कई सुधार किए गए हैं.

लाइव मेट्रिक में सुझाव

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

सुझाव पाने के लिए, Chrome UX रिपोर्ट (CrUX) से फ़ील्ड डेटा फ़ेच करने की सुविधा सेट अप करें. इसके बाद, हर मेट्रिक कार्ड (अगर कोई है) में अपने स्थानीय टेस्ट की स्थितियों पर विचार करें सेक्शन को बड़ा करें. साथ ही, एनवायरमेंट सेटिंग में असल उपयोगकर्ता के एनवायरमेंट पर विचार करें सेक्शन को बड़ा करें.

सुझावों के साथ बड़े किए गए सेक्शन.

अपने उपयोगकर्ताओं के अनुभव को बेहतर बनाने के लिए, सुझावों का पालन करें.

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

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

इस वर्शन में, मेमोरी पैनल में कई सुधार किए गए हैं.

'अलग किए गए एलिमेंट' वाली नई प्रोफ़ाइल

मेमोरी पैनल में एक नई प्रोफ़ाइल टाइप जोड़ी गई है—अलग किए गए एलिमेंट. यह उन ऑब्जेक्ट को दिखाता है जिन्हें JavaScript रेफ़रंस से रिटेन किया जाता है.

मेमोरी पैनल में 'अलग किए गए एलिमेंट' प्रोफ़ाइल टाइप जोड़ने से पहले और बाद की इमेज.

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

सामान्य JS ऑब्जेक्ट के नाम रखने की सुविधा को बेहतर बनाया गया

हीप स्नैपशॉट में Object कैटगरी को व्यवस्थित करने और उसमें मौजूद ग़ैर-ज़रूरी चीज़ों को हटाने के लिए, अब सामान्य JavaScript ऑब्जेक्ट:

  • इनका नाम, उनमें मौजूद प्रॉपर्टी के आधार पर रखा जाता है. उदाहरण के लिए, {firstProperty, secondProperty, ..., *nthProperty}.
  • DevTools की मदद से बनाए गए इन नामों से खोजा जा सकता है.
  • अगर इनमें एक जैसी प्रॉपर्टी हैं, तो इन्हें एक साथ ग्रुप किया जाता है.

Heap स्नैपशॉट में ऑब्जेक्ट कैटगरी को व्यवस्थित करने से पहले और बाद की इमेज.

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

डाइनैमिक थीम की सुविधा बंद करना

अब Chrome में, DevTools के रंगों को अपनी पसंद के मुताबिक बनाई गई थीम के रंगों से अपने-आप मैच होने की सुविधा को बंद किया जा सकता है.

डाइनैमिक थीम को बंद करने के लिए, सेटिंग > प्राथमिकताएं > दिखने का तरीका > Chrome की कलर स्कीम से मैच करें को हटाएं और DevTools को फिर से लोड करें.

डाइनैमिक थीम को बंद करने से पहले और बाद की इमेज.

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

Chrome एक्सपेरिमेंट: प्रोसेस शेयर करना

आम तौर पर, जब एक ही वेबसाइट (जैसे, Google Docs) के कई टैब खोले जाते हैं, तो Chrome हर टैब के लिए अलग-अलग रेंडरर प्रोसेस बनाता है. प्रोसेस शेयर करने वाले प्रयोग में, परफ़ॉर्मेंस को बेहतर बनाने के लिए, एक से ज़्यादा टैब को एक ही रेंडरर प्रोसेस शेयर करने की अनुमति दी जाती है.

अगर DevTools खुला होने पर आपको "यह टैब, अन्य टैब के साथ संसाधन शेयर करता है..." वाला मैसेज दिखता है, तो इसका मतलब है कि आप उस छोटे ग्रुप का हिस्सा हैं जिसमें प्रोसेस शेयर करने वाले एक्सपेरिमेंट को चालू किया गया है.

'यह टैब, अन्य टैब के साथ संसाधन शेयर करता है...' जानकारी वाला बार.

प्रोसेस शेयर करने से, ब्रेकपॉइंट डीबगिंग और परफ़ॉर्मेंस के विश्लेषण पर असर पड़ सकता है. ज़्यादा जानकारी के लिए, Chrome एक्सपेरिमेंट: प्रोसेस शेयर करना लेख पढ़ें.

Lighthouse 12.2.1

Lighthouse पैनल अब Lighthouse 12.2.1 पर काम करता है.

इस अपडेट में, < 20 KB संसाधन को छोटा करने के सुझावों को अनदेखा करने की सीमा जोड़ी गई है. इससे आपको सिर्फ़ फ़ाइल के साइज़ को कम करने पर फ़ोकस करने में मदद मिलेगी. बदलावों की पूरी सूची देखें.

DevTools में Lighthouse पैनल का इस्तेमाल करने के बुनियादी तरीकों के बारे में जानने के लिए, Lighthouse: वेबसाइट की स्पीड ऑप्टिमाइज़ करना लेख पढ़ें.

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

अन्य हाइलाइट

इस रिलीज़ में कुछ अहम गड़बड़ियां ठीक की गई हैं और सुधार किए गए हैं:

  • एलिमेंट:
    • नेस्ट की गई सीएसएस में बदलाव करने के लिए कई सुधार (41486635, 361477264, 328263458, 41487826).
    • तय की गई, लेकिन खाली वैल्यू वाली कस्टम प्रॉपर्टी को 'तय नहीं की गई' के तौर पर पार्स करने की समस्या को ठीक किया गया (365578428).
  • कंसोल: cURL निर्देशों में, एक से ज़्यादा लाइन वाली स्ट्रिंग में एस्केप नहीं किए गए ऐंपरसेंड को ठीक किया गया (352651673).
  • मेमोरी: सर्विस वर्कर्स वाले पेजों पर डिफ़ॉल्ट तौर पर चुने गए विकल्प को ठीक किया गया. अब मुख्य थ्रेड को चुना गया है (40669896).
  • सुरक्षा: किसी ऑरिजिन की सुरक्षा के स्टेज में बदलाव होने पर, यूआरएल स्कीम हाइलाइट करने की सुविधा अब सही तरीके से अपडेट होती है (359920086).

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

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

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

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

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

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