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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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).

  • सुलभता:

    • जब सोर्स > डीओएम ब्रेकपॉइंट साइडबार मौजूद होता है, तब उसमें aria-labels जोड़े गए.
    • कंसोल में लाइव एक्सप्रेशन टेक्स्ट फ़ील्ड में, 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 में नया क्या है सीरीज़ में शामिल किए गए सभी विषयों की सूची.