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 में नया क्या है सीरीज़ में शामिल किए गए सभी विषयों की सूची.