एजेंट के लिए Chrome DevTools, टूल का एक सुइट है. यह आपके एआई कोडिंग वर्कफ़्लो के लिए, Chrome DevTools की सुविधाओं को उपलब्ध कराता है. एजेंट के लिए Chrome DevTools इंस्टॉल करने पर, आपको इनका ऐक्सेस मिलता है:
- एमसीपी सर्वर: यह आपके एआई एजेंट को लाइव ब्राउज़र इंस्टेंस से कनेक्ट करता है. इसके लिए, ओपन-सोर्स मॉडल कॉन्टेक्स्ट प्रोटोकॉल का इस्तेमाल किया जाता है.
- Chrome DevTools CLI: यह एक ऐसा इंटरफ़ेस है जिसकी मदद से, सीधे अपने टर्मिनल से ब्राउज़र के साथ इंटरैक्ट किया जा सकता है.
- एजेंटिक स्किल: ये ऐसे निर्देश होते हैं जिनसे आपके एजेंट को यह पता चलता है कि सुलभता या परफ़ॉर्मेंस डीबग करने जैसे मुश्किल टास्क के लिए, कई टूल को कैसे कोऑर्डिनेट किया जाए.
वेब डेवलपमेंट के संदर्भ में, एजेंट के लिए Chrome DevTools, आपके एआई एजेंट में डीबग करने की सुविधाएं इंटिग्रेट करता है.
उदाहरण के लिए, कोई एजेंट टूल का इस्तेमाल करके परफ़ॉर्मेंस ट्रेस रिकॉर्ड कर सकता है और उनका आकलन कर सकता है. इससे वेबसाइट की परफ़ॉर्मेंस का विश्लेषण किया जा सकता है और संभावित सुधारों की पहचान की जा सकती है. वेब डेवलपमेंट के अलावा, एजेंट के लिए DevTools की मदद से, आपका एजेंट सिर्फ़ स्टैटिक एचटीएमएल पाने के बजाय, लाइव वेब को भी ब्राउज़ कर सकता है.
सेटअप
इस गाइड में, एजेंट के लिए Chrome DevTools सेट अप करने का तरीका बताया गया है. इससे आपका कोडिंग एजेंट, लाइव Chrome ब्राउज़र को कंट्रोल और उसकी जांच कर पाएगा.
chrome-devtools-mcp पैकेज का इस्तेमाल करके, अपने कोडिंग एजेंट (जैसे कि Gemini, Claude, Cursor या Copilot) से लाइव Chrome ब्राउज़र को कंट्रोल और उसकी जांच की जा सकती है. ध्यान दें कि एजेंट के लिए 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
एजेंट की खास क्षमताओं को ऐक्सेस करने के लिए, हमारा सुझाव है कि आप DevTools प्लगिन इंस्टॉल करें. इसे शुरुआती सेटअप के दौरान Build with Google चरण में या ऐप्लिकेशन की सेटिंग में जाकर इंस्टॉल किया जा सकता है. ज़्यादा जानकारी के लिए, Antigravity Browser Subagent का दस्तावेज़ देखें.
सीएलआई का इस्तेमाल करके इंस्टॉल करना
एजेंट के लिए Chrome DevTools सेट अप करने के लिए, JSON कॉन्फ़िगरेशन फ़ाइल का इस्तेमाल किया जा सकता है. इसके अलावा, अगर आपका एजेंट इसे सपोर्ट करता है, तो सर्वर को सीधे तौर पर इंस्टॉल करने के लिए, सीएलआई कमांड का इस्तेमाल किया जा सकता है. कुछ एजेंट, आधिकारिक एक्सटेंशन या प्लगिन भी उपलब्ध कराते हैं. इनमें एजेंट की स्किल और विशेषज्ञ के निर्देश शामिल होते हैं. इनसे आपके एजेंट को DevTools की सुविधाओं का इस्तेमाल करने में मदद मिलती है.
अगर आपका एजेंट यहां मौजूद नहीं है, तो Chrome DevTools for Agents GitHub रिपॉज़िटरी में जाकर, इसे इंस्टॉल करने का तरीका जानें.
कमांड-लाइन एजेंट में एजेंट के लिए Chrome DevTools जोड़ने के लिए, अपने एजेंट के लिए पहले से मौजूद CLI कमांड का इस्तेमाल करें:
Gemini CLI
MCP पैकेज और उससे जुड़ी स्किल शामिल करने वाला 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
एजेंट के लिए Chrome DevTools को Claude Code प्लगिन के तौर पर इंस्टॉल करने के लिए, 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.
अगले चरण
अपने सेटअप को पसंद के मुताबिक बनाने के लिए, कॉन्फ़िगरेशन देखें.