DevTools में नया क्या है - नवंबर 2026

पब्लिश होने की तारीख: 20 अक्टूबर, 2026

Chrome 155 और Chrome 156 को अक्टूबर में स्टेबल वर्शन के तौर पर रिलीज़ किया गया था. नवंबर में, आपके ब्राउज़र में डीबग करने और कॉन्टेंट बनाने की नई सुविधाएं जोड़ी गई हैं: एजेंट के लिए DevTools में सीएसएस स्टाइल की जांच करने की सुविधा, एलिमेंट में सीएसएस ऐंकर पोज़िशनिंग के लिए इंटरैक्टिव position-area एडिटर, और ऐप्लिकेशन में वेब इंस्टॉल मेनिफ़ेस्ट और विज्ञापन के सोर्स की जानकारी देने वाली डाइग्नोस्टिक्स की सुविधा. मेमोरी में, इस्तेमाल न किए जा रहे कॉन्टेक्स्ट वैरिएबल का भी पता लगाया जा सकता है. साथ ही, नेटवर्क में, अर्ली हिंट के प्रीलोड से जुड़ी चेतावनियों और पर्सिस्टेंट ओवरराइड की जांच की जा सकती है. इसके अलावा, परफ़ॉर्मेंस में, टाइमलाइन को ज़्यादा आसानी से नेविगेट किया जा सकता है.

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

एजेंट के लिए DevTools

Chrome DevTools का एमसीपी सर्वर, कोडिंग एजेंट के लिए सीएसएस स्टाइल की जांच करने, कॉन्फ़िगरेशन फ़ाइल के साथ काम करने, और चंक किए गए ट्रेस को पार्स करने की सुविधा जोड़ता है:

  • सीएसएस स्टाइल की जांच: get_css_styles टूल की मदद से, कंप्यूट की गई और मैच होने वाली स्टाइल की जांच करें. यह टूल, पेजेशन (pageSize और pageIdx) के साथ काम करता है. साथ ही, मैच होने वाले नियमों, इनहेरिट किए गए नियमों, सूडो-एलिमेंट, @keyframes, और @ नियमों (@position-try, @property, और @function) को फ़ॉर्मैट करता है.
  • कॉन्फ़िगरेशन फ़ाइल और पाथ कंट्रोल: सर्वर फ़्लैग को मैनेज करने के लिए, एक खास कॉन्फ़िगरेशन फ़ाइल का इस्तेमाल करें. साथ ही, कस्टम फ़ाइल सिस्टम रूट कॉन्फ़िगर करें और सीएलआई में डिफ़ॉल्ट रूप से --allow-unrestricted-paths का इस्तेमाल करें.
  • चंक किए गए ट्रेस बफ़र को पार्स करना: चंक किए गए ट्रेस बफ़र पार्सर और 1.2 जीबी के डिफ़ॉल्ट ट्रेस बफ़र की मदद से, बड़ी परफ़ॉर्मेंस रिकॉर्डिंग को पार्स करें. DevTools, हर पार्स के लिए ट्रेस इंजन इंस्टेंस को भी स्कोप करता है, ताकि मेमोरी लीक होने से रोका जा सके.
  • डायलॉग हैंडलिंग और कंसोल परसिस्टेंस: इनपुट टूल की कार्रवाइयों के दौरान ट्रिगर होने वाले JavaScript डायलॉग अपने-आप मैनेज होते हैं. साथ ही, एक ही दस्तावेज़ में नेविगेट करने पर, कंसोल मैसेज का इतिहास सुरक्षित रहता है.
  • मेन्यू अपडेट: सेटअप करने के निर्देश देखने के लिए, DevTools के मुख्य मेन्यू में जाकर, एजेंट के लिए Chrome DevTools पाएं पर क्लिक करें.

chrome-devtools-mcp डेटा स्टोर करने की जगह में जाकर ज़्यादा जानें.

एलिमेंट: विज़ुअल पोज़िशन-एरिया एडिटर, इंप्लिसिट ऐंकर सिलेक्शन, और सीएसएस ऑथरिंग से जुड़े अपडेट

