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

Google I/O 2025 का वर्शन

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

शानदार नई सुविधाओं के बारे में जानने के लिए, इन पर ट्यून इन करें:

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

इसके अलावा, 20 मई, 2025 को पैसिफ़िक समय के मुताबिक शाम 4:30 बजे, रेचल एंड्रयू के वेब सेशन में क्या नया है सेशन को ज़रूर देखें.

हाल ही में किए गए अपडेट के बारे में जानने के लिए, हमारा नया वीडियो देखें:

Gemini की मदद से, अपने Workspace में सीएसएस में बदलाव करना और उन्हें सेव करना

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

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

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

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

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

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

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

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

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

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

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