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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

@position-try Elements > Styles में नियमों के लिए सहायता

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

@position-try सीएसएस नियमों के साथ काम करने वाले before और after.

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

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

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

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

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

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

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

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

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

अस्वीकार की गई प्रॉमिस को हैंडल करने पर, उन्हें कैच किया गया माना जाता है

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

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

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

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

Chromium की समस्या: 40283993.

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

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

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

प्रिंटिंग से पहले और बाद के स्टैक ट्रेस, जिनमें `Caused by` प्रीफ़िक्स शामिल हैं.

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

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

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

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

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

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

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

ज़्यादा जानकारी के लिए, Early Hints की मदद से, सर्वर के थिंक-टाइम का इस्तेमाल करके पेजों को तेज़ी से लोड करना लेख पढ़ें.

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

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

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

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

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

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

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

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

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

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

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

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

ट्रैक का क्रम बदलना और उन्हें छिपाना

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

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

Chrome के अगले वर्शन, Chrome 126 में इस यूज़र इंटरफ़ेस (यूआई) को और बेहतर बनाया जाएगा.

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

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

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

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

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

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

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

Lighthouse 11.7.1

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

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

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

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

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

अन्य हाइलाइट

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

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

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

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

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

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

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

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