DevTools और Chrome 139 में नया क्या है

Sofia Emelianova
Sofia Emelianova
GitHub

ज़्यादा भरोसेमंद और बेहतर तरीके से काम करने में मददगार Chrome DevTools

इस वर्शन में, Chrome DevTools ने प्रॉडक्ट की क्वालिटी को प्राथमिकता दी है. इसमें कई तरह की जानी-पहचानी समस्याओं को ठीक किया गया है. जैसे, लंबे समय से चली आ रही विज़ुअल गड़बड़ियां, इस्तेमाल से जुड़ी समस्याएं, डिज़ाइन में अंतर, परफ़ॉर्मेंस और फ़ंक्शन से जुड़ी समस्याएं. कुल मिलाकर, हमने खुली समस्याओं की संख्या में 27% की कमी की है.

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

हमने पर्दे के पीछे, टेस्ट कवरेज को बेहतर बनाने के लिए काफ़ी मेहनत की है. साथ ही, टेस्ट के मुश्किल फ़ेल होने की वजहों की जाँच की है. इसके अलावा, टेस्ट को ज़्यादा मज़बूत फ़ाउंडेशन पर माइग्रेट किया है. साथ ही, रास्ते में मिली गड़बड़ियों को ठीक किया है. हम टेस्ट से जुड़ी समस्याओं की संख्या को 54% तक कम करने में कामयाब रहे.

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

स्टाइलिंग के लिए, एआई की मदद से इमेज अपलोड करना

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

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

इसमें, इमेज अपलोड करने से पहले और बाद की जानकारी दी गई है.

नेटवर्क पैनल में मौजूद टेबल में अनुरोध हेडर जोड़ना

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

मेन्यू में 'अनुरोध हेडर' विकल्प जोड़ने से पहले और बाद में.

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

Google I/O 2025 की खास जानकारी देखें

अगर आपने अब तक Google I/O 2025 में हाइलाइट की गई Chrome DevTools की नई सुविधाएं आज़माई नहीं हैं, तो उन्हें आज़माएं. इनमें ये सुविधाएं शामिल हैं:

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

अन्य हाइलाइट

इस वर्शन में, कई गड़बड़ियां ठीक की गई हैं और सुधार किए गए हैं. इनमें से कुछ के बारे में यहां बताया गया है:

  • ऐप्लिकेशन: IndexedDB ऑब्जेक्ट स्टोर को मिटाने के लिए, अब पुष्टि करने वाला डायलॉग बॉक्स दिखेगा. ऐसा इसलिए, क्योंकि यह कार्रवाई वापस नहीं की जा सकती (crbug.com/326987147).
  • सोर्स: कोड की लाइनों के बगल में मौजूद लॉगपॉइंट और शर्त के साथ ब्रेकपॉइंट वाले बैज पर कर्सर घुमाने पर, अब टूलटिप दिखती है. इसमें उनसे जुड़ा लॉग मैसेज या शर्त दिखती है (crbug.com/40266230).

  • परफ़ॉर्मेंस:

    • लेआउट शिफ़्ट की वजह बनने वाले एलिमेंट की इनसाइट में अब बिना साइज़ वाली इमेज के लिंक दिखते हैं (crbug.com/416449602).
    • एलसीपी के लिए रिक्वेस्ट डिस्कवरी की अहम जानकारी में अब यह दिखता है कि इमेज लोड होने में कितना समय लगा.
    • थ्रॉटलिंग: थ्रॉटलिंग सेटिंग के पुराने फ़ॉर्मैट को ठीक किया गया है. कुछ उपयोगकर्ताओं ने इसे स्थानीय तौर पर सेव किया था.
    • इवेंट लॉग: फ़िल्टर करने की प्रोसेस को तेज़ किया गया (crbug.com/40783421).

  • ऐनिमेशन: झलक की सुविधा के लिए स्क्रीनशॉट दिखाने की सुविधा बंद कर दी गई है. इसकी वजह यह है कि ऐनिमेशन ग्रुप पर क्लिक करके उसकी झलक देखने की सुविधा, मिलती-जुलती और बेहतर सुविधा देती है (crbug.com/330179643).

  • सुलभता:

    • अगर सोर्स > डीओएम ब्रेकपॉइंट साइडबार मौजूद है, तो उसमें ऐरिया-लेबल जोड़े गए.
    • कंसोल में लाइव एक्सप्रेशन टेक्स्ट फ़ील्ड में, Shift + Tab कीबोर्ड नेविगेशन से जुड़ी समस्या ठीक की गई (crbug.com/408398435, crbug.com/420344137).
    • सेटिंग में अब ज़ूम इन/आउट/रीसेट करने के शॉर्टकट काम करते हैं: Cmd/Ctrl + +/-/0 (crbug.com/41484555).
    • तत्व > स्टाइल: सीएसएस के सुझाव और चेतावनी वाले आइकॉन (crbug.com/40706851) और ऐंगल क्लॉक अब कीबोर्ड से फ़ोकस किए जा सकते हैं (crbug.com/401212624, crbug.com/401213524).

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

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

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

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

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

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