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

Matthias Rohmer

पब्लिश होने की तारीख: 28 जुलाई, 2026

Chrome 151 में, एआई असिस्टेंस में एजेंट के साथ बातचीत करने के लिए ज़्यादा विजेट जोड़े गए हैं. साथ ही, Styles टैब में सीएसएस की खास जानकारी को ज़्यादा बारीकी से दिखाया गया है. इसके अलावा, ::interest-button स्यूडो-एलिमेंट के लिए सहायता जोड़ी गई है और DevTools MCP सर्वर में बड़े अपडेट किए गए हैं.

एजेंट के लिए DevTools

हाल ही में रिलीज़ हुए v1.6.0 तक के वर्शन में, एजेंट के लिए Chrome DevTools ने कोडिंग एजेंट के लिए डीबग करने की सुविधाओं को काफ़ी हद तक बढ़ा दिया है. जैसे, Antigravity, Claude, Codex वगैरह.

वर्शन v1.4.0 से लेकर v1.6.0 तक के अपडेट में ये शामिल हैं:

• मेमोरी डीबग करने की बेहतर सुविधा: नया get_heapsnapshot_duplicate_strings टूल, JavaScript हीप में ज़रूरत से ज़्यादा स्ट्रिंग असाइन करने की वजह से होने वाली मेमोरी की बर्बादी का पता लगाता है. get_heapsnapshot_details, ऑब्जेक्ट की कुल संख्या और मेमोरी साइज़ के एग्रीगेट दिखाता है. साथ ही, फ़िल्टर किए जा सकने वाले हीप स्नैपशॉट एग्रीगेट और जीसी रूट बनाए रखने वाले पाथ दिखाता है. यह स्नैपशॉट के बीच मेमोरी के अंतर की तुलना करने की सुविधा भी देता है.
• GCF फ़ॉर्मैट में कोड में बदलना (experimentalGcfFormat): इसमें, GCF-encoded टूल के जवाबों के लिए सहायता जोड़ी गई है. इससे क्लाइंट के लिए बैंडविथ और पार्सिंग की क्षमता को ऑप्टिमाइज़ किया जा सकता है.
• एक साथ कई एजेंट को पेज रूट करने की सुविधा और अलग-अलग कॉन्टेक्स्ट: --experimentalPageIdRouting की मदद से, एक साथ कई सब-एजेंट अलग-अलग ब्राउज़र टैब पर काम कर सकते हैं. इसके लिए, उन्हें pageId रूटिंग का इस्तेमाल करना होगा. --isolated मोड और isolatedContext पैरामीटर, हर सेशन के लिए कुछ समय के लिए Chrome प्रोफ़ाइलें और स्टोरेज बनाते हैं.

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

एआई असिस्टेंस

इमेज/स्क्रीनकास्ट: एआई की मदद से काम करने वाला पैनल, जिसमें नया नेटवर्क ट्रैक इनलाइन विजेट और GFM टेबल के साथ इंटरैक्टिव वॉकट्रू दिखाया गया है.

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

इसके अलावा, जवाब के मैसेज अब फ़ॉर्मैट किए गए टेबल डेटा की खास जानकारी के लिए, GitHub Flavored Markdown (GFM) टेबल को पूरी तरह से रेंडर करने की सुविधा देते हैं.

सीएसएस स्पेसिफ़िसिटी का ब्रेकडाउन और ::interest-button के साथ काम करने की सुविधा

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

