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

Google I/O 2025 का एडिशन

इस साल के Google I/O में, Chrome DevTools की अहम भूमिका होगी. इसमें लाइव सेशन और रिकॉर्ड किए गए सेशन, दोनों शामिल होंगे.

शानदार नई सुविधाओं के बारे में जानने के लिए, यहां जाएं:

• Chrome में नया क्या है, 20 मई, 2025 | शाम 3:30 बजे पीटी
• Chrome DevTools का ज़्यादा इस्तेमाल करें और CTRL + TAB का कम
• DevTools में परफ़ॉर्मेंस डीबग करना

इसके अलावा, Rachel Andrew के वेब पर नया क्या है सेशन में शामिल होना न भूलें. यह सेशन 20 मई, 2025 को शाम 4:30 बजे (पैसिफ़िक समय) होगा.

हमारे नए वीडियो में, आपको हाइलाइट की गई नई सुविधाओं के बारे में खास जानकारी मिलेगी:

Gemini की मदद से, अपने वर्कस्पेस में सीएसएस में किए गए बदलावों को सेव करना

अब कुछ ही क्लिक में, Gemini आपके लिए सीएसएस में बदलाव कर सकता है और उसे ठीक कर सकता है. साथ ही, कनेक्ट किए गए फ़ाइल फ़ोल्डर की मदद से, अपने कंप्यूटर पर सोर्स फ़ाइलों में किए गए बदलावों को सेव कर सकता है.

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

कनेक्ट किए गए Workspace फ़ोल्डर के साथ, तत्व पैनल में जाकर एआई से पूछें पर क्लिक करें. Gemini से सीएसएस में बदलाव करने के लिए कहें. इसके बाद, बदलावों को लाइव टेस्ट करने के लिए जारी रखें पर क्लिक करें. फिर, सेव नहीं किए गए बदलाव को बड़ा करें. इसके बाद, Workspace पर लागू करें पर क्लिक करें. अंतर की समीक्षा करें और सभी सेव करें पर क्लिक करें.

वर्कस्पेस फ़ोल्डर को कनेक्ट करना और सोर्स फ़ाइलों में किए गए बदलावों को वापस सेव करना

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

देखें कि JavaScript के साथ यह सुविधा कैसे काम करती है:

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

Gemini से परफ़ॉर्मेंस के बारे में अहम जानकारी पाने के लिए सवाल पूछना

अब एक बटन पर क्लिक करके, Gemini से चैट शुरू की जा सकती है. इससे परफ़ॉर्मेंस से जुड़ी इन अहम जानकारी की जांच की जा सकती है और इन पर कार्रवाई की जा सकती है:

• फ़ेज़ के हिसाब से एलसीपी
• एलसीपी के लिए अनुरोध का पता लगाना
• रेंडर होने से रोकने के अनुरोध
• लेआउट शिफ़्ट की वजहें
• दस्तावेज़ को डाउनलोड करने में लगने वाला समय

इस सुविधा के बारे में अपने सुझाव/राय देने या शिकायत करने के लिए, crbug.com/371170842 पर जाएं.

Gemini की मदद से परफ़ॉर्मेंस से जुड़ी समस्याओं के बारे में एनोटेशन जोड़ना

अब Gemini से, परफ़ॉर्मेंस ट्रेस में मौजूद इवेंट के बारे में एनोटेशन जनरेट करने के लिए कहा जा सकता है.

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

Gemini के साथ की गई चैट में स्क्रीनशॉट जोड़ना

एआई से मदद पाएं पैनल में, अब photo_camera स्क्रीनशॉट लें बटन पर क्लिक करके, पेज का स्क्रीनशॉट लिया जा सकता है. इसके बाद, इसे Gemini के साथ की जा रही चैट में सबमिट किया जा सकता है.

अपने प्रॉम्प्ट में ज़्यादा विज़ुअल कॉन्टेक्स्ट देने के लिए, स्क्रीनशॉट का इस्तेमाल किया जा सकता है. उदाहरण के लिए, यह देखने के लिए कि क्या दिखने वाले सभी बटन के बीच की दूरी एक जैसी है.

परफ़ॉर्मेंस पैनल में नई अहम जानकारी

इस वर्शन में, परफ़ॉर्मेंस पैनल में दो नई अहम जानकारी जोड़ी गई है: डुप्लीकेट JavaScript और लेगसी JavaScript.

डुप्लीकेट JavaScript

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

JavaScript डिपेंडेंसी के बारे में जानने के लिए, खास जानकारी में मौजूद ट्रीमैप देखें पर भी क्लिक किया जा सकता है.

लेगसी JavaScript

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

अनुमान लगाने की सुविधा में अब नियम वाले टैग इस्तेमाल किए जा सकते हैं

अगर टैग मौजूद हैं, तो ऐप्लिकेशन > अनुमानित लोड में अब नियम सेट के लिए यूआरएल के बजाय टैग दिखते हैं.

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

Lighthouse 12.6.0

Lighthouse पैनल अब Lighthouse 12.6.0 पर काम करता है.

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

बदलावों की पूरी सूची भी देखें.

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

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

अन्य हाइलाइट

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

• नेटवर्क: सर्वर के समय के जाने-पहचाने फ़ॉर्मैट के लिए पार्सिंग की सुविधा जोड़ी गई.
• अब टेबल में मौजूद पंक्तियों को Cmd/Ctrl + क्लिक करके चुना जा सकता है (Chromium की समस्या: 409474445).
• परफ़ॉर्मेंस > अहम जानकारी > कैश मेमोरी में सेव किए गए डेटा के लिए, ज़्यादा समय तक इस्तेमाल की जा सकने वाली सेटिंग का इस्तेमाल करें अब उन ऐसेट को अनदेखा करता है जिनका टीटीएल 30 दिनों के बराबर या उससे ज़्यादा है.

सुलभता

इस वर्शन में, सुलभता से जुड़ी इन सुविधाओं को बेहतर बनाया गया है:

• परफ़ॉर्मेंस: ट्रेस में, शुरू करने वाले ऐरो अब ज़्यादा दिखते हैं.
• तत्व: अब A शॉर्टकट की मदद से, पूरे पेज के ऐक्सेसिबिलिटी ट्री व्यू को टॉगल किया जा सकता है (Chromium की समस्या: 40888478).

• अब स्क्रीन रीडर, इन चीज़ों के बारे में भी बोलकर सूचना देते हैं:

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

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

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

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

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

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

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

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