एजेंट के लिए Chrome DevTools, टूल का एक सुइट है. इसकी मदद से, एआई कोडिंग के वर्कफ़्लो में Chrome DevTools की सुविधाओं का इस्तेमाल किया जा सकता है. एजेंट के लिए Chrome DevTools इंस्टॉल करने पर, आपको इन चीज़ों का ऐक्सेस मिलता है:
- एमसीपी सर्वर: यह ओपन-सोर्स मॉडल कॉन्टेक्स्ट प्रोटोकॉल का इस्तेमाल करके, आपके एआई एजेंट को लाइव ब्राउज़र इंस्टेंस से कनेक्ट करता है.
- Chrome DevTools सीएलआई: यह एक ऐसा इंटरफ़ेस है जिसकी मदद से, सीधे ब्राउज़र के साथ इंटरैक्ट किया जा सकता है आपके टर्मिनल से.
- एजेंटिक स्किल: ये एक्सपर्ट के निर्देश होते हैं. इनकी मदद से, आपका एजेंट, सुलभता या परफ़ॉर्मेंस डीबग करने जैसे मुश्किल टास्क के लिए, कई टूल को कोऑर्डिनेट करना सीखता है.
वेब डेवलपमेंट के मामले में, एजेंट के लिए Chrome DevTools, आपके एआई एजेंट में डीबग करने की सुविधाएं इंटिग्रेट करता है.
उदाहरण के लिए, कोई एजेंट टूल का इस्तेमाल करके, परफ़ॉर्मेंस ट्रेस रिकॉर्ड और उनका आकलन कर सकता है. इससे वेबसाइट की परफ़ॉर्मेंस का विश्लेषण किया जा सकता है और संभावित सुधारों की पहचान की जा सकती है. वेब डेवलपमेंट के अलावा, एजेंट के लिए DevTools की मदद से, आपका एजेंट सिर्फ़ स्टैटिक एचटीएमएल को वापस पाने के बजाय, लाइव वेब को भी ब्राउज़ कर सकता है.
सेटअप
इस गाइड में, एजेंट के लिए Chrome DevTools सेट अप करने का तरीका बताया गया है. इससे आपका कोडिंग एजेंट, लाइव Chrome ब्राउज़र को कंट्रोल और उसकी जांच कर सकता है.
अपने कोडिंग एजेंट (जैसे, Gemini, Claude, Cursor या Copilot) से लाइव Chrome ब्राउज़र को कंट्रोल और उसकी जांच करने के लिए, chrome-devtools-mcp पैकेज का इस्तेमाल करें. ध्यान दें कि एजेंट के लिए Chrome DevTools, टूल का पूरा सुइट उपलब्ध कराता है. हालांकि, सीएलआई, शेल-आधारित ऑटोमेशन के लिए सिर्फ़ टारगेट किए गए सबसेट के साथ काम करता है.
काम करने वाले आईडीई और मॉडल
एजेंट के लिए Chrome DevTools, किसी भी ऐसे टूल या आईडीई के साथ काम करता है जो एमसीपी प्रोटोकॉल के साथ काम करता है. इनमें Antigravity, Gemini CLI, Claude Code, Cursor, Copilot वगैरह शामिल हैं.
सुरक्षा से जुड़ी बातें
आपका एजेंट, उन पेजों को देख और उनसे इंटरैक्ट कर पाएगा जिन्हें वह ऐक्सेस करता है. इसलिए, अगर आपने उसे ऐसे ब्राउज़र से कनेक्ट किया है जिसमें कोई सेशन चालू है और जिसकी पुष्टि हो चुकी है, तो वह आपकी ओर से काम कर सकता है. संवेदनशील या निजी जानकारी को एजेंट के साथ शेयर न करें.
ज़रूरी शर्तें
एजेंट के लिए Chrome DevTools इंस्टॉल करने से पहले, पक्का करें कि आपका एनवायरमेंट इन ज़रूरी शर्तों को पूरा करता हो:
एजेंट के लिए Chrome DevTools सेट अप करने के लिए, वह तरीका चुनें जो आपके पसंदीदा कोडिंग एनवायरमेंट के मुताबिक हो. कुछ एजेंट को मैन्युअल तरीके से इंस्टॉल करना पड़ता है, जबकि अन्य एजेंट में टूल पहले से इंटिग्रेट होते हैं.
Antigravity
एजेंट के लिए Chrome DevTools, Antigravity 2.0 के साथ पहले से बंडल होता है. ब्राउज़र सब-एजेंट के साथ इसका इस्तेमाल तुरंत शुरू किया जा सकता है. स्लैश कमांड का इस्तेमाल करके देखें. जैसे:
/browser Navigate to the Google homepage
हमारा सुझाव है कि एजेंट की खास स्किल ऐक्सेस करने के लिए, शुरुआती सेटअप के Google के साथ बनाएं चरण के दौरान या ऐप्लिकेशन की सेटिंग में जाकर, DevTools प्लगिन इंस्टॉल करें. ज़्यादा जानकारी के लिए, Antigravity ब्राउज़र सब-एजेंट का दस्तावेज़ देखें.
सीएलआई का इस्तेमाल करके इंस्टॉल करना
एजेंट के लिए Chrome DevTools सेट अप करने के लिए, JSON कॉन्फ़िगरेशन फ़ाइल या सीएलआई कमांड का इस्तेमाल करके, सर्वर को सीधे इंस्टॉल किया जा सकता है. हालांकि, यह तरीका सिर्फ़ तब काम करता है, जब आपका एजेंट इसे सपोर्ट करता हो. कुछ एजेंट, आधिकारिक एक्सटेंशन या प्लगिन भी उपलब्ध कराते हैं. इनमें एजेंट की स्किल और एक्सपर्ट के निर्देश शामिल होते हैं. इनकी मदद से, आपका एजेंट DevTools की सुविधाओं का इस्तेमाल कर सकता है.
अगर आपका एजेंट यहां मौजूद नहीं है, तो उसे इंस्टॉल करने का तरीका, Chrome एजेंट के लिए DevTools GitHub रिपॉज़िटरी में देखा जा सकता है.
कमांड-लाइन एजेंट में एजेंट के लिए Chrome DevTools जोड़ने के लिए, अपने एजेंट के लिए बने सीएलआई कमांड का इस्तेमाल करें:
Gemini CLI
Gemini CLI एक्सटेंशन इंस्टॉल करें. इसमें एमसीपी पैकेज और उससे जुड़ी स्किल शामिल हैं. इसके लिए, यह कमांड इस्तेमाल करें:
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
सिर्फ़ एमसीपी पैकेज इंस्टॉल करने के लिए, यह कमांड इस्तेमाल करें:
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
Claude Code प्लगिन के तौर पर, एजेंट के लिए Chrome DevTools इंस्टॉल करने के लिए, Claude Code में ये स्लैश कमांड इस्तेमाल करें. मार्केटप्लेस रजिस्ट्री जोड़ें:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
मार्केटप्लेस रजिस्ट्री से प्लगिन इंस्टॉल करें:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
ज़्यादा जानकारी के लिए, Chrome DevTools Claude Plugin पेज का आधिकारिक पेज देखें.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
JSON कॉन्फ़िगरेशन का इस्तेमाल करके इंस्टॉल करना
अन्य एजेंट के लिए, mcpServers कॉन्फ़िगरेशन कुंजी को मैन्युअल तरीके से जोड़ें
. साथ ही, पक्का करें कि एजेंट के लिए DevTools, npm i
chrome-devtools-mcp के ज़रिए इंस्टॉल किया गया हो.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
अन्य एजेंट में इंस्टॉल करना
अगर कोई एजेंट सूची में शामिल नहीं है, तो उसे कॉन्फ़िगर करने का तरीका, Chrome DevTools MCP GitHub रिपॉज़िटरी में देखें.
अपने सेट अप की जांच करना
यह देखने के लिए कि सब कुछ काम कर रहा है या नहीं, अपने एजेंट में यह प्रॉम्प्ट डालें:
Check the performance of https://developers.chrome.com
आपका एजेंट, ब्राउज़र विंडो खोलेगा और परफ़ॉर्मेंस ट्रेस रिकॉर्ड करेगा.
सेटअप से जुड़ी समस्या हल करना
अगर आपका एजेंट, टूल नहीं चला पाता है और उसके पास Chrome DevTools की स्किल का ऐक्सेस है, तो वह समस्या को अपने-आप ठीक करने की कोशिश कर सकता है. अगर ऐसा नहीं होता है, तो एजेंट को साफ़ तौर पर यह प्रॉम्प्ट दिया जा सकता है:
Use the Chrome DevTools troubleshooting skill to fix my setup.
इसके अलावा, ज़्यादा जानकारी भी दी जा सकती है:
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
अगले चरण
अपने सेटअप को पसंद के मुताबिक बनाने के लिए, कॉन्फ़िगरेशन देखें.