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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

नए डिज़ाइन के बारे में आपकी क्या राय है, इस बारे में हमें बताएं.

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

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

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

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

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

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 की मदद से खोजा जा सकता है.
  • एक जैसे प्रॉपर्टी मौजूद होने पर, ग्रुप में रखा जाता है.

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

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

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

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

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

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

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

Chrome प्रयोग: प्रक्रिया शेयर करना

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

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

'यह टैब दूसरे टैब के साथ संसाधन शेयर करता है...' जानकारी बार.

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

Lighthouse 12.2.1

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 में नया क्या है सीरीज़ में शामिल सभी चीज़ों की सूची.