• सीएसएस स्पेसिफ़िसिटी के बारे में ज़्यादा जानकारी: अब स्टाइल टैब में सिलेक्टर के नामों पर कर्सर घुमाने से, ज़्यादा जानकारी वाला टूलटिप दिखता है. इसमें यह बताया जाता है कि हर क्लास, आईडी, एलिमेंट या सूडो-क्लास, (a, b, c)स्पेसिफ़िसिटी कैलकुलेशन में कैसे योगदान देता है. यह कम्यूनिटी का योगदान है. इसके लिए, @hjanuschka का धन्यवाद!
• ::interest-button छद्म-एलिमेंट: DevTools अब Elements ट्री आउटलाइन और Styles टैब में, नए ::interest-button सीएसएस छद्म-एलिमेंट (एचटीएमएल interesttarget स्पेसिफ़िकेशन का हिस्सा) को पूरी तरह से पार्स करता है और दिखाता है.
• एचटीएमएल रिलेशन एट्रिब्यूट के लिए, टारगेट को एसिंक्रोनस तरीके से लिंक करना: popovertarget, interesttarget, और commandfor जैसे एचटीएमएल एट्रिब्यूट अब टारगेट DOM नोड को एसिंक्रोनस तरीके से फ़ेच करते हैं और उन्हें विज़ुअली तौर पर इनलाइन लिंक करते हैं.
• बड़ी स्टाइलशीट के लिए लेज़ी रेंडरिंग: अगर किसी एलिमेंट में 200 से ज़्यादा सीएसएस प्रॉपर्टी हैं, तो Styles टैब अब लेज़ी प्रॉपर्टी डेकोरेशन का इस्तेमाल करता है. इससे रेंडर ब्लॉक होने में लगने वाला समय कई सेकंड से घटकर मिलीसेकंड हो जाता है.

Chromium से जुड़ी समस्याएं: 353436867, 453705247, 524406293, 457696384, 524131115

मेमोरी डीबग करना: नेटिव कॉन्टेक्स्ट एट्रिब्यूशन और क्लोज़र बनाए रखना

मल्टी-फ़्रेम या मल्टी-कॉन्टेक्स्ट वाले वेब ऐप्लिकेशन में, JavaScript की मुश्किल मेमोरी लीक का पता लगाना अब मेमोरी पैनल में ज़्यादा आसान हो गया है:

• नेटिव V8 कॉन्टेक्स्ट एट्रिब्यूशन: अब हीप स्नैपशॉट, दो चरणों वाले एट्रिब्यूशन एल्गोरिदम को लागू करते हैं. स्टैटिक पॉइंटर इन्फ़रेंस, native_context मैप को हल करता है. वहीं, ग्राफ़ रीचेबिलिटी, बाकी ऑब्जेक्ट को ट्रैक करता है. किसी एक नेटिव कॉन्टेक्स्ट से ऐक्सेस किए जा सकने वाले ऑब्जेक्ट, सीधे तौर पर उस कॉन्टेक्स्ट से जुड़े होते हैं. वहीं, एक से ज़्यादा कॉन्टेक्स्ट से ऐक्सेस किए जा सकने वाले ऑब्जेक्ट को शेयर किए गए कॉन्टेक्स्ट बकेट में रखा जाता है.
• "कॉन्टेक्स्ट की वजह से रिटेन किए गए ऑब्जेक्ट" फ़िल्टर: Heap Snapshot पर्सपेक्टिव में मौजूद नए यूज़र इंटरफ़ेस (यूआई) फ़िल्टर की मदद से, उन ऑब्जेक्ट को अलग किया जा सकता है जिन्हें सिर्फ़ JavaScript क्लोज़र कॉन्टेक्स्ट ऑब्जेक्ट के ज़रिए रिटेन किया गया है.
• प्रॉपर्टी दिखाने का क्रम कॉन्फ़िगर किया जा सकता है: कॉन्टेक्स्ट मेन्यू में एक नया टॉगल जोड़ा गया है. प्रॉपर्टी को वर्णमाला के क्रम में लगाएं (यह डिफ़ॉल्ट रूप से चालू होता है). इसकी मदद से, हीप ऑब्जेक्ट की प्रॉपर्टी की जांच करते समय, वर्णमाला के क्रम में लगाने और JS प्रॉपर्टी के ओरिजनल इंसर्शन ऑर्डर के बीच टॉगल किया जा सकता है.

Chromium से जुड़ी समस्याएं: 497855658, 423838364, 40833016

एक्सटेंशन एपीआई को प्रॉमिसिफ़ाइड किया गया है और सुरक्षा को बेहतर बनाया गया है

DevTools एक्सटेंशन एपीआई को आधुनिक एसिंक्रोनस पैटर्न और बेहतर सुरक्षा कंट्रोल के साथ अपडेट किया गया है:

• नेटिव प्रॉमिस का समर्थन: chrome.devtools.network (getHAR(), Request.getContent()), chrome.devtools.panels, और chrome.devtools.inspectedWindow (eval(), getResources(), Resource.getContent(), Resource.setContent()) में मौजूद एसिंक तरीके, अब कॉलबैक पैरामीटर के बिना कॉल किए जाने पर स्टैंडर्ड JavaScript Promise ऑब्जेक्ट दिखाते हैं.
• एक्सटेंशन की सुरक्षा से जुड़ी सीमाएं: DevTools एक्सटेंशन अब ब्लॉक किए गए टारगेट यूआरएल के HAR संसाधन फ़ेच नहीं कर सकते. साथ ही, उन्हें inspectedWindow.eval में क्रॉस-एक्सटेंशन के आकलन के लिए extensionsOnChromeUrls अनुमतियों को पूरा करना होगा. इसके अलावा, file:// संसाधनों पर allowFileAccess जांच लागू करनी होंगी.

अन्य हाइलाइट और गड़बड़ियां ठीक की गईं

इस रिलीज़ में, कई छोटी-मोटी गड़बड़ियां ठीक की गई हैं और कुछ सुधार किए गए हैं:

• परफ़ॉर्मेंस: सॉफ़्ट एफ़सीपी (साइट का पहला एलिमेंट लोड होने में लगने वाला समय) टाइमलाइन मार्कर को सॉफ़्ट एलसीपी और सॉफ़्ट नेविगेशन मार्कर के साथ जोड़ा गया है. साथ ही, अपडेट की गई जानकारी वाले ड्रॉअर हेडर भी जोड़े गए हैं.
• परफ़ॉर्मेंस: PressureObserver सुविधा के बिना Android डिवाइसों पर सीपीयू थ्रॉटलिंग कैलिब्रेशन के दौरान, कंप्यूट प्रेशर की जांच को स्किप करने के लिए गार्ड जोड़े गए.
• नेटवर्क: cURL के तौर पर कॉपी करें सुविधा को अपडेट किया गया है, ताकि टारगेट यूआरएल में --url प्रीफ़िक्स जोड़ा जा सके. इससे डैश वाले यूआरएल के लिए, कमांड-लाइन फ़्लैग की गलत व्याख्या को रोका जा सकेगा.
• सोर्स: सोर्स मैप के स्कोप रिज़ॉल्यूशन को डिफ़ॉल्ट रूप से चालू किया गया है. इससे डीबग करने के दौरान, वैरिएबल स्कोप रिज़ॉल्यूशन और सिंबल को अन-मिनिफ़ाई करने की प्रोसेस बेहतर होती है.
• सेटिंग: नए iPhone और Pixel मॉडल के लिए, डिवाइस के इम्यूलेशन से जुड़े अपडेट किए गए प्रीसेट. इनमें सुरक्षित क्षेत्र के इनसेट की पुष्टि की गई है. साथ ही, कस्टम डिवाइस के User-Agent फ़ील्ड में navigator.userAgent पहले से भरा होता है. (Chromium से जुड़ी समस्याएं: 40718410, 518215252)
• सेटिंग: लिंक हैंडलिंग सेटिंग के ड्रॉप-डाउन को अपडेट किया गया है, ताकि एक्सटेंशन के ओरिजनल यूआरएल के बजाय, एक्सटेंशन के ऐसे टाइटल दिखें जिन्हें आसानी से समझा जा सके.
• Lighthouse: बंडल किए गए Lighthouse मॉड्यूल को 13.4.0 वर्शन पर अपडेट किया गया. (Chromium की समस्या: 40543651)

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

Chrome 151 में, सुलभता से जुड़ी इन सुविधाओं को बेहतर बनाया गया है:

• तत्व: Windows के हाई कंट्रास्ट / @media (forced-colors: active) मोड में, टॉगल किए गए टूलबार आइकॉन (जैसे कि स्क्रिप्ट को फिर से शुरू करने वाला Resume बटन) की विज़िबिलिटी को वापस लाया गया है. इसके लिए, बैकग्राउंड के रंग को बदलने वाले ऐसे ओवरराइड हटाए गए हैं जो एक-दूसरे से मेल नहीं खाते. (Chromium की समस्या: 519762185)
• Console: Console में, काटे गए LiveExpression की स्ट्रिंग वैल्यू के लिए, ऐक्सेस की जा सकने वाली पूरी जानकारी वाली title टूलटिप जोड़ी गई हैं.