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

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

Chrome 149 में, एआई की मदद से मिलने वाली सहायता को बेहतर बनाया गया है. साथ ही, ऐप्लिकेशन पैनल में WebMCP डीबग करने वाले एक्सपेरिमेंटल टूल जोड़े गए हैं. इसके अलावा, सीएसएस के लिए कोड पूरा करने की सुविधा को भी बढ़ाया गया है.

एजेंट के लिए DevTools

एजेंट के लिए Chrome DevTools का एमसीपी सर्वर और सीएलआई अब आधिकारिक तौर पर स्टेबल हो गया है! पूरी सूचना यहां पढ़ें.

v1.1.1 रिलीज़ में जोड़ी गई मुख्य सुविधाओं और नए टूल में ये शामिल हैं:

  • कस्टम थर्ड पार्टी, पेज पर दिखने वाले टूल: अब पेज, JavaScript की मदद से कस्टम डीबगिंग टूल तय कर सकते हैं. ये टूल, एजेंट के लिए DevTools में खोजे जा सकते हैं और कॉल किए जा सकते हैं.
  • WebMCP डीबग करना: एजेंट के लिए DevTools अब WebMCP टूल की सूची बना सकते हैं और उन्हें लागू कर सकते हैं.
  • कस्टम एचटीटीपी हेडर का इम्यूलेशन: इम्यूलेशन टूल में एचटीटीपी हेडर (जैसे कि पुष्टि करने वाले टोकन या कस्टम उपयोगकर्ता-एजेंट) के लिए सहायता जोड़ता है.

तीसरे पक्ष के टूल और WebMCP डीबग करने की सुविधा अब भी एक्सपेरिमेंट के तौर पर उपलब्ध है. यह सुविधा डिफ़ॉल्ट रूप से चालू नहीं होती. इन्हें इस्तेमाल करने के तरीके के बारे में जानने के लिए, टूल का रेफ़रंस देखें. जब ये सुविधाएं प्रोडक्शन के लिए तैयार हो जाएंगी, तब हम developer.chrome.com पर इनके बारे में ज़्यादा दस्तावेज़ उपलब्ध कराएंगे.

एजेंट के लिए DevTools से जुड़े सबसे नए अपडेट पाने और योगदान देने के लिए, GitHub रिपॉज़िटरी पर जाएं. हमारे दस्तावेज़ पढ़ें या Google I/O के इस वीडियो सेशन को देखें: एजेंट के लिए Chrome DevTools की मदद से, एआई कोडिंग के वर्कफ़्लो को बेहतर बनाएं.

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

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

  • एजेंट की मदद से समस्या हल करना: एआई की मदद से अब विजेट सीधे तौर पर चैट इंटरफ़ेस में रेंडर किए जाते हैं. पहले, इन्हें सादे टेक्स्ट मार्कडाउन में रेंडर किया जाता था. इन विजेट में, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी और उससे जुड़ी इनसाइट, एलसीपी एलिमेंट, एलसीपी ब्रेकडाउन, बॉटम-अप थ्रेड ऐक्टिविटी वगैरह शामिल होती हैं. विजेट में मौजूद दिखाएं लिंक पर क्लिक करने से, आपको DevTools में इस जानकारी के सोर्स पर ले जाया जाता है.
  • कोडिंग एजेंट में कॉपी करें: अब बातचीत के आखिर में, बातचीत को कॉपी करने के लिए एक बटन दिया गया है. इस बटन का इस्तेमाल करके, बातचीत को प्रॉम्प्ट के तौर पर या पूरी बातचीत को कॉपी किया जा सकता है. इसके बाद, इसे अपने पसंदीदा कोडिंग एजेंट में चिपकाया जा सकता है.
  • अपग्रेड की गई सुविधाएं: एआई असिस्टेंस के पास अब Lighthouse और उससे जुड़ी अहम जानकारी का ऐक्सेस है. इससे वह आपके पेज का पूरी तरह से विश्लेषण कर सकता है और आपको काम की सलाह दे सकता है.
  • बेहतर जवाब: एआई की मदद से मिलने वाले जवाब, Gemini 3 और बेहतर प्रीऐंबल का इस्तेमाल करके तैयार किए जाते हैं. इसलिए, ये जवाब ज़्यादा सटीक और काम के होते हैं.
  • बेहतर नेविगेशन: अब अप ऐरो और डाउन ऐरो कुंजियों का इस्तेमाल करके, पिछली चैट के प्रॉम्प्ट पर नेविगेट किया जा सकता है. इससे पिछली क्वेरी को बेहतर बनाने या फिर से चलाने में आसानी होती है.
