एजेंट के लिए 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.
ऐडवांस कॉन्फ़िगरेशन
यहां कुछ अन्य तरीके दिए गए हैं, जिनसे आपका एजेंट, ब्राउज़र को ऐक्सेस कर सकता है.
हेडलेस मोड कॉन्फ़िगर करना
अगर आपको ब्राउज़र विंडो दिखाए बिना, बैकग्राउंड में टास्क परफॉर्म करने हैं, तो Chrome को हेडलेस (कोई यूज़र इंटरफ़ेस नहीं) मोड में चलाया जा सकता है. अपने सर्वर के आर्ग्युमेंट में, --headless फ़्लैग जोड़ें:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
किसी मौजूदा ब्राउज़र सेशन से कनेक्ट करना
डिफ़ॉल्ट रूप से, एजेंट के लिए DevTools, Chrome का नया इंस्टेंस शुरू करता है. हालांकि, --autoConnect फ़्लैग का इस्तेमाल करके, अपने एजेंट को किसी मौजूदा ब्राउज़र सेशन से कनेक्ट किया जा सकता है. यह खास तौर पर तब काम आता है, जब आपके एजेंट को किसी ऐसी समस्या की जांच करनी हो जिसके लिए साइन-इन करना ज़रूरी हो या किसी ऐसे सेशन की जांच करनी हो जिसे आपने पहले ही शुरू किया हो.
किसी मौजूदा सेशन से कनेक्ट करने के दो तरीके हैं:
ऑटोमैटिक कनेक्शन का इस्तेमाल करना (Chrome 144 या इसके बाद का वर्शन)
जब Chrome DevTools एमसीपी सर्वर को --autoConnect विकल्प के साथ कॉन्फ़िगर किया जाता है, तो एमसीपी सर्वर, Chrome के किसी सक्रिय इंस्टेंस से कनेक्ट होगा और रिमोट तरीके से डीबग करने के लिए सेशन का अनुरोध करेगा.
- रिमोट तरीके से डीबग करने की सुविधा चालू करने के लिए, अपने Chrome ब्राउज़र में
chrome://inspect/#remote-debuggingपर जाएं. अपने एमसीपी कॉन्फ़िगरेशन को अपडेट करके, उसमें
--autoConnectफ़्लैग शामिल करें:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }अपने एजेंट को कोई प्रॉम्प्ट दें. Chrome, एक डायलॉग दिखाएगा. इसमें उपयोगकर्ता से, रिमोट तरीके से डीबग करने के सेशन की अनुमति मांगी जाएगी. अनुमति दें पर क्लिक करें.
रिमोट तरीके से डीबग करने के पोर्ट का इस्तेमाल करके, मैन्युअल तरीके से कनेक्ट करना
अगर --autoConnect का इस्तेमाल नहीं किया जा सकता है (उदाहरण के लिए, अगर आपका एजेंट सैंडबॉक्स वाले एनवायरमेंट में चलता है), तो Chrome को मैन्युअल तरीके से डीबग करने वाले पोर्ट के साथ शुरू किया जा सकता है.
यहां एक उदाहरण दिया गया है (macOS पर):
रिमोट तरीके से डीबग करने वाले पोर्ट को चालू करके, Chrome ब्राउज़र शुरू करें. सुरक्षा की वजहों से, आपको उपयोगकर्ता के डेटा के लिए कोई कस्टम डायरेक्ट्री भी तय करनी होगी.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable--browser-urlपैरामीटर का इस्तेमाल करके कनेक्ट करने के लिए, अपने एजेंट को कॉन्फ़िगर करें:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }