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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

नेटवर्क फ़िल्टर नए तरीके से पेश किए गए

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

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

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

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

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

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

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

संवेदनशील जानकारी के गलती से लीक होने की संभावना को कम करने के लिए, 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 Experiments: शेयर करने की प्रोसेस देखें.

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

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

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

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

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