DevTools में नया क्या है (Chrome 152)

Matthias Rohmer

पब्लिश होने की तारीख: 25 अगस्त, 2026

Chrome 152 में, नेटवर्क डीबग करने की सुविधा को बेहतर बनाया गया है. इसमें अनुरोध फिर से भेजने और बाइनरी पेलोड की जांच करने की सुविधा शामिल है. साथ ही, इसमें कस्टम एलिमेंट अडॉर्नर और एलिमेंट में बेहतर सीएसएस नेस्टिंग की सुविधा भी शामिल है. इसके अलावा, इसमें परफ़ॉर्मेंस लाइव मेट्रिक में सॉफ्ट नेविगेशन के लिए, Core Web Vitals, कंसोल में स्ट्रक्चर्ड टेबल एक्सपोर्ट करने की सुविधा, और DevTools MCP सर्वर के लिए सुधार भी शामिल हैं.

एजेंट के लिए DevTools

Chrome DevTools MCP सर्वर के नए वर्शन v1.7.0 में, कोडिंग एजेंट के लिए मेमोरी डीबग करने की सुविधाएं जोड़ी गई हैं. ये सुविधाएं, Antigravity, Claude, Codex वगैरह के लिए पहले से उपलब्ध हैं:

• हीप स्नैपशॉट ऑब्जेक्ट की जानकारी (get_heapsnapshot_object_details): हीप स्नैपशॉट से सीधे तौर पर, JavaScript ऑब्जेक्ट की प्रॉपर्टी, क्लास के नाम, और GC रूट की ज़्यादा जानकारी देखें.
• नेटिव V8 कॉन्टेक्स्ट फ़िल्टरिंग: नेटिव एक्ज़ीक्यूशन कॉन्टेक्स्ट के हिसाब से, हीप स्नैपशॉट ऑब्जेक्ट फ़िल्टर करें. साथ ही, स्नैपशॉट की खास जानकारी में नेटिव कॉन्टेक्स्ट की जांच करें.
• डेमॉन की स्थिरता और लाइफ़साइकल में सुधार: इसमें ये सुविधाएं जोड़ी गई हैं: हर नेविगेशन के लिए नेटवर्क अनुरोध को सीमित समय तक सेव करके रखना, सेशन आईडी की पुष्टि करना, सीएलआई और डेमॉन के वर्शन के मेल न खाने पर चेतावनियां दिखाना, और कॉन्टेक्स्ट डिस्पोज़ल पर वर्कर को बंद करना.

ज़्यादा जानने और शुरू करने के लिए, GitHub पर DevTools for agents रिपॉज़िटरी पर जाएं.

नेटवर्क: अनुरोधों में बदलाव करना और उन्हें फिर से भेजना, प्रीलोडिंग की इनसाइट, और बाइनरी पेलोड डिकोडिंग

