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

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

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

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

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

एलिमेंट में @position-try नियम काम करते हैं > शैलियां

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

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

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

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

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

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

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

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

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

हैंडल किए गए अस्वीकार किए गए वादों की पहचान 'पकी गई' के तौर पर की जाती है

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

कॉन्फ़िगरेशन मोड में जाने के लिए, ट्रैक के नाम के बाईं ओर मौजूद, बदलाव करें बदलाव करें बटन पर क्लिक करें. इसके बाद, ट्रैक को इधर-उधर ले जाने के लिए, ऊपर या arrow_downward पर arrow_upward या नीचे की ओर क्लिक करें या visibility_off को छिपाएं पर क्लिक करें. काम पूरा हो जाने के बाद, ट्रैक के नाम के दाईं ओर मौजूद हो गया जांच करें बटन पर क्लिक करें.

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

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

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

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

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

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

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

लाइटहाउस 11.7.1

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

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

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

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

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

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

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

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

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

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

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

• crbug.com के ज़रिए हमें कोई सुझाव या फ़ीडबैक सबमिट करें.
• ज़्यादा विकल्प   > का इस्तेमाल करके DevTools से जुड़ी समस्या की शिकायत करें सहायता > DevTools में DevTools से जुड़ी समस्याओं की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools YouTube वीडियो या DevTools के बारे में सलाह YouTube वीडियो में नया क्या है, इस पर टिप्पणी करें.

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

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