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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

एआई से जनरेट की गई, गड़बड़ी की जानकारी.

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

@position-try एलिमेंट > स्टाइल में नियमों के साथ काम करना

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

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

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

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 के अगले वर्शन, Chrome 126 में इस यूज़र इंटरफ़ेस में और सुधार किए जाएंगे.

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

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

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

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

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

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

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

Lighthouse 11.7.1

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

इस वर्शन में Publisher Ads प्लग इन के लिए, काम न करने वाली सहायता को हटा दिया गया है.

Publisher Ads प्लग इन की सहायता को जोड़ने से पहले और बाद की इमेज.

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

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

अन्य हाइलाइट

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

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

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

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

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

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

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

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