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

Sofia Emelianova

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

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

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

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

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

फ़िल्टर के पुराने डिज़ाइन को वापस लाने के लिए, settings Settings > Experiments > check_box_outline_blank Redesign of the filter bar in the Network panel से सही का निशान हटाएं.

हमें बताएं कि आपको नए डिज़ाइन के बारे में क्या लगता है.

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

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

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

संवेदनशील डेटा के साथ HAR फ़ॉर्मैट में लॉग एक्सपोर्ट करने के लिए, settings Settings > Preferences > Network > check_box Allow to generate HAR with sensitive data check_box Allow to generate HAR with sensitive data check_box Allow to generate HAR with sensitive data check_box Allow to generate HAR with sensitive data check_box Allow to generate HAR with sensitive data check_box Allow to generate HAR with sensitive data check_box Allow to generate HAR with sensitive data check_box Allow to generate HAR with sensitive data नेटवर्क पैनल, डाउनलोड करें एक्सपोर्ट करें बटन को ऐरो से मार्क करेगा. बटन पर देर तक क्लिक करें. इसके बाद, ड्रॉप-डाउन मेन्यू से संवेदनशील डेटा के साथ HAR फ़ाइल एक्सपोर्ट करें को चुनें.

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

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

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

text-emphasis-* प्रॉपर्टी के लिए ऑटोकंप्लीट वैल्यू

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

• text-emphasis शॉर्टहैंड
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

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 Report (CrUX) से फ़ील्ड डेटा फ़ेच करने की सुविधा सेट अप करें. साथ ही, हर मेट्रिक कार्ड में मौजूद अपनी लोकल टेस्ट की स्थितियों पर ध्यान दें सेक्शन (अगर कोई हो) और एनवायरमेंट सेटिंग में मौजूद असल उपयोगकर्ताओं के एनवायरमेंट पर ध्यान दें सेक्शन को बड़ा करें.

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

ब्रेडक्रंब पर जाना

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

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

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

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

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

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

प्लेन JS ऑब्जेक्ट के नाम बेहतर तरीके से दिए गए हैं

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

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

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

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

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

डाइनैमिक थीम की सुविधा बंद करने के लिए, settings Settings > Preferences > Appearance > check_box_outline_blank Match Chrome color scheme से सही का निशान हटाएं. इसके बाद, DevTools को फिर से लोड करें.

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

Chrome Experiment: प्रोसेस शेयर करना

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

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

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

Lighthouse 12.2.1

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

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

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

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

अन्य हाइलाइट

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

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

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

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

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

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

• हमें सुझाव/राय देने या शिकायत करने के लिए, crbug.com पर जाएं. साथ ही, किसी सुविधा का अनुरोध करने के लिए भी इसी लिंक पर जाएं.
• DevTools में, more_vert ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी किसी समस्या की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools के YouTube वीडियो में नया क्या है या DevTools के बारे में सलाह देने वाले YouTube वीडियो पर टिप्पणी करें.

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

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