• फ़ेच और XHR अनुरोध फिर से भेजें: "XHR को फिर से चलाएं" कॉन्टेक्स्ट मेन्यू आइटम का नाम बदलकर अब फिर से भेजें कर दिया गया है. अब यह फ़ेच किए जा सकने वाले सभी नेटवर्क अनुरोधों के साथ काम करता है. साथ ही, स्टैंडर्ड अनुरोधों को fetch() कॉल में बदलता है. इसके अलावा, यह XHR के साथ-साथ पूरी रीप्ले फ़िडेलिटी को बनाए रखता है. अनुरोधों से यह भी पता चलता है कि उन्हें किस कॉन्टेक्स्ट में लागू किया गया है और उन्हें किसने शुरू किया है.
• पहले से लोड किया गया कॉलम और "प्रीलोड एलिमेंट के तौर पर कॉपी करें": पहले से लोड किया गया नया कॉलम दिखाता है कि क्या स्पेकुलेटिव पहले से लोड करने का इस्तेमाल करके नेटवर्क का अनुरोध शुरू किया गया था. किसी भी अनुरोध पर राइट क्लिक करके, प्रीलोड एलिमेंट के तौर पर कॉपी करें को चुना जा सकता है. इससे एक <link rel="preload"> टैग जनरेट होता है, जिसे एचटीएमएल में इस्तेमाल किया जा सकता है. अर्ली हिंट को अब शुरुआत करने वाला कॉलम में कैटगरी के हिसाब से रखा गया है.
• अनुरोध के पेलोड के लिए बाइनरी व्यूअर: पेलोड टैब में अब बाइनरी और कंप्रेस किए गए अनुरोध के पेलोड के लिए, डिकोडिंग के तरीके के विकल्प (Base64, हेक्स, और UTF-8) शामिल हैं. ये विकल्प, रिस्पॉन्स टैब में मौजूद विकल्पों के जैसे ही हैं.
• पिन किया गया अनुरोध नंबर कॉलम: अनुरोध # कॉलम को अब नेटवर्क डेटा ग्रिड में पहली पोज़िशन पर पिन कर दिया गया है, ताकि अनुरोध को आसानी से रेफ़र किया जा सके.
• एक ही साइट के होस्ट को फ़िल्टर करना: नेटवर्क फ़िल्टर बार में डोमेन, होस्टनेम या पोर्ट (जैसे, localhost या example.com) खोजने पर, अब एक ही साइट के अनुरोधों को सटीक तरीके से फ़िल्टर किया जाता है.
• क्वेरी पैरामीटर को डिफ़ॉल्ट रूप से डिकोड करना: अब सभी अनुरोधों के लिए, पेलोड टैब में मौजूद क्वेरी और फ़ॉर्म पैरामीटर अपने-आप डिकोड हो जाते हैं.

Chromium से जुड़ी समस्याएं: 40726969, 41299075, 40138847, 40222701, 525848667, 507077182, 498482622, 520437951, 40267477

एलिमेंट: कस्टम एलिमेंट अडॉर्नर, नेस्ट किए गए सीएसएस पैरंट सिलेक्टर इंटरैक्शन, और $0 स्यूडो-एलिमेंट सिलेक्शन

Elements पैनल में, वेब कॉम्पोनेंट और मॉडर्न सीएसएस की जांच करना और उन्हें लिखना ज़्यादा तेज़ और आसान है:

• कस्टम एलिमेंट अडॉर्नर बैज: कस्टम एचटीएमएल एलिमेंट (जिन्हें हाइफ़न वाले टैग या पसंद के मुताबिक बनाए गए बिल्ट-इन एलिमेंट के लिए is="..." एट्रिब्यूट से पहचाना जाता है) अब डीओएम ट्री आउटलाइन में custom-element अडॉर्नर बैज दिखाते हैं.
• नेस्ट की गई सीएसएस के पैरंट सिलेक्टर के साथ इंटरैक्शन और खास जानकारी: नेस्ट की गई सीएसएस के नियमों और इनहेरिट की गई नेस्ट की गई नियमों में पैरंट सिलेक्टर पर कर्सर घुमाने पर, अब पेज पर मैच होने वाले एलिमेंट हाइलाइट होते हैं. साथ ही, Styles टैब में फ़िल्टर करने पर भी ये एलिमेंट दिखते हैं. @nested-declarations नियमों के लिए, टूलटिप पॉपओवर में ज़्यादा जानकारी जोड़ी गई है.
• $0 के ज़रिए सूडो-एलिमेंट चुनना: अब एलिमेंट के डीओएम ट्री में ::before या ::after जैसे सूडो-एलिमेंट चुनने पर, वे सीधे तौर पर $0 कंसोल वैरिएबल से जुड़ जाते हैं, ताकि JavaScript की तुरंत जांच की जा सके.
• text-wrap और <image> टाइप के लिए अपने-आप पूरा होने की सुविधा: Styles pane अब text-wrap (wrap, nowrap, balance, pretty, stable) के लिए सभी कीवर्ड वैल्यू का सुझाव देता है. साथ ही, <image> डेटा टाइप स्वीकार करने वाली सीएसएस प्रॉपर्टी को अपने-आप पूरा करता है.
• बॉक्स मॉडल के स्क्रोलबार के बारे में जानकारी: बॉक्स मॉडल मेट्रिक का डायग्राम अब कॉन्टेंट बॉक्स के डाइमेंशन का सटीक हिसाब लगाता है और उन्हें रेंडर करता है. ऐसा तब होता है, जब एलिमेंट में दिखने वाले स्क्रोलबार मौजूद हों.

Chromium से जुड़ी समस्याएं: 367440148, 535517817, 535522242, 535523039, 537724428, 399305533, 334984154, 383355294, 326260752, 389342065

परफ़ॉर्मेंस: लाइव मेट्रिक और कस्टम स्क्रीनशॉट प्रीसेट में सॉफ्ट नेविगेशन मेट्रिक

• सॉफ़्ट नेविगेशन के लिए लाइव मेट्रिक की सुविधा: लाइव मेट्रिक व्यू अब सिंगल-पेज ऐप्लिकेशन में क्लाइंट-साइड सॉफ़्ट नेविगेशन के लिए, Core Web Vitals (जैसे कि एलसीपी और आईएनपी) को डिफ़ॉल्ट रूप से कैप्चर और रिपोर्ट करता है. यह web-vitals v6.0.0 पर अपग्रेड होने की वजह से काम करता है.
• कस्टम स्क्रीनशॉट कैप्चर करने के प्रीसेट: परफ़ॉर्मेंस पैनल में सीडीपी ट्रेसिंग के लिए, कॉन्फ़िगर किए जा सकने वाले स्क्रीनशॉट फ़्रेम के साइज़ और संख्या की सीमा के प्रीसेट उपलब्ध कराए गए हैं. इससे मेमोरी बजट में विज़ुअल रिकॉर्डिंग की फ़िडेलिटी को पसंद के मुताबिक बनाया जा सकता है.
• console.profileEnd() ट्रेस रीवीलर: अब आपके कोड या कंसोल में console.profileEnd() को कॉल करने पर, परफ़ॉर्मेंस पैनल में रिकॉर्ड किया गया ट्रेस अपने-आप खुल जाता है और दिखता है.
• एक्सटेंसिबिलिटी एपीआई के कस्टम ट्रैक की खास जानकारी: परफ़ॉर्मेंस ट्रेस की खास जानकारी अब एक्सटेंसिबिलिटी एपीआई का इस्तेमाल करके रजिस्टर किए गए कस्टम ट्रैक ग्रुप को प्रोसेस करती है और उन्हें दिखाती है.

Chromium से जुड़ी समस्याएं: 514721939, 490140054, 536954453, 535506117

Console: टेबल को Markdown या CSV फ़ॉर्मैट में एक्सपोर्ट करें और साइड-इफ़ेक्ट से सुरक्षा पाएं

• कंसोल टेबल को Markdown या CSV के तौर पर कॉपी करें: console.table() का इस्तेमाल करके लॉग की गई टेबल को अब सीधे अपने क्लिपबोर्ड पर कॉपी किया जा सकता है. इसके लिए, फ़ॉर्मैट की गई Markdown टेबल या संदर्भ मेन्यू से CSV डेटा का इस्तेमाल करें.
• साइड-इफ़ेक्ट के आकलन से सुरक्षा: डीबगर की होवर आकलन सुविधा अब new, टैग किए गए टेंप्लेट लिटरल, डाइनैमिक import(), और delete ऑपरेटर वाले एक्सप्रेशन से सुरक्षा करती है. इससे, प्रोग्राम के रुकने के दौरान गलती से होने वाले स्टेट म्यूटेशन को रोका जा सकता है.

Chromium से जुड़ी समस्याएं: 40924951, 40133606

अन्य हाइलाइट

DevTools के अन्य सबसिस्टम में किए गए अहम सुधारों का कलेक्शन:

