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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

इससे पहले, Elements > Accessibility टैब में जाकर, सुलभता ट्री को अलग से ब्राउज़ किया जा सकता था. अब डीओएम और पूरे पेज के सुलभता ट्री के बीच स्विच करने के लिए, एलिमेंट पैनल में डीओएम ट्री के सबसे ऊपर दाएं कोने में मौजूद, सुलभता ट्री व्यू पर स्विच करें बटन पर क्लिक किया जा सकता है. इससे आपको इन ट्री और इनके बीच के संबंध के बारे में आसानी से पता चल पाएगा.

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

सुलभता ट्री की मदद से, यह देखा जा सकता है कि सहायक टेक्नोलॉजी आपके कॉन्टेंट को कैसे देखती है. साथ ही, यह आपको डीओएम नोड के एआरआईए एट्रिब्यूट और सुलभता प्रॉपर्टी दिखाता है. ज़्यादा जानने के लिए, 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> ऐक्सेसिबिलिटी ट्री में समस्याएं और नेटवर्क सेवा में पार्सिंग या पुष्टि के दौरान होने वाली SRI मैसेज सिग्नेचर से जुड़ी गड़बड़ियां (crbug.com/381044049, crbug.com/347890366).
  • सुलभता: Elements > Styles टैब में, अब उन एलिमेंट को हाइलाइट किया जाता है जिन पर कीबोर्ड नेविगेशन का इस्तेमाल करके पहुंचा जाता है (crbug.com/396311936).
  • तत्व: अब <select> से जुड़ी समस्याओं को ठीक किया जा सकता है. साथ ही, इन्हें वेवी अंडरलाइन (crbug.com/378738916) से हाइलाइट किया जाता है.
  • नेटवर्क: 'ओवरराइड डॉट' और कुकी की चेतावनी वाले आइकॉन अब टैब के नाम के बाईं ओर के बजाय दाईं ओर दिखते हैं (crbug.com/390556283).

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

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

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

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

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

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