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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अपने-आप पूरा होने की सुविधा, Elements > Styles में corner-shape और corner-*-shape के साथ काम करती है

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

'corner-shape' प्रॉपर्टी के लिए, अपने-आप पूरा होने वाले विकल्प.

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

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

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

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

Elements पैनल में, फ़िलहाल <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() फ़ंक्शन को कीबोर्ड से कंट्रोल किया जा सकता है. इसका मतलब है कि इसके लिंक टारगेट (401212692) पर जाने के लिए, --custom-property को चुना जा सकता है और Enter दबाया जा सकता है.

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

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

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

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

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

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