"मैं इस पेज की परफ़ॉर्मेंस को कैसे बेहतर बनाऊं?" प्रॉम्प्ट के लिए एआई से मिली मदद Astro.js की डेमो साइट DevTools Times पर, उपयोगकर्ता एजेंट के सिलसिलेवार तरीके से निर्देश, विजेट, और Antigravity के कोडिंग एजेंट को कॉपी करने की सुविधा दिखाई गई है.

फ़ीडबैक बग पर टिप्पणी करके, हमें अपनी राय बताएं. हम Chrome 152 में, एआई की मदद से स्टाइलिंग से जुड़ी गड़बड़ियों को अपने-आप ठीक करने की सुविधा बंद कर देंगे. इसके बजाय, हम 'कोडिंग एजेंट को कॉपी करें' सुविधा को उपलब्ध कराएंगे.

WebMCP

इस रिलीज़ में, ऐप्लिकेशन पैनल साइडबार में, एक्सपेरिमेंट के तौर पर उपलब्ध WebMCP डीबग करने वाले टूल पेश किए गए हैं. WebMCP (वेब मॉडल कॉन्टेक्स्ट प्रोटोकॉल) की मदद से, वेब पेज ऐसे टूल रजिस्टर कर सकते हैं जिनका इस्तेमाल, एलएलएम एजेंट कर सकते हैं. हमारे दस्तावेज़ में, प्रस्तावित स्टैंडर्ड के बारे में ज़्यादा जानें.

डीबग करने के नए टूल की मदद से डेवलपर ये काम कर सकते हैं:

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

WebMCP, वेब स्टैंडर्ड का एक सुझाव है. यह सुविधा, झलक देखने के लिए उपलब्ध है. एक्सपेरिमेंट शुरू करने के लिए, chrome://flags पर जाकर #devtools-webmcp-support और #enable-webmcp-testing फ़्लैग चालू करें.

DevTools के ऐप्लिकेशन पैनल में, WebMCP डीबग करने के नए टूल.
WebMCP के नए डीबगिंग टूल, डेमो साइट L'Atelier की जांच कर रहे हैं. इसमें टूल को पहले किए गए अनुरोध, उपलब्ध टूल, और फ़िल्टर के विकल्प दिखाए गए हैं.

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

सीएसएस के लिए कोड पूरा करने की सुविधा

स्टाइल टैब में अब Gemini की मदद से सीएसएस के लिए कोड पूरा करने की सुविधा उपलब्ध है. यह Console और Sources पैनल के लिए उपलब्ध सहायता पर आधारित है. सेटिंग > एआई इनोवेशन > कोड के सुझाव में जाकर, कोड के सुझाव पाने की सुविधा चालू करें.

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

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

एपीसीए के कलर कंट्रास्ट से जुड़े दिशा-निर्देशों को स्टेबल वर्शन में प्रमोट किया गया

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

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

DevTools की सेटिंग में APCA एल्गोरिदम टॉगल करने की सुविधा और Styles टैब में लागू किया गया नया एल्गोरिदम.
DevTools की सेटिंग में एपीसीए एल्गोरिदम टॉगल और Styles टैब में नया एल्गोरिदम लागू किया गया है.

डाइनैमिक डिवाइस मोड का उपयोगकर्ता एजेंट

रिस्पॉन्सिव डिवाइस मोड, पहले हार्डकोड की गई User Agent स्ट्रिंग (Android 6.0; Nexus 5) का इस्तेमाल करता था. इससे आधुनिक वेबसाइटों की परफ़ॉर्मेंस कम हो जाती थी या वे कंपैटिबिलिटी मोड को ट्रिगर कर देती थीं. ऐसा इसलिए होता था, क्योंकि रिपोर्ट किए गए ओएस को एक दशक से ज़्यादा पुराना माना जाता था.

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

अन्य हाइलाइट

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

  • Console: Console पैनल के टूलबार में, सभी को छोटा करें / बड़ा करें टॉगल बटन जोड़ा गया है. इससे, एक साथ सभी चालू कंसोल ग्रुप और स्टैक ट्रेस को तुरंत बड़ा या छोटा किया जा सकता है. (427657550)
  • ऐप्लिकेशन: ऐप्लिकेशन के मेटाडेटा व्यू में, स्टोरेज बकेट फ़ील्ड के लिए स्टैटिक टेक्स्ट की जगह क्लिक किए जा सकने वाले हाइपरलिंक का इस्तेमाल किया गया है. बकेट के लिंक पर क्लिक करने से, स्टोरेज बकेट साइडबार पैनल में मौजूद उस बकेट पर अपने-आप पहुंच जाता है और उसे हाइलाइट कर दिया जाता है. (435311130)
  • ऐप्लिकेशन: क्रैश रिग्रेशन की समस्या हल करने के बाद, सर्विस वर्कर के लिए स्टोरेज की पूरी तरह से जांच करने की सुविधा फिर से चालू कर दी गई है. (406991275, 466134219)
  • ऐप्लिकेशन: प्रीलोडिंग पैनल में, form_submission प्रीरेंडरिंग इवेंट की जांच करने की सुविधा जोड़ी गई. (346555939, 488078903)
  • ऐप्लिकेशन: डिवाइस बाउंड सेशन क्रेडेंशियल (डीबीएससी) मैनेज करने की सुविधा लागू की गई है. इससे डेवलपर, कॉन्टेक्स्ट मेन्यू से या Delete या Backspace कुंजियां दबाकर, चालू सेशन मिटा सकते हैं. (471017387)
  • तत्व: समस्याओं के पैनल में छिपी हुई समस्याओं को दिखाने वाले डीओएम नोड पर हाइलाइट अब डाइनैमिक रूप से अपडेट होती हैं. इसका मतलब है कि समस्या के फ़िल्टर से जुड़ी कार्रवाइयों के जवाब में, ये हाइलाइट दिखती या गायब होती हैं. (40272723)
  • नेटवर्क: Server-Sent Events (एसएसई) को अब पूरी तरह से क्रम से लगाया गया है और HAR एक्सपोर्ट में शामिल किया गया है. इससे, लाइव इवेंट स्ट्रीम को सेव किया जा सकता है और DevTools में फिर से इंपोर्ट किया जा सकता है. (494294071)
  • परफ़ॉर्मेंस: लाइव मेट्रिक व्यू में, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक की ट्रैकिंग से जुड़ी समस्या ठीक की गई है. इससे ट्रैकिंग को सिर्फ़ प्राइमरी फ़्रेम के एक्ज़ीक्यूशन कॉन्टेक्स्ट पर पिन किया जा सकेगा. साथ ही, डाइनैमिक iframe के बार-बार बदलने से मेट्रिक रीसेट नहीं होंगी. (494350655)
  • परफ़ॉर्मेंस: web-vitals को v5.2.0 पर अपग्रेड किया गया है. इससे आईएनपी मॉनिटरिंग के दौरान मेमोरी लीक की समस्या को ठीक करने के लिए, नेटिव अपस्ट्रीम फ़िक्स उपलब्ध कराए गए हैं. (484342204)