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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

परफ़ॉर्मेंस के बारे में नई अहम जानकारी

परफ़ॉर्मेंस > अहम जानकारी टैब में नई अहम जानकारी दिखेगी:

  • मॉडर्न एचटीटीपी, जो पुराने एचटीटीपी/1.1 प्रोटोकॉल का इस्तेमाल करने वाले अनुरोधों को हाइलाइट करता है.
  • कैश मेमोरी में कॉन्टेंट को लंबे समय तक सेव रखने वाले संसाधनों का इस्तेमाल करें. इससे उन अनुरोधों को हाइलाइट किया जाता है जिनके लिए कैश मेमोरी में कॉन्टेंट को लंबे समय तक सेव रखने से फ़ायदा मिल सकता है. साथ ही, इससे आपकी वेबसाइट के लोड होने में लगने वाला समय कम हो जाता है.
  • फ़ॉन्ट डिसप्ले, जो font-display को ऑप्टिमाइज़ करने पर, समय की बचत का अनुमान दिखाता है.

अहम जानकारी टैब में तीन नई अहम जानकारी.

हाइलाइट करने के लिए क्लिक करें

अब खास जानकारी, बॉटम-अप, कॉल ट्री, और इवेंट लॉग टेबल में मौजूद आइटम पर क्लिक करके, उनसे जुड़े इवेंट को ट्रैक में हाइलाइट किया जा सकता है. साथ ही, परफ़ॉर्मेंस ट्रैक को ब्राउज़ करते समय, बाकी इवेंट को धुंधला किया जा सकता है.

नेटवर्क अनुरोधों की खास जानकारी में सर्वर के टाइमिंग

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

नेटवर्क अनुरोध की खास जानकारी में मौजूद 'सर्वर के खुले होने का समय' टेबल.

परफ़ॉर्मेंस पैनल, Server-Timing रिस्पॉन्स हेडर हेडर से डेटा लेता है.

'निजता और सुरक्षा' में जाकर कुकी फ़िल्टर करना

निजता और सुरक्षा > निजता > तीसरे पक्ष की कुकी सेक्शन में मौजूद टेबल में एक फ़िल्टर मिलता है. इससे, आपको अपनी पसंद की कुकी तुरंत मिल सकती हैं.

'तीसरे पक्ष की कुकी' टेबल में मौजूद फ़िल्टर.

सभी पैनल की टेबल में, केबी यूनिट में साइज़

एक ही संदर्भ में यूनिट को एक जैसा रखने के लिए, नेटवर्क और मेमोरी पैनल में मौजूद टेबल और परफ़ॉर्मेंस > खास जानकारी में मौजूद 1p / 3p टेबल में, अब सभी साइज़ केबी में दिखाए जाते हैं. इससे, एमबी बनाम केबी बनाम बी इकाइयों पर नज़र रखने के बजाय, एक ही कॉलम और सभी पैनल में संख्याओं की सीधे तुलना की जा सकती है.

साइज़ की यूनिट को एक जैसा करने से पहले और बाद की इमेज.

अपने-आप भरने की सुविधा, एलिमेंट > स्टाइल में corner-shape और corner-*-shape के साथ काम करती है

एलिमेंट > स्टाइल में ऑटोकंप्लीट की सुविधा, अब corner-shape और corner-*-shape प्रॉपर्टी के लिए मिलती-जुलती वैल्यू का सुझाव दे सकती है.

'corner-shape' प्रॉपर्टी के लिए, अपने-आप भरने की सुविधा के विकल्प.

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

एक्सपेरिमेंटल: डीओएम में एलिमेंट और एट्रिब्यूट से जुड़ी समस्याओं को हाइलाइट करना

एक्सपेरिमेंट के तौर पर उपलब्ध इस नई सुविधा की मदद से, एलिमेंट पैनल अब डीओएम एलिमेंट या एट्रिब्यूट से जुड़ी समस्याओं को लाल रंग के स्क्विकली अंडरलाइन के साथ हाइलाइट कर सकता है. ऐसे एलिमेंट या एट्रिब्यूट पर कर्सर घुमाएं जिनमें गड़बड़ी है. इससे, समस्याएं पैनल में उस गड़बड़ी का लिंक वाला टूलटिप दिखेगा.

डीओएम ट्री में डीओएम की समस्या को हाइलाइट करने से पहले और बाद की इमेज. इसमें टूलटिप और समस्याओं के पैनल का लिंक भी है.

फ़िलहाल, एलिमेंट पैनल, <select> के अमान्य वंशजों, मेल न खाने वाली ARIA परिभाषाओं, और अमान्य ARIA एट्रिब्यूट को हाइलाइट करता है.

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

Lighthouse 12.5.0

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

इस वर्शन में सबसे खास बात यह है कि legacy-javascript अब esmodules के बजाय Baseline का इस्तेमाल करता है. बदलावों की पूरी सूची देखें.

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

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

अन्य हाइलाइट

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

  • परफ़ॉर्मेंस > अहम जानकारी > नेटवर्क डिपेंडेंसी ट्री: अब नेटवर्क ट्री (400708304) में, सभी नेटवर्क अनुरोधों का समय दिखता है.
    • नेटवर्क डिपेंडेंसी ट्री: अब नेटवर्क ट्री (400708304) में, सभी नेटवर्क अनुरोधों का समय दिखता है.
  • ऐनिमेशन: एक गड़बड़ी को ठीक किया गया है. इसकी वजह से, कैप्चर किए गए ऐनिमेशन 400635410 की वजह से, अलग किए गए एलिमेंट मेमोरी पैनल में दिखते थे.
  • रिकॉर्डर: अब पहली बार रिकॉर्डिंग शुरू करते समय, पुष्टि करने के लिए उसी डायलॉग बॉक्स का इस्तेमाल किया जाता है जिसका इस्तेमाल कोड चिपकाते समय किया जाता है.
  • लेयर: अब स्टेटस बार में सबसे नीचे, लेयर की कुल संख्या और दिख रही सभी लेयर के लिए कुल मेमोरी दिखती है.
  • मेमोरी: एक वर्कर्स के बजाय दो वर्कर्स के बीच टास्क को पैरलल कर दिया गया है, ताकि हेप स्नैपशॉट को शुरू करने में लगने वाला समय कम हो सके (42203857).
  • समस्याएं: अब लोकल नेटवर्क ऐक्सेस (एलएनए) सीओआरएस की गड़बड़ियों (395895368) की रिपोर्ट दी जाती है.
  • सभी के लिए उपलब्धता:
    • टूलटिप: अब ये फ़ोकस (396311936) के बजाय, हॉटकी दबाने पर दिखते हैं.
    • एलिमेंट > स्टाइल: var() फ़ंक्शन को अब कीबोर्ड से इंटरैक्ट किया जा सकता है. इसका मतलब है कि --custom-property को चुनकर, Enter दबाकर, उसके लिंक टारगेट (401212692) पर जाया जा सकता है.

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

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

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

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

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

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