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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

परफ़ॉर्मेंस में प्रोफ़ाइल और फ़ंक्शन कॉल के लिए ऑरिजिन और स्क्रिप्ट लिंक

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

खास जानकारी वाले टैब में सोर्स और ऑरिजिन जोड़ने से पहले और बाद की इमेज.

इसके अलावा, नेटवर्क और मुख्य ट्रैक में, इवेंट पर कर्सर घुमाने पर, अब आपको टूलटिप में तीसरे पक्ष के नाम दिखेंगे.

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

'फ़ेज़ के हिसाब से एलसीपी' फ़ील्ड डेटा के साथ काम करना

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

'फ़ेज़ के हिसाब से एलसीपी' इनसाइट में फ़ील्ड डेटा की सहायता जोड़ने से पहले और बाद की इमेज.

'नेटवर्क डिपेंडेंसी ट्री' की अहम जानकारी

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

ज़्यादा जानने के लिए, अहम अनुरोधों की चेन बनाने से बचें लेख पढ़ें.

सबसे ज़्यादा स्टैक वाले साइडबार को हाइलाइट करना

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

एलिमेंट में सुलभता ट्री व्यू

एलिमेंट पैनल में, पूरे पेज का सुलभता ट्री व्यू अब डिफ़ॉल्ट रूप से चालू है. इसकी मदद से, यह जांचा जा सकता है कि सहायक तकनीक आपके कॉन्टेंट को कैसे देखती है. साथ ही, यह आपको ARIA एट्रिब्यूट और डीओएम नोड की ऐक्सेसबिलिटी प्रॉपर्टी दिखाती है.

सुलभता ट्री व्यू खोलने के लिए, एलिमेंट पैनल में डीओएम ट्री के सबसे ऊपर दाएं कोने में मौजूद, सुलभता ट्री व्यू पर स्विच करें बटन पर क्लिक करें.

सुलभता ट्री को डिफ़ॉल्ट रूप से पूरे पेज पर देखने की सुविधा चालू करने से पहले और बाद की इमेज .

ज़्यादा जानने के लिए, Chrome DevTools में सुलभता से जुड़ा पूरा ट्री देखें.

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

अलग-अलग पैनल के लिए, खाली होने की स्थिति को बेहतर बनाया गया

अलग-अलग पैनल, सेक्शन, और टैब के लिए खाली स्टेटस (जब कुछ भी नहीं खुला है) को बेहतर बनाया गया है. इससे आपको यह जानने में मदद मिलेगी कि इन पर काम शुरू करने के लिए क्या करना है. उदाहरण के लिए, नेटवर्क पैनल में कुछ खाली स्टेटस में, अब पेज को फिर से लोड करें जैसे काम के बटन मौजूद हैं.

नेटवर्क और सर्च पैनल में खाली स्टेटस को बेहतर बनाने से पहले और बाद की इमेज.

'एआई से पूछें' विकल्प को मेन्यू में सबसे नीचे ले जाया गया

एआई से पूछें विकल्प, अब ड्रॉप-डाउन मेन्यू में सबसे ऊपर के बजाय सबसे नीचे दिखेगा.

'एआई से पूछें' विकल्प को ड्रॉप-डाउन मेन्यू में सबसे नीचे ले जाने से पहले और बाद की इमेज.

crbug.com/364805393 में, एआई असिस्टेंस पैनल पर जाकर, बेझिझक अपना सुझाव, राय या शिकायत दें.

Lighthouse 12.4.0

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

यह वर्शन, पास होने की शर्तों के तहत कुछ परफ़ॉर्मेंस ऑडिट को 'जानकारी देने वाला' के तौर पर मार्क करता है. साथ ही, उन्हें 'पास किए गए ऑडिट' सेक्शन में छिपाने के बजाय दिखाता है. बदलावों की पूरी सूची देखें.

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

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

अन्य हाइलाइट

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

  • परफ़ॉर्मेंस > खास जानकारी: कुल समय और खुद का समय वाली दो लाइनों को, एक लाइन वाली कुल समय लाइन से बदल दिया गया है. अगर कोई है, तो यह ब्रैकेट में (self time) भी दिखाती है (crbug.com/395572753).
  • समस्याएं: समस्याओं के नए टाइप जोड़े गए: <select> नेटवर्क सेवा में पार्स करने या पुष्टि करने के दौरान, सुलभता ट्री और एसआरआई मैसेज हस्ताक्षर से जुड़ी गड़बड़ियां (crbug.com/381044049, crbug.com/347890366).
  • सुलभता: एलिमेंट > स्टाइल टैब में, अब उन एलिमेंट की जानकारी दी गई है जिन्हें कीबोर्ड नेविगेशन का इस्तेमाल करके देखा जा सकता है (crbug.com/396311936).
  • एलिमेंट: <select> से जुड़ी समस्याओं को अब हाइलाइट किया जा सकता है. साथ ही, उन्हें वॉवी अंडरलाइन (crbug.com/378738916) से हाइलाइट किया जा सकता है.
  • नेटवर्क: 'अतिरिक्त बिंदु' और कुकी से जुड़ी चेतावनी वाले आइकॉन, अब टैब के नाम की बाईं ओर के बजाय दाईं ओर दिखते हैं (crbug.com/390556283).

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

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

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

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

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

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