पब्लिश होने की तारीख: 19 मई, 2026
एआई कोडिंग टूल, कोड लिखने में बहुत मददगार होते हैं. हालांकि, अक्सर ये कोड को चलाने की सुविधा से कनेक्ट नहीं होते. ये टूल, जटिल वेब ऐप्लिकेशन जनरेट कर सकते हैं. हालांकि, ये लाइव ब्राउज़र में उसके व्यवहार को नहीं देख सकते या उसके आउटपुट की जांच नहीं कर सकते.
एजेंट के लिए Chrome DevTools आपके कोडिंग एजेंट को वह विज़िबिलिटी देता है जिसकी मदद से वह रीयल टाइम में कोड की पुष्टि कर सकता है, उसे डीबग कर सकता है, और ऑप्टिमाइज़ कर सकता है. हमने कुछ महीने पहले इसे पहली बार दिखाया था. अब हमें यह बताते हुए खुशी हो रही है कि एजेंट के लिए Chrome DevTools, अब 1.0 वर्शन के तौर पर उपलब्ध है.
अपने एजेंट को ब्राउज़र से कनेक्ट करना
एजेंट के लिए Chrome DevTools की मदद से, आपका एजेंट आपकी साइट को ठीक उसी तरह से देख सकता है जैसे कोई असली उपयोगकर्ता देखता है. इस स्टेबल वर्शन में, आपके और आपके एजेंट के लिए Chrome के साथ इंटरफ़ेस करने के कई तरीके शामिल हैं:
- मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) सर्वर: यह एक ऐसा सर्वर है जो बड़े भाषा मॉडल (एलएलएम) को DevTools की डीबग करने की सुविधाओं से कनेक्ट करता है.
- कमांड-लाइन इंटरफ़ेस (सीएलआई): यह टोकन-एफ़िशिएंट विकल्प है. इसकी मदद से, एजेंट कार्रवाइयों को स्क्रिप्ट में बैच कर सकते हैं.
- एजेंट की स्किल: ये एक्सपर्ट के निर्देश होते हैं. इनकी मदद से, आपका एजेंट यह सीख सकता है कि सुलभता या परफ़ॉर्मेंस डीबग करने जैसे टास्क के लिए, खास टूल का इस्तेमाल कब और कैसे करना है.
डीबग, एम्युलेट, और ऑडिट अपने-आप होने की सुविधा
1.0 वर्शन के साथ, आपका कोडिंग एजेंट अब डीबग करने के ऐसे टास्क कर सकता है जिन्हें पहले मैन्युअल तरीके से करना पड़ता था.
क्वालिटी ऑडिट को ऑटोमेट करना
आपका एजेंट अब वेबसाइट क्वालिटी का आकलन करने के लिए, Lighthouse ऑडिट चला सकता है. यह सुलभता, एसईओ, सबसे सही तरीकों, और एजेंटिक ब्राउज़िंग से जुड़ी समस्याओं की पहचान कर सकता है. यह एक ऐसे लिंटर की तरह है जो रनटाइम को समझता है. क्वालिटी गेट के तौर पर इस्तेमाल करने पर, यह आपके कोडिंग एजेंट को एक ऐसे एक्सपर्ट में बदल देता है जो प्रोडक्शन में पहुंचने से पहले, अहम ब्लॉकर को पकड़ लेता है.
असल दुनिया के उपयोगकर्ता अनुभव को एम्युलेट करना
आपका एजेंट, एजेंट के लिए DevTools का इस्तेमाल करके यह टेस्ट कर सकता है कि एम्युलेशन टूलका इस्तेमाल करके, अलग-अलग डिवाइसों या अलग-अलग जगहों पर कोई साइट कैसी दिखती है और कैसा काम करती है. यह असल दुनिया की स्थितियों की नकल करने के लिए, विंडो का साइज़ बदल सकता है, जियोलोकेशन की नकल कर सकता है, और नेटवर्क और सीपीयू की स्पीड को कम कर सकता है. इस तरह, आपका एजेंट मोबाइल के लिए खास तौर पर डिज़ाइन किए गए व्यवहारों को टेस्ट कर सकता है. जैसे, बर्गर मेन्यू. इसके लिए, आपको अपने ब्राउज़र का साइज़ मैन्युअल तरीके से बदलने की ज़रूरत नहीं होती.
Chrome एक्सटेंशन डेवलप और डीबग करना
आपके पास यह विकल्प भी है कि आपका एजेंट, Chrome एक्सटेंशन डेवलप करने में आपकी मदद करे. साथ ही, उन्हें डीबग भी करे. आपका एजेंट, एक्सटेंशन की कार्रवाइयों को सीधे इंस्टॉल, रीलोड, और ट्रिगर कर सकता है. इससे डेवलपमेंट के दौरान, "सेव करें और रीफ़्रेश करें" के बार-बार होने वाले साइकल को ऑटोमेट करने में मदद मिलती है. यह बैकग्राउंड स्क्रिप्ट और एक्सटेंशन पेजों में भी जा सकता है, ताकि आपको ज़्यादा जटिल ब्राउज़र सेटअप में मौजूद गड़बड़ियों को ठीक करने में मदद मिल सके.
WebMCP टूल को डीबग और टेस्ट करना
हम WebMCP (वेब मॉडल कॉन्टेक्स्ट प्रोटोकॉल) ऑरिजिन ट्रायल के लिए, डीप विज़िबिलिटी भी उपलब्ध करा रहे हैं, ताकि आपको इस नए एपीआई को लागू करने में मदद मिल सके.
आपका एजेंट, डीओएम में नेविगेट करने के लिए किसी प्लान का अनुमान लगाने के लिए, सिग्नल पर निर्भर रहने के बजाय, सीधे उन स्ट्रक्चर्ड टूल के साथ इंटरैक्ट कर सकता है जिन्हें आपने WebMCP का इस्तेमाल करके दिखाया है. इससे इन टूल को डेवलप, टेस्ट, और डीबग करना आसान हो जाता है: आपका एजेंट, रीयल टाइम में इनकी सूची बना सकता है, प्रोग्राम के ज़रिए इन्हें शुरू कर सकता है, और इनकी सही तरीके से काम करने की पुष्टि कर सकता है. इससे आपकी साइट में WebMCP की सुविधा जोड़ने और उसे टेस्ट करने की प्रोसेस आसान हो जाती है.
मेमोरी लीक का पता लगाना और उसे डीबग करना
हमने मेमोरी के विश्लेषण के लिए, खास टूल भी जोड़े हैं. आपका एजेंट अब हीप स्नैपशॉट लेकर, मेमोरी लीक की पहचान कर सकता है. जैसे, अलग किए गए डीओएम नोड. मेमोरी लीक को डीबग करने की खास स्किल का इस्तेमाल करके, एजेंट परफ़ॉर्मेंस एक्सपर्ट के तौर पर काम करता है. इससे आपको अपने ऐप्लिकेशन को कम जगह में और तेज़ी से चलाने में मदद मिलती है.
अपने-आप कनेक्ट होने की सुविधा के साथ सेशन ट्रांसफ़र करना
आपके पास, अपने मौजूदा ब्राउज़र कॉन्टेक्स्ट को किसी एजेंट के साथ शेयर करने का विकल्प होता है. इसके लिए, एजेंट को अपना सैंडबॉक्स किया गया ब्राउज़र इंस्टेंस खोलने की ज़रूरत नहीं होती. आम तौर पर, एजेंट के लिए DevTools, एजेंट को ब्राउज़र का ऐक्सेस इसी तरह देता है. यह उन चीज़ों को डीबग करने के लिए सबसे सही है जिनके लिए लॉगिन करना ज़रूरी होता है. जैसे, पुष्टि किया गया डैशबोर्ड. इसमें, आपको हर चीज़ की फिर से पुष्टि करने की ज़रूरत नहीं होती. इसके बजाय, एआई एजेंट को तकनीकी जांच करने की अनुमति दी जा सकती है.
तीसरे पक्ष के डेवलपर टूल की मदद से, इंटरनल स्टेट को दिखाना
तीसरे पक्ष के डेवलपर टूल की मदद से, आपका वेब ऐप्लिकेशन, इंटरनल स्टेट और कॉम्पोनेंट की जानकारी सीधे एआई एजेंट के साथ शेयर कर सकता है. ये टूल, आम तौर पर छिपे हुए डेटा का ऐक्सेस देकर, एजेंट को वह कॉन्टेक्स्ट देते हैं जिसकी मदद से वे जटिल लॉजिक को समझ सकते हैं. इससे, ऐप्लिकेशन के ब्राउज़र में असल में काम करने के तरीके के आधार पर, डीबग करने के ज़्यादा सटीक सुझाव मिलते हैं.
शुरू करें
स्टेबल वर्शन को npm का इस्तेमाल करके इंस्टॉल किया जा सकता है. इसके अलावा, इसे अपनी पसंद के एजेंट में सीधे तौर पर कॉन्फ़िगर किया जा सकता है:
Antigravity
एजेंट के लिए Chrome DevTools, Antigravity 2.0 के साथ पहले से बंडल होता है. ब्राउज़र सब-एजेंट के साथ इसका इस्तेमाल तुरंत शुरू किया जा सकता है. स्लैश कमांड का इस्तेमाल करके देखें. जैसे:
/browser Navigate to the Google homepage
एजेंट की खास स्किल ऐक्सेस करने के लिए, हमारा सुझाव है कि शुरुआती सेटअप के Build with Google चरण के दौरान या ऐप्लिकेशन की सेटिंग में, DevTools प्लग-इन इंस्टॉल करें. ज़्यादा जानकारी के लिए, Antigravity ब्राउज़र सब-एजेंट का दस्तावेज़ देखें.
Gemini CLI
एमसीपी पैकेज और स्किल को एक्सटेंशन के तौर पर इंस्टॉल करने के लिए, यह कमांड इस्तेमाल करें:
$ gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Claude Code
एजेंट के लिए Chrome DevTools को Claude Code प्लग-इन के तौर पर इंस्टॉल करने के लिए, Claude Code में ये स्लैश कमांड इस्तेमाल करें. मार्केटप्लेस रजिस्ट्री जोड़ें:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
इसके बाद, मार्केटप्लेस रजिस्ट्री से प्लग-इन इंस्टॉल करें:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
ज़्यादा जानकारी के लिए, एजेंट के लिए Chrome DevTools का दस्तावेज़ देखें. इसमें आपको ज़्यादा गाइड और उदाहरण के तौर पर प्रॉम्प्ट मिलेंगे. GitHub पर सोर्स कोड भी देखा जा सकता है .