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

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini की मदद से, Console में गड़बड़ियों और चेतावनियों को बेहतर तरीके से समझें

Chrome के इस वर्शन में, DevTools के कंसोल में जनरेटिव एआई की सुविधाएं जोड़ी गई हैं. इनकी मदद से, आपको गड़बड़ियों और चेतावनियों को बेहतर तरीके से समझने में मदद मिलेगी.

किसी गड़बड़ी या चेतावनी के बारे में एआई से जनरेट की गई जानकारी पाने के लिए, कंसोल में मैसेज के बगल में मौजूद, लाइट बल्ब की चिंगारी. इस गड़बड़ी को समझें (चेतावनी) बटन पर क्लिक करें और निर्देशों का पालन करें.

किसी गड़बड़ी के बारे में एआई से जनरेट हुई जानकारी.

ज़्यादा जानकारी के लिए, एआई की मदद से गड़बड़ियों और चेतावनियों को बेहतर तरीके से समझना लेख पढ़ें.

एलिमेंट > स्टाइल में @position-try नियम इस्तेमाल किए जा सकते हैं

सीएसएस ऐंकर की पोज़िशनिंग को डीबग करने में आपकी मदद करने के लिए, एलिमेंट > स्टाइल टैब में अब @position-try सीएसएस नियम काम करते हैं. टैब, position-try-options वैल्यू को हल करता है और हर विकल्प को खास @position-try --name सेक्शन से लिंक करता है.

@position-try सीएसएस नियमों के साथ काम करने से पहले और बाद में.

ज़्यादा जानने के लिए, पेश है सीएसएस ऐंकर पोज़िशनिंग एपीआई लेख पढ़ें.

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

सोर्स पैनल में सुधार

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

अपने-आप प्रिटी-प्रिंटिंग और ब्रैकेट बंद होने की सुविधा को कॉन्फ़िगर करना

अब सोर्स में, एडिटर के लिए, प्रीटी प्रिंटिंग और ब्रैकेट बंद होने की सुविधा को अपने-आप चालू या बंद किया जा सकता है. प्रिटी-प्रिंटिंग की मदद से, छोटी की गई फ़ाइलों को पढ़ा जा सकता है. जब ब्रैकेट बंद होता है, तो ओपनिंग ब्रैकेट () या }) या टैग (>) अपने-आप जुड़ जाता है.

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

अपने-आप प्रीटी प्रिंट होने और ब्रैकेट बंद होने की नई सेटिंग जोड़ने से पहले और बाद की इमेज.

Chromium से जुड़ी समस्याएं: 40865010, 324314570.

अस्वीकार किए गए मैसेज को मैनेज करने पर, उन्हें 'पकड़ा गया' के तौर पर मार्क किया जाता है

अगर आपने अस्वीकार किए गए प्रॉमिस को .catch() या दो आर्ग्युमेंट वाले .then() के साथ मैनेज किया है, तो सोर्स पैनल अब उन्हें सही तरीके से 'पकड़ा गया' के तौर पर पहचानता है.

दूसरे शब्दों में, जब सोर्स > ब्रेकपॉइंट > अनजान अपवादों पर रोकें चालू हो, तो डीबगर इनसे मिलते-जुलते स्टेटमेंट पर नहीं रुकेगा:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

विज्ञापन अस्वीकार होने की पहचान करने से पहले और बाद की प्रोसेस.

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

कंसोल में गड़बड़ी की वजहें

अगर कोई हो, तो कंसोल आपको स्टैक ट्रेस में गड़बड़ी की वजहें दिखाता है.

गड़बड़ियों को आसानी से समझने और उन्हें ठीक करने के दौरान, गड़बड़ी की वजहों के बारे में जानकारी दी जा सकती है. इससे गड़बड़ियों को आसानी से डीबग करने में मदद मिलेगी. Console, गड़बड़ी की वजहों की चेन को ऊपर की ओर ले जाते समय, हर गड़बड़ी के स्टैक को Caused by: प्रीफ़िक्स के साथ प्रिंट करता है, ताकि आपको मूल गड़बड़ी अब भी दिख सके.

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

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

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

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

शुरुआती हिंट वाले हेडर की जांच करना

रिस्पॉन्स के लिए शुरुआती संकेत वाले हेडर के लिए, नेटवर्क पैनल के अनुरोध के हेडर टैब में एक खास सेक्शन होता है. पहले, आपको रिस्पॉन्स हेडर सेक्शन में काम के हेडर मिल सकते थे.