एलिमेंट पैनल में, सीएसएस ऐंकर पोज़िशनिंग के लिए विज़ुअल टूल उपलब्ध कराए गए हैं. साथ ही, सीएसएस की जांच करने की सुविधा को बेहतर बनाया गया है:

  • विज़ुअल position-area एडिटर: स्टाइल टैब में, position-area डिक्लेरेशन के बगल में मौजूद इनलाइन स्वैच पर क्लिक करें. इससे, ऐंकर ग्रिड के क्षेत्रों को विज़ुअल तौर पर चुना जा सकता है, ऐक्सिस को एक साथ या अलग-अलग कॉन्फ़िगर किया जा सकता है, self कीवर्ड को टॉगल किया जा सकता है, और बिना ऐक्सिस वाले कीवर्ड को छोटा किया जा सकता है.
  • पॉपओवर अडॉर्नर पर इंप्लिसिट ऐंकर चुनने की सुविधा: जब किसी एलिमेंट में एक से ज़्यादा इंप्लिसिट ऐंकर हों, तो डीओएम ट्री में पॉपओवर अडॉर्नर पर राइट क्लिक करें. इससे, उससे जुड़े किसी भी ऐंकर एलिमेंट की जांच की जा सकती है और उस पर जाया जा सकता है.
  • ऐंकर पोज़िशनिंग बॉक्स ओवरले: ऐंकर-पोज़िशन वाले एलिमेंट को डीबग करते समय, सीधे व्यूपोर्ट ओवरले पर, इनसेट-मॉडिफ़ाइड कंटेनिंग ब्लॉक (आईएमसीबी) मार्जिन, पैडिंग, बॉर्डर, और कॉन्टेंट बॉक्स की जांच करें.
  • wrap-reverse फ़्लेक्सबॉक्स एडिटर में: स्टाइल टैब में मौजूद विज़ुअल फ़्लेक्सबॉक्स एडिटर से, सीधे flex-wrap: wrap-reverse को टॉगल करें.
  • @starting-style के लिए इनऐक्टिव सीएसएस स्टाइल और इनहेरिट किए गए नियम: इनऐक्टिव @starting-style नियमों और Inherited from सेक्शन की जांच करें. साथ ही, अपडेट के दौरान मैन्युअल तरीके से बड़ा और छोटा करने की स्थितियों को सेव रखें.
  • एक से ज़्यादा डैश वाली कस्टम प्रॉपर्टी और क्लास के लिए ऑटोकंप्लीट की सुविधा: तीन या उससे ज़्यादा डैश से शुरू होने वाली सीएसएस कस्टम प्रॉपर्टी (जैसे, ---theme-color) की जांच करें और उनमें बदलाव करें. साथ ही, नई क्लास जोड़ें के अपने-आप पूरा होने वाले सुझावों से, पहले से लागू की गई क्लास को फ़िल्टर करें.
एलिमेंट पैनल के डीओएम ट्री में, पॉपओवर अडॉर्नर के कॉन्टेक्स्ट मेन्यू से इंप्लिसिट ऐंकर एलिमेंट चुनना.
एलिमेंट पैनल के डीओएम ट्री में, पॉपओवर अडॉर्नर के कॉन्टेक्स्ट मेन्यू से इंप्लिसिट ऐंकर एलिमेंट को चुनना.

Chromium से जुड़ी समस्याएं: 553335561, 438724570, 413061413, 397184392, 539424116, 533783988

ऐप्लिकेशन: वेब इंस्टॉल मेनिफ़ेस्ट डाइग्नोस्टिक्स, विज्ञापन के सोर्स, और स्टोरेज टेबल से जुड़े अपडेट

ऐप्लिकेशन और समस्याएं पैनल, वेब इंस्टॉल मेनिफ़ेस्ट, विज्ञापन स्क्रिप्ट के सोर्स, और स्टोरेज की जांच के लिए डाइग्नोस्टिक्स जोड़ते हैं:

  • वेब इंस्टॉल मेनिफ़ेस्ट से जुड़ी गड़बड़ियों की जानकारी: समस्याएं पैनल में, वेब इंस्टॉल (navigator.install और <install>) मेनिफ़ेस्ट से जुड़ी गड़बड़ियों की जांच करें. इनमें फ़ेच न हो पाने, सिंटैक्स से जुड़ी गड़बड़ियां, अमान्य start_url वैल्यू, नाम या आईडी मौजूद न होने, और मेनिफ़ेस्ट मौजूद न होने जैसी गड़बड़ियां शामिल हैं. साथ ही, गड़बड़ी वाली मेनिफ़ेस्ट फ़ाइल के डायरेक्ट लिंक भी शामिल हैं.
  • विज्ञापन के सोर्स का कॉलम और मेट्रिक से जुड़ा दस्तावेज़: ऐप्लिकेशन पैनल के विज्ञापन सेक्शन में, विज्ञापन के सोर्स का नया कॉलम देखें. इससे आपको पता चलेगा कि विज्ञापन की स्क्रिप्ट, एंसेस्टर स्क्रिप्ट चेन या फ़िल्टर सूची के नियम से मैच करती है या नहीं. साथ ही, आपको विज्ञापन मेट्रिक पर दस्तावेज़ के टूलटिप और ज़्यादा जानें लिंक भी दिखेंगे.
  • IndexedDB और कुकी टेबल की बेहतर सुविधाएं: IndexedDB डेटा ग्रिड में नेस्ट किए गए ऑब्जेक्ट को बड़ा करें. इसमें डाइनैमिक लाइन की ऊंचाई होती है, जो आपकी स्क्रोल पोज़िशन को बनाए रखती है. साथ ही, कीबोर्ड या कॉन्टेक्स्ट मेन्यू का इस्तेमाल करके, कुकी टेबल में चुनी गई लाइनों को मिटाएं.
ऐप्लिकेशन पैनल के विज्ञापन सेक्शन में, विज्ञापन के सोर्स कॉलम और एंसेस्ट्री टूलटिप की जांच की जा रही है. साथ ही, समस्याओं वाले पैनल में वेब इंस्टॉल मेनिफ़ेस्ट की गड़बड़ी की जांच की जा रही है.
ऐप्लिकेशन पैनल के विज्ञापन सेक्शन में, विज्ञापन के सोर्स कॉलम और एंसेस्ट्री टूलटिप की जांच की जा रही है. साथ ही, समस्याओं के पैनल में वेब इंस्टॉल मेनिफ़ेस्ट की गड़बड़ी दिख रही है.

Chromium से जुड़ी समस्याएं: 333795265, 553428200, 514957134, 555304817, 555304814, 562142155

नेटवर्क: Early Hints प्रीलोड से जुड़ी चेतावनियां और लगातार ओवरराइड

नेटवर्क पैनल, अर्ली हिंट डाइग्नोस्टिक्स, लोकल ओवरराइड, और कस्टम हेडर वर्कफ़्लो को बेहतर बनाता है:

  • कैश मेमोरी बंद होने पर, अर्ली हिंट के पहले से लोड होने की चेतावनी: अर्ली हिंट हेडर सेक्शन में चेतावनी देखें. ऐसा तब होता है, जब 103 Early Hints रिस्पॉन्स में पहले से लोड होने वाले लिंक शामिल होते हैं और कैश मेमोरी बंद करें चालू होता है. इससे पता चलता है कि Chrome, पहले से लोड होने वाले उन लिंक को अनदेखा क्यों करता है.
  • लोकल ओवरराइड और कस्टम हेडर कॉलम को सेव रखना: पेज नेविगेशन के दौरान, लोकल रिस्पॉन्स बॉडी ओवरराइड को सेव रखें. साथ ही, कस्टम अनुरोध और रिस्पॉन्स हेडर कॉलम के कॉन्फ़िगरेशन और क्रम से लगाने के तरीके को रीलोड के दौरान सेव रखें. इसके अलावा, कॉन्टेक्स्ट मेन्यू से छोटे किए गए रॉ अनुरोध पेलोड को कॉपी करें.
नेटवर्क पैनल के हेडर टैब में, अर्ली हिंट्स प्रीलोड की चेतावनी की जांच की जा रही है. इसमें, कैश मेमोरी बंद करने की सुविधा चालू है और लोकल रिस्पॉन्स को बदलने की सुविधा चालू है.
नेटवर्क पैनल के हेडर टैब में, अर्ली हिंट्स प्रीलोड की चेतावनी की जांच की जा रही है. इसमें, कैश मेमोरी बंद करने की सुविधा चालू है और लोकल रिस्पॉन्स को बदलने की सुविधा चालू है.

Chromium से जुड़ी समस्याएं: 548701038, 559925510, 563542902, 556269542, 377410082

मेमोरी: हीप स्नैपशॉट में डेड कॉन्टेक्स्ट फ़ील्ड का पता लगाना

मेमोरी पैनल अब उन क्लोज़र वैरिएबल का पता लगाता है जिनका इस्तेमाल नहीं किया गया है और जो V8 एक्ज़ीक्यूशन कॉन्टेक्स्ट में सेव रहते हैं. DevTools, हीप स्नैपशॉट में एम्बेड किए गए V8 स्कोप मेटाडेटा को पार्स करता है, ताकि क्लोज़र को शेयर किए गए Context ऑब्जेक्ट के साथ जोड़ा जा सके. इसके बाद, यह उन डेड कॉन्टेक्स्ट फ़ील्ड को हाइलाइट करता है जिन्हें सिबलिंग लॉन्ग-लिव्ड क्लोज़र ने ज़िंदा रखा है. ऐसा तब होता है, जब कोई लाइव क्लोज़र उन्हें ऐक्सेस नहीं करता. इन्हें मेमोरी पर पड़ने वाले असर के हिसाब से क्रम में लगाया जाता है.

मेमोरी पैनल में, कॉन्टेक्स्ट की वजह से रिटेन किए गए ऑब्जेक्ट के हिसाब से हीप स्नैपशॉट को फ़िल्टर करना, ताकि शेयर किए गए V8 एक्ज़ीक्यूशन कॉन्टेक्स्ट की वजह से रिटेन किए गए डेड कॉन्टेक्स्ट वैरिएबल की जांच की जा सके.
मेमोरी पैनल में, कॉन्टेक्स्ट की वजह से रिटेन किए गए ऑब्जेक्ट के हिसाब से हीप स्नैपशॉट को फ़िल्टर करना, ताकि शेयर किए गए V8 एक्ज़ीक्यूशन कॉन्टेक्स्ट की वजह से रिटेन किए गए डेड कॉन्टेक्स्ट वैरिएबल की जांच की जा सके.

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

परफ़ॉर्मेंस: टाइमलाइन पर आसानी से नेविगेट करने की सुविधा और कॉल ट्री की स्थिति को सेव रखना

परफ़ॉर्मेंस पैनल, ज़्यादा रिस्पॉन्सिव फ़्लेम चार्ट नेविगेशन उपलब्ध कराता है. साथ ही, सभी पैनल में आपके विश्लेषण के कॉन्टेक्स्ट को सुरक्षित रखता है:

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

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

अन्य हाइलाइट

Chrome 155 और Chrome 156 में, DevTools पैनल में ये सुधार भी शामिल हैं:

  • सेंसर: सेंसर पैनल में मौजूद नए सीपीयू परफ़ॉर्मेंस टियर कंट्रोल से, navigator.cpuPerformance को सीधे तौर पर बदलें या सीपीयू थ्रॉटलिंग के चालू प्रीसेट को दिखने दें. (Chromium से जुड़ी समस्याएं: 449760252, 526856234, 526857820)
  • डिवाइस मोड: एम्युलेट किए गए हर डिवाइस के हिसाब से, स्केल और ज़ूम की सेटिंग को अपने-आप अडजस्ट होने की सुविधा को बनाए रखें. साथ ही, डिवाइस टूलबार को टॉगल करते समय, Save-Data ओवरराइड को बनाए रखें. (Chromium से जुड़ी समस्याएं: 561306841, 555160483)
  • कलर पिकर: गहरे रंग के बैकग्राउंड पर हल्के रंग के टेक्स्ट के लिए, एपीसीए कंट्रास्ट कलर के सुझाव देखें. साथ ही, आउट-ऑफ़-गैमट रंगों को NaN वैल्यू के बिना oklab() और oklch() में बदलें. (Chromium से जुड़ी समस्याएं: 560325669, 558821258)
  • सुलभता: बिना रंग वाले इंडिकेटर डॉट की मदद से, चालू रेगुलर एक्सप्रेशन फ़िल्टर टॉगल की पहचान करें. साथ ही, सीएसएस की खास जानकारी में स्क्रीन रीडर से फ़ॉन्ट प्रॉपर्टी के नाम सुनें. इसके अलावा, बेहतर कीबोर्ड फ़ोकस रिंग और सभी पैनल में हाई कंट्रास्ट विज़िबिलिटी की मदद से नेविगेट करें. (Chromium से जुड़ी समस्याएं: 556764882, 555848535, 555599825, 553804654)
सेंसर पैनल में सीपीयू की परफ़ॉर्मेंस टियर को बदलना. साथ ही, कलर पिकर में कंट्रास्ट रेशियो के सुझाव और oklch वैल्यू की जांच करना.
सेंसर पैनल में सीपीयू के परफ़ॉर्मेंस टियर को बदलना और कलर पिकर में कंट्रास्ट रेशियो के सुझाव और oklch वैल्यू देखना.

Chromium से जुड़ी समस्याएं: 449760252, 526856234, 526857820, 561306841, 555160483, 560325669, 558821258, 556764882, 555848535, 555599825, 553804654