• सोर्स: क्विक ओपन की सुविधा अब लोकल वर्कस्पेस की फ़ाइलों को प्राथमिकता देती है. इससे उन्हें ज़्यादा स्कोर मिलता है. इसलिए, नेटवर्क रिसॉर्स के मुकाबले वर्कस्पेस की फ़ाइलें सबसे ऊपर दिखती हैं. (Chromium की समस्या: 40260136)
• मेमोरी: Heap Snapshot Summary व्यू में अब कुल ऑब्जेक्ट की संख्या दिखती है. साथ ही, चुने गए टाइप के लिए एग्रीगेट किए गए शैलो साइज़ भी दिखते हैं. इसमें नेटिव एक्ज़ीक्यूशन कॉन्टेक्स्ट फ़िल्टर भी शामिल हैं. (Chromium की समस्या: 497855658)
• ऐप्लिकेशन: विज्ञापन पैनल में, हाइलाइट किए गए विज्ञापन टॉगल को सीधे पैनल में ले जाया गया है. साथ ही, क्लिक किए जा सकने वाले विज्ञापन आईफ़्रेम एलिमेंट आईडी जोड़े गए हैं, ताकि क्रम में फ़्रेम दिख सकें. इसके अलावा, हर फ़्रेम के लिए मेट्रिक ब्रेकडाउन टेबल भी जोड़ी गई है. (Chromium की समस्या: 514957134)
• ऐप्लिकेशन: स्टोरेज पैनल में मौजूद साइट डेटा मिटाएं सेक्शन को फिर से डिज़ाइन किया गया है. अब यह एक ही ग्रुप में दिखता है (Chromium की समस्या: 375867286). साथ ही, बैक-फ़ॉरवर्ड कैश मेमोरी को वापस लाने के बाद, कैश मेमोरी स्टोरेज की डुप्लीकेट एंट्री की समस्या को ठीक किया गया है (Chromium की समस्या: 484693244).
• एक्सटेंशन: chrome.devtools.panels के सभी एसिंक तरीके, अब बिना कॉलबैक के कॉल किए जाने पर, नेटिव तौर पर JavaScript प्रॉमिस दिखाते हैं. (Chromium की समस्या: 496604551)
• सेटिंग: डिफ़ॉल्ट नेटवर्क थ्रॉटलिंग प्रीसेट और कस्टम थ्रॉटलिंग कॉन्फ़िगरेशन को अलग-अलग सेक्शन में बांटा गया है. (Chromium की समस्या: 342409451)
• Lighthouse: बंडल किए गए Lighthouse मॉड्यूल को 13.4.1 वर्शन पर अपडेट किया गया. (Chromium की समस्या: 40543651)
• समस्याएं: DevTools, loading="lazy" का इस्तेमाल करने वाली किसी इमेज में साफ़ तौर पर width या height डाइमेंशन मौजूद न होने पर चेतावनी दिखाता है.
• डिवाइस मोड: ज़ूम करने के लेवल मेन्यू को आसान बनाया गया है. इसमें विंडो के हिसाब से फ़िट करें विकल्प को शामिल किया गया है. साथ ही, फ़्रेम ग्राफ़िक उपलब्ध न होने पर, डिवाइस फ़्रेम दिखाएं टॉगल को बंद कर दिया गया है.

सुलभता सुविधाओं में सुधार

Chrome 152 में, सुलभता से जुड़े ये सुधार किए गए हैं:

• तत्व और सुलभता: कॉन्टेक्स्ट मेन्यू के विकल्प जोड़े गए हैं, ताकि Elements DOM ट्री और Accessibility Tree View के बीच आसानी से स्विच किया जा सके. साथ ही, सुलभता नोड के लिए "स्क्रोल करके देखें" विकल्प जोड़ा गया है. (Chromium की समस्याएं: 417929842)
• सुलभता: कॉन्टेक्स्ट मेन्यू का इस्तेमाल करके, सुलभता ट्री नोड और सबट्री को सादे टेक्स्ट के तौर पर कॉपी करने की सुविधा जोड़ी गई है. (Chromium की समस्या: 417929842)
• तत्व: डार्क मोड में काम करते समय, एलिमेंट पैनल में खोज के नतीजों को हाइलाइट करने के लिए कम कंट्रास्ट वाले रंगों को ठीक किया गया है. (Chromium की समस्या: 491718898)
• नेविगेशन: DevTools को अलग विंडो में अनडॉक करने या वापस टैब में डॉक करने पर, अब मुख्य मेन्यू बटन पर फ़ोकस नहीं होता.
• सेटिंग: एआई सेटिंग में, "ज़्यादा दिखाएं" और "कम दिखाएं" बटन में सुलभता से जुड़ी जानकारी जोड़ी गई है.