शुरुआती हिंट एक एचटीटीपी स्टेटस कोड (103 Early Hints) है. इसका इस्तेमाल, आखिरी जवाब से पहले शुरुआती एचटीटीपी रिस्पॉन्स भेजने के लिए किया जाता है. इससे सर्वर को ज़रूरी सब-रिसॉर्स (उदाहरण के लिए, स्टाइल शीट या क्रिटिकल JavaScript) या ऑरिजिन के बारे में ब्राउज़र को संकेत भेजने की अनुमति मिलती है. इस दौरान, सर्वर मुख्य रिसॉर्स जनरेट करने में व्यस्त होता है और पेज पर इसका इस्तेमाल होने की संभावना होती है.

रिलीज़ से पहले मिलने वाले सुझावों के लिए खास सेक्शन जोड़ने से पहले और बाद की इमेज.

ज़्यादा जानकारी के लिए, रिस्पॉन्स में लगने वाले समय को कम करने के लिए, रिस्पॉन्स के बारे में पहले से जानकारी देने की सुविधा का इस्तेमाल करना लेख पढ़ें.

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

वॉटरफ़ॉल कॉलम छिपाना

अब नेटवर्क पैनल में वॉटरफ़ॉल कॉलम को ठीक उसी तरह छिपाया जा सकता है जिस तरह दूसरे कॉलम को छिपाया जाता है. किसी भी कॉलम के नाम पर राइट क्लिक करें और ड्रॉप-डाउन मेन्यू में वॉटरफ़ॉल चेकबॉक्स से सही का निशान हटाएं.

वॉटरफ़ॉल कॉलम को छिपाने का विकल्प जोड़ने से पहले और बाद में.

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

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

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

सीएसएस सिलेक्टर के आंकड़ों को कैप्चर करें

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

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

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

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

ऑर्डर बदलें और ट्रैक छिपाएं

परफ़ॉर्मेंस पैनल में एक नया कॉन्फ़िगरेशन मोड उपलब्ध है. इसमें, ट्रैक का क्रम बदला जा सकता है और उन्हें छिपाया भी जा सकता है.

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

Chrome 126 के नए वर्शन में, इस यूज़र इंटरफ़ेस (यूआई) में और सुधार किए जाएंगे.

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

मेमोरी पैनल में रिटेनर को अनदेखा करना

अब मेमोरी पैनल से कैप्चर किए गए हीप स्नैपशॉट में रिटेनर को अनदेखा किया जा सकता है.

रिटेनर को अनदेखा करने के लिए, कोई ऑब्जेक्ट चुनें और रिटेनर सेक्शन में, रिटेनर पर राइट-क्लिक करें और ड्रॉप-डाउन मेन्यू से इस रिटेनर को अनदेखा करें चुनें. अनदेखा किए गए रिटेनर को दूरी कॉलम में ignored वैल्यू से मार्क किया गया है. अनदेखा किए गए रिटेनर को पहले जैसा करने के लिए, सबसे ऊपर मौजूद ऐक्शन बार में, अनदेखा किए गए रिटेनर को पहले जैसा करें पर क्लिक करें.

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

इसके अलावा, हेप स्नैपशॉट में अब ज़्यादा संख्या (कई करोड़) में कंटेनमेंट एज और नोड (332350576) काम करते हैं.

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

लाइटहाउस 11.7.1

Lighthouse पैनल अब लाइटहाउस 11.7.1 पर काम करता है. बदलावों की पूरी सूची देखें.

प्रकाशक विज्ञापन प्लग इन के लिए काम न करने वाली सुविधा में हुए अहम बदलावों में से एक है. यह प्लगिन इस वर्शन में पुराना हो गया.

Publisher Ads प्लगिन सपोर्ट को हटाने से पहले और बाद में.

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

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

अन्य खास बातें

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

  • Recorder पैनल अब आधिकारिक तौर पर झलक की स्थिति (329271496) के बाहर है.
  • जब कोई कस्टम फ़ॉर्मैटर, body() फ़ंक्शन के लिए null दिखाता है, तो कंसोल अब गड़बड़ी नहीं दिखाता. यह एक मान्य व्यवहार है (329400119).
  • सोर्स पैनल में, सिंटैक्स हाइलाइटर को अपडेट किया गया है. खास तौर पर, अब यह रेगुलर एक्सप्रेशन में v और d फ़्लैग के साथ काम करता है.
  • नेटवर्क > कुकी टैब ने रिस्पॉन्स कुकी के लिए, जिन कुकी को मैप करने की छूट दी है उनसे जुड़ी गड़बड़ी को ठीक किया गया है (41491846).
  • एलिमेंट > स्टाइल टैब अब ये काम करता है:
    • कस्टम प्रॉपर्टी (41489874) के साथ, पूरी तरह से ओवरलोड किए गए इनहेरिट किए गए नियम दिखाता है.
    • कलर थीम (331123816) के आधार पर, हल्के रंग में गहरे रंग वाली थीम में लागू की गई वैल्यू को हाइलाइट करती है.

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

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

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

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

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

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