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