Chrome DevTools MCP

एजेंटों के लिए Chrome DevTools

एजेंटों के लिए Chrome DevTools (chrome-devtools-mcp) आपके कोडिंग एजेंट (जैसे Antigravity, Claude, Cursor या Copilot) को एक लाइव Chrome ब्राउज़र को नियंत्रित और निरीक्षण करने देता है। यह एक मॉडल-संदर्भ-प्रोटोकॉल (MCP) सर्वर के रूप में कार्य करता है, जो आपके AI कोडिंग सहायक को विश्वसनीय स्वचालन, गहन डिबगिंग और प्रदर्शन विश्लेषण के लिए Chrome DevTools की पूरी शक्ति तक पहुँच प्रदान करता है। MCP के बिना उपयोग के लिए एक CLI भी प्रदान किया गया है।

टूल संदर्भ | बदलाव लॉग | योगदान करना | समस्या निवारण | डिज़ाइन सिद्धांत

मुख्य विशेषताएँ

• प्रदर्शन अंतर्दृष्टि प्राप्त करें: ट्रेस रिकॉर्ड करने और कार्रवाई योग्य प्रदर्शन अंतर्दृष्टि निकालने के लिए https://github.com/ChromeDevTools/devtools-frontend का उपयोग करता है।
• उन्नत ब्राउज़र डिबगिंग: नेटवर्क अनुरोधों का विश्लेषण करें, स्क्रीनशॉट लें और ब्राउज़र कंसोल संदेशों की जाँच करें (स्रोत-मैप किए गए स्टैक ट्रेस के साथ)।
• विश्वसनीय स्वचालन: Chrome में क्रियाओं को स्वचालित करने और कार्रवाई परिणामों की स्वचालित रूप से प्रतीक्षा करने के लिए puppeteer का उपयोग करता है।

अस्वीकरण

chrome-devtools-mcp ब्राउज़र इंस्टेंस की सामग्री को MCP क्लाइंट के सामने उजागर करता है, जिससे उन्हें ब्राउज़र या DevTools में किसी भी डेटा का निरीक्षण, डिबग और संशोधन करने की अनुमति मिलती है। ऐसी संवेदनशील या व्यक्तिगत जानकारी साझा करने से बचें जिसे आप MCP क्लाइंट के साथ साझा नहीं करना चाहते।

chrome-devtools-mcp आधिकारिक तौर पर केवल Google Chrome और परीक्षण के लिए Chrome का समर्थन करता है। अन्य Chromium-आधारित ब्राउज़र काम कर सकते हैं, लेकिन इसकी गारंटी नहीं है, और आपको अप्रत्याशित व्यवहार का सामना करना पड़ सकता है। अपने विवेक से उपयोग करें। हम विस्तारित स्थिर Chrome के नवीनतम संस्करण के लिए सुधार और समर्थन प्रदान करने के लिए प्रतिबद्ध हैं।

प्रदर्शन उपकरण वास्तविक-उपयोगकर्ता अनुभव डेटा प्राप्त करने के लिए Google CrUX API को ट्रेस URL भेज सकते हैं। यह प्रयोगशाला डेटा के साथ फ़ील्ड डेटा प्रस्तुत करके एक समग्र प्रदर्शन चित्र प्रदान करने में मदद करता है। यह डेटा https://developer.chrome.com/docs/crux द्वारा एकत्र किया जाता है। इसे अक्षम करने के लिए, --no-performance-crux फ़्लैग के साथ चलाएँ।

उपयोग आँकड़े

Google Chrome DevTools MCP की विश्वसनीयता और प्रदर्शन को बेहतर बनाने के लिए उपयोग आँकड़े (जैसे टूल आह्वान सफलता दर, विलंबता और पर्यावरण जानकारी) एकत्र करता है।

डेटा संग्रह डिफ़ॉल्ट रूप से सक्षम है। आप सर्वर प्रारंभ करते समय --no-usage-statistics फ़्लैग पास करके ऑप्ट-आउट कर सकते हैं:

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google इस डेटा को Google गोपनीयता नीति के अनुसार संभालता है।

Chrome DevTools MCP के लिए Google का उपयोग आँकड़ों का संग्रह Chrome ब्राउज़र के उपयोग आँकड़ों से स्वतंत्र है। Chrome मेट्रिक्स से ऑप्ट-आउट करने से आप स्वचालित रूप से इस टूल से ऑप्ट-आउट नहीं हो जाते, और इसके विपरीत।

यदि CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS या CI env चर सेट हैं तो संग्रह अक्षम हो जाता है।

अद्यतन जाँच

डिफ़ॉल्ट रूप से, सर्वर समय-समय पर npm रजिस्ट्री में अद्यतनों की जाँच करता है और एक नया संस्करण उपलब्ध होने पर एक सूचना लॉग करता है। आप CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS पर्यावरण चर सेट करके इन अद्यतन जाँचों को अक्षम कर सकते हैं।

आवश्यकताएँ

• Node.js LTS संस्करण।
• Chrome वर्तमान स्थिर संस्करण या नया।
• npm

शुरू करना

अपने MCP क्लाइंट में निम्नलिखित कॉन्फ़िग जोड़ें:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

[!NOTE] chrome-devtools-mcp@latest का उपयोग यह सुनिश्चित करता है कि आपका MCP क्लाइंट हमेशा Chrome DevTools MCP सर्वर के नवीनतम संस्करण का उपयोग करेगा।

यदि आप केवल बुनियादी ब्राउज़र कार्य करने में रुचि रखते हैं, तो --slim मोड का उपयोग करें:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

स्लिम टूल संदर्भ देखें।

MCP क्लाइंट कॉन्फ़िगरेशन

amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

cmd mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

copilot

/mcp add

code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'

droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"

# Either MCP only:
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
# Or as a Gemini extension (MCP+Skills):
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

grok mcp add chrome-devtools npx chrome-devtools-mcp@latest

mcp-proxy --transport streamablehttp --port 8080 -- npx -y chrome-devtools-mcp@latest

[[mcp_servers]]
name = "chrome-devtools"
transport = "stdio"
command = "npx"
args = ["chrome-devtools-mcp@latest"]

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
    }
  }
}

qodercli mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest

यह जाँचने के लिए कि सब कुछ काम कर रहा है या नहीं, अपने MCP क्लाइंट में निम्नलिखित प्रॉम्प्ट दर्ज करें:

Check the performance of https://developers.chrome.com

आपके MCP क्लाइंट को ब्राउज़र खोलना चाहिए और एक प्रदर्शन ट्रेस रिकॉर्ड करना चाहिए।

[!NOTE] MCP सर्वर ब्राउज़र को स्वचालित रूप से तब शुरू करेगा जब MCP क्लाइंट किसी ऐसे टूल का उपयोग करेगा जिसके लिए चालू ब्राउज़र इंस्टेंस की आवश्यकता होती है। केवल Chrome DevTools MCP सर्वर से कनेक्ट होने पर ब्राउज़र अपने आप शुरू नहीं होगा।

टूल

यदि आपको कोई समस्या आती है, तो हमारी समस्या निवारण मार्गदर्शिका देखें।

• इनपुट ऑटोमेशन (10 टूल)
  • click
  • drag
  • fill
  • fill_form
  • handle_dialog
  • hover
  • press_key
  • type_text
  • upload_file
  • click_at
• नेविगेशन ऑटोमेशन (6 टूल)
  • close_page
  • list_pages
  • navigate_page
  • new_page
  • select_page
  • wait_for
• एमुलेशन (2 टूल)
  • emulate
  • resize_page
• प्रदर्शन (3 टूल)
  • performance_analyze_insight
  • performance_start_trace
  • performance_stop_trace
• नेटवर्क (2 टूल)
  • get_network_request
  • list_network_requests
• डिबगिंग (8 टूल)
  • evaluate_script
  • get_console_message
  • lighthouse_audit
  • list_console_messages
  • take_screenshot
  • take_snapshot
  • screencast_start
  • screencast_stop
• मेमोरी (12 टूल)
  • take_heapsnapshot
  • close_heapsnapshot
  • compare_heapsnapshots
  • get_heapsnapshot_class_nodes
  • get_heapsnapshot_details
  • get_heapsnapshot_dominators
  • get_heapsnapshot_duplicate_strings
  • get_heapsnapshot_edges
  • get_heapsnapshot_object_details
  • get_heapsnapshot_retainers
  • get_heapsnapshot_retaining_paths
  • get_heapsnapshot_summary
• एक्सटेंशन (5 टूल)
  • install_extension
  • list_extensions
  • reload_extension
  • trigger_extension_action
  • uninstall_extension
• तृतीय-पक्ष (2 टूल)
  • execute_3p_developer_tool
  • list_3p_developer_tools
• WebMCP (2 टूल)
  • execute_webmcp_tool
  • list_webmcp_tools

कॉन्फ़िगरेशन

Chrome DevTools MCP सर्वर निम्नलिखित कॉन्फ़िगरेशन विकल्प का समर्थन करता है:

• --autoConnect/ --auto-connect यदि निर्दिष्ट किया गया है, तो चैनल पैराम द्वारा पहचाने गए उपयोगकर्ता डेटा निर्देशिका से स्थानीय रूप से चल रहे ब्राउज़र (Chrome 144+) से स्वचालित रूप से कनेक्ट होता है (डिफ़ॉल्ट चैनल स्थिर है)। Chrome इंस्टेंस में chrome://inspect/#remote-debugging के माध्यम से रिमोट डिबगिंग सर्वर शुरू करने की आवश्यकता होती है।

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --browserUrl/ --browser-url, -u किसी चल रहे, डिबग करने योग्य Chrome इंस्टेंस से कनेक्ट करें (जैसे http://127.0.0.1:9222)। अधिक विवरण के लिए देखें: https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance.

  • प्रकार: string
  • डिफ़ॉल्ट: false

• --wsEndpoint/ --ws-endpoint, -w किसी चल रहे Chrome इंस्टेंस से कनेक्ट करने के लिए WebSocket एंडपॉइंट (जैसे, ws://127.0.0.1:9222/devtools/browser/)। --browserUrl का विकल्प।

  • प्रकार: string
  • डिफ़ॉल्ट: false

• --wsHeaders/ --ws-headers JSON प्रारूप में WebSocket कनेक्शन के लिए कस्टम हेडर (जैसे, '{"Authorization":"Bearer token"}')। केवल --wsEndpoint के साथ काम करता है।

  • प्रकार: string
  • डिफ़ॉल्ट: false

• --headless हेडलेस (बिना UI) मोड में चलाना है या नहीं।

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --executablePath/ --executable-path, -e कस्टम Chrome एक्जीक्यूटेबल का पथ।

  • प्रकार: string
  • डिफ़ॉल्ट: false

• --isolated यदि निर्दिष्ट किया गया है, तो एक अस्थायी user-data-dir बनाता है जो ब्राउज़र बंद होने के बाद स्वचालित रूप से साफ हो जाता है। डिफ़ॉल्ट false है।

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --userDataDir/ --user-data-dir Chrome के लिए उपयोगकर्ता डेटा निर्देशिका का पथ। डिफ़ॉल्ट $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE है

  • प्रकार: string
  • डिफ़ॉल्ट: false

• --channel उपयोग किए जाने वाले एक अलग Chrome चैनल को निर्दिष्ट करें। डिफ़ॉल्ट स्थिर चैनल संस्करण है।

  • प्रकार: string
  • विकल्प: canary, dev, beta, stable
  • डिफ़ॉल्ट: false

• --logFile/ --log-file डिबग लॉग लिखने के लिए फ़ाइल का पथ। विस्तृत लॉग सक्षम करने के लिए env वेरिएबल DEBUG को * पर सेट करें। बग रिपोर्ट सबमिट करने के लिए उपयोगी।

  • प्रकार: string
  • डिफ़ॉल्ट: false

• --viewport सर्वर द्वारा शुरू किए गए Chrome इंस्टेंस के लिए प्रारंभिक व्यूपोर्ट आकार। उदाहरण के लिए, 1280x720। हेडलेस मोड में, अधिकतम आकार 3840x2160px है।

  • प्रकार: string
  • डिफ़ॉल्ट: false

• --proxyServer/ --proxy-server ब्राउज़र लॉन्च करते समय --proxy-server के रूप में पारित Chrome के लिए प्रॉक्सी सर्वर कॉन्फ़िगरेशन। विवरण के लिए https://www.chromium.org/developers/design-documents/network-settings/ देखें।

  • प्रकार: string
  • डिफ़ॉल्ट: false

• --acceptInsecureCerts/ --accept-insecure-certs यदि सक्षम किया गया है, तो स्व-हस्ताक्षरित और समाप्त प्रमाणपत्रों से संबंधित त्रुटियों को अनदेखा करता है। सावधानी से उपयोग करें।

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --experimentalPageIdRouting/ --experimental-page-id-routing पेज-स्कोप्ड टूल पर pageId को उजागर करना है या नहीं और पेज आईडी द्वारा अनुरोधों को रूट करना है (समवर्ती एजेंट सत्रों के लिए उपयोगी)।

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --experimentalDevtools/ --experimental-devtools DevTools लक्ष्यों पर ऑटोमेशन सक्षम करना है या नहीं

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --experimentalVision/ --experimental-vision निर्देशांक-आधारित टूल जैसे click_at(x,y) को सक्षम करना है या नहीं। आमतौर पर स्क्रीनशॉट देखकर सटीक निर्देशांक उत्पन्न करने में सक्षम कंप्यूटर-उपयोग मॉडल की आवश्यकता होती है।

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --memoryDebugging/ --memory-debugging, -experimentalMemory मेमोरी डिबगिंग टूल सक्षम करना है या नहीं।

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --experimentalStructuredContent/ --experimental-structured-content संरचित स्वरूपित सामग्री आउटपुट करना है या नहीं।

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --experimentalIncludeAllPages/ --experimental-include-all-pages वेबव्यू या पृष्ठभूमि पृष्ठों जैसे सभी प्रकार के पृष्ठों को पृष्ठों के रूप में शामिल करना है या नहीं।

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --experimentalScreencast/ --experimental-screencast प्रायोगिक स्क्रीनकास्ट टूल को उजागर करता है (ffmpeg की आवश्यकता है)। ffmpeg https://www.ffmpeg.org/download.html इंस्टॉल करें और सुनिश्चित करें कि यह MCP सर्वर PATH में उपलब्ध है।

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --experimentalFfmpegPath/ --experimental-ffmpeg-path स्क्रीनकास्ट रिकॉर्डिंग के लिए ffmpeg एक्जीक्यूटेबल का पथ।

  • प्रकार: string
  • डिफ़ॉल्ट: false

• --categoryExperimentalWebmcp/ --category-experimental-webmcp WebMCP टूल को डिबग करने के लिए true पर सेट करें। निम्नलिखित फ़्लैग के साथ Chrome 149+ की आवश्यकता है: --enable-features=WebMCP,DevToolsWebMCPSupport

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --chromeArg/ --chrome-arg Chrome के लिए अतिरिक्त तर्क। केवल तभी लागू होता है जब Chrome को chrome-devtools-mcp द्वारा लॉन्च किया जाता है।

  • प्रकार: array
  • डिफ़ॉल्ट: false

• --blockedUrlPattern/ --blocked-url-pattern निर्दिष्ट URL पैटर्न को अवरुद्ध करके ब्राउज़र की नेटवर्क पहुंच को प्रतिबंधित करता है (https://urlpattern.spec.whatwg.org/ का उपयोग करता है)। कनेक्शन पर अवरुद्ध URL वाले लक्ष्यों से चुपचाप अलग हो जाता है, और रनटाइम अनुरोधों (नेविगेशन और सबरिसोर्स सहित) को ब्लॉक करता है। पैटर्न की एक सरणी स्वीकार करता है।

  • प्रकार: array
  • डिफ़ॉल्ट: false

• --allowedUrlPattern/ --allowed-url-pattern केवल निर्दिष्ट URL पैटर्न की अनुमति देकर ब्राउज़र की नेटवर्क पहुंच को प्रतिबंधित करता है (https://urlpattern.spec.whatwg.org/ का उपयोग करता है)। Chrome 149+ की आवश्यकता है। कनेक्शन पर अननुमत URL वाले लक्ष्यों से चुपचाप अलग हो जाता है, और रनटाइम अनुरोधों (नेविगेशन और सबरिसोर्स सहित) को ब्लॉक करता है। पैटर्न की एक सरणी स्वीकार करता है।

  • प्रकार: array
  • डिफ़ॉल्ट: false

• --ignoreDefaultChromeArg/ --ignore-default-chrome-arg Chrome के लिए डिफ़ॉल्ट तर्कों को स्पष्ट रूप से अक्षम करें। केवल तभी लागू होता है जब Chrome को chrome-devtools-mcp द्वारा लॉन्च किया जाता है।

  • प्रकार: array
  • डिफ़ॉल्ट: false

• --categoryEmulation/ --category-emulation एमुलेशन से संबंधित टूल को बाहर करने के लिए false पर सेट करें।

  • प्रकार: boolean
  • डिफ़ॉल्ट: true

• --categoryPerformance/ --category-performance प्रदर्शन से संबंधित टूल को बाहर करने के लिए false पर सेट करें।

  • प्रकार: boolean
  • डिफ़ॉल्ट: true

• --categoryNetwork/ --category-network नेटवर्क से संबंधित टूल को बाहर करने के लिए false पर सेट करें।

  • प्रकार: boolean
  • डिफ़ॉल्ट: true

• --categoryExtensions/ --category-extensions एक्सटेंशन से संबंधित टूल शामिल करने के लिए true पर सेट करें। नोट: यह सुविधा वर्तमान में केवल पाइप कनेक्शन के साथ समर्थित है। 149 जारी होने तक इस सुविधा के साथ autoConnect, browserUrl, और wsEndpoint समर्थित नहीं हैं।

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --categoryExperimentalThirdParty/ --category-experimental-third-party निरीक्षण किए गए पृष्ठ द्वारा उजागर किए गए तृतीय-पक्ष डेवलपर टूल को सक्षम करने के लिए true पर सेट करें

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --performanceCrux/ --performance-crux फ़ील्ड प्रदर्शन डेटा प्राप्त करने के लिए प्रदर्शन ट्रेस से CrUX API पर URL भेजने को अक्षम करने के लिए false पर सेट करें।

  • प्रकार: boolean
  • डिफ़ॉल्ट: true

• --usageStatistics/ --usage-statistics उपयोग आँकड़ों के संग्रह से ऑप्ट-आउट करने के लिए false पर सेट करें। Google उपकरण को बेहतर बनाने के लिए उपयोग डेटा एकत्र करता है, जिसे Google गोपनीयता नीति (https://policies.google.com/privacy) के तहत संभाला जाता है। यह Chrome ब्राउज़र मेट्रिक्स से स्वतंत्र है। यदि CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS या CI env वेरिएबल सेट हैं तो अक्षम हो जाता है।

  • प्रकार: boolean
  • डिफ़ॉल्ट: true

• --screenshotFormat/ --screenshot-format जब कॉलर कोई निर्दिष्ट नहीं करता है तो take_screenshot द्वारा उपयोग किए जाने वाले डिफ़ॉल्ट आउटपुट प्रारूप को ओवरराइड करें। JPEG और WebP, PNG से ~3-5x छोटे होते हैं, जो AI वार्तालापों में संदर्भ आकार को कम करने में मदद करता है। अनसेट मौजूदा डिफ़ॉल्ट ("png") को संरक्षित करता है।

  • प्रकार: string
  • विकल्प: jpeg, png, webp
  • डिफ़ॉल्ट: false

• --screenshotQuality/ --screenshot-quality जब कॉलर कोई निर्दिष्ट नहीं करता है तो JPEG और WebP के लिए take_screenshot द्वारा उपयोग की जाने वाली डिफ़ॉल्ट संपीड़न गुणवत्ता (0-100) को ओवरराइड करें। कम मान का अर्थ है छोटी फ़ाइलें। PNG के लिए अनदेखा किया जाता है। अनसेट Puppeteer डिफ़ॉल्ट को संरक्षित करता है।

  • प्रकार: number
  • डिफ़ॉल्ट: false

• --screenshotMaxWidth/ --screenshot-max-width स्क्रीनशॉट के लिए पिक्सेल में अधिकतम चौड़ाई। यदि कैप्चर की गई छवि चौड़ी है, तो वापस किए जाने से पहले इसे (पहलू अनुपात को संरक्षित करते हुए) छोटा कर दिया जाता है। AI वार्तालापों में संदर्भ आकार को कम करता है। अनसेट का अर्थ है कोई आकार परिवर्तन नहीं।

  • प्रकार: number
  • डिफ़ॉल्ट: false

• --screenshotMaxHeight/ --screenshot-max-height स्क्रीनशॉट के लिए पिक्सेल में अधिकतम ऊँचाई। यदि कैप्चर की गई छवि इससे लंबी है, तो लौटाए जाने से पहले इसे (पहलू अनुपात बनाए रखते हुए) छोटा कर दिया जाता है। --screenshot-max-width के साथ संयोजित किया जा सकता है; छोटा स्केल फ़ैक्टर प्रभावी होता है। सेट न होने का अर्थ है कोई आकार परिवर्तन नहीं।

  • प्रकार: number
  • डिफ़ॉल्ट: false

• --slim केवल नेविगेशन, स्क्रिप्ट निष्पादन और स्क्रीनशॉट को कवर करने वाले 3 टूल का एक "स्लिम" सेट प्रस्तुत करता है। बुनियादी ब्राउज़र कार्यों के लिए उपयोगी।

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --redactNetworkHeaders/ --redact-network-headers यदि true है, तो क्लाइंट को लौटाने से पहले संवेदनशील माने जाने वाले कुछ नेटवर्क हेडर को संशोधित कर देता है।

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

• --allowUnrestrictedPaths/ --allow-unrestricted-paths यदि सेट है, तो उस डिफ़ॉल्ट पथ प्रतिबंध को अक्षम कर देता है जो तब लागू होता है जब MCP क्लाइंट रूट्स क्षमता पर बातचीत नहीं करता है। डिफ़ॉल्ट रूप से, जब कोई रूट कॉन्फ़िगर नहीं किया जाता है तो फ़ाइल-लेखन उपकरण OS अस्थायी निर्देशिका तक सीमित होते हैं। इसका उपयोग केवल तब करें जब किसी विश्वसनीय स्थानीय क्लाइंट को कनेक्ट कर रहे हों जो MCP रूट्स लागू नहीं करता है और जिसे अस्थायी निर्देशिका के बाहर के पथों तक पहुँच की आवश्यकता होती है।

  • प्रकार: boolean
  • डिफ़ॉल्ट: false

उन्हें JSON कॉन्फ़िगरेशन में args गुण के माध्यम से पास करें। उदाहरण के लिए:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

कस्टम हेडर के साथ WebSocket के माध्यम से कनेक्ट करना

आप सीधे Chrome WebSocket एंडपॉइंट से कनेक्ट कर सकते हैं और कस्टम हेडर शामिल कर सकते हैं (जैसे, प्रमाणीकरण के लिए):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}

चल रहे Chrome इंस्टेंस से WebSocket एंडपॉइंट प्राप्त करने के लिए, http://127.0.0.1:9222/json/version पर जाएँ और webSocketDebuggerUrl फ़ील्ड देखें।

सभी उपलब्ध कॉन्फ़िगरेशन विकल्पों को देखने के लिए आप npx chrome-devtools-mcp@latest --help भी चला सकते हैं।

अवधारणाएँ

समवर्ती सत्र

अधिकांश MCP क्लाइंट प्रति वार्तालाप एक Chrome DevTools MCP सर्वर प्रारंभ करते हैं। यदि आपका क्लाइंट समवर्ती एजेंटों या उप-एजेंटों में एक ही सर्वर इंस्टेंस साझा करता है, तो सर्वर को --experimentalPageIdRouting के साथ प्रारंभ करें। यह पृष्ठ-स्कोप्ड टूल पर pageId को उजागर करता है ताकि प्रत्येक एजेंट टूल कॉल को उस टैब पर रूट कर सके जिसके साथ वह काम कर रहा है।

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--experimentalPageIdRouting"
      ]
    }
  }
}

यदि आप कई स्वतंत्र MCP क्लाइंट सत्र चलाते हैं और चाहते हैं कि प्रत्येक सत्र अपनी स्वयं की अस्थायी Chrome प्रोफ़ाइल लॉन्च करे, तो --isolated भी पास करें। यह उन सर्वर इंस्टेंस के बीच डिफ़ॉल्ट Chrome DevTools MCP उपयोगकर्ता डेटा निर्देशिका साझा करने से बचाता है।

उपयोगकर्ता डेटा निर्देशिका

chrome-devtools-mcp निम्नलिखित उपयोगकर्ता डेटा निर्देशिका का उपयोग करके Chrome का एक स्थिर चैनल इंस्टेंस प्रारंभ करता है:

• Linux / macOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

उपयोगकर्ता डेटा निर्देशिका रन के बीच साफ़ नहीं की जाती है और chrome-devtools-mcp के सभी इंस्टेंस में साझा की जाती है। इसके बजाय एक अस्थायी उपयोगकर्ता डेटा निर्देशिका का उपयोग करने के लिए isolated विकल्प को true पर सेट करें जो ब्राउज़र बंद होने के बाद स्वचालित रूप से साफ़ हो जाएगी।

चल रहे Chrome इंस्टेंस से कनेक्ट करना

डिफ़ॉल्ट रूप से, Chrome DevTools MCP सर्वर एक समर्पित प्रोफ़ाइल के साथ एक नया Chrome इंस्टेंस प्रारंभ करेगा। यह सभी स्थितियों में आदर्श नहीं हो सकता है:

• यदि आप मैन्युअल साइट परीक्षण और एजेंट-संचालित परीक्षण के बीच स्विच करते समय समान एप्लिकेशन स्थिति बनाए रखना चाहते हैं।
• जब MCP को किसी वेबसाइट में साइन इन करने की आवश्यकता होती है। कुछ खाते तब साइन-इन को रोक सकते हैं जब ब्राउज़र को WebDriver (Chrome DevTools MCP सर्वर के लिए डिफ़ॉल्ट लॉन्च तंत्र) के माध्यम से नियंत्रित किया जाता है।
• यदि आप अपना LLM एक सैंडबॉक्स वातावरण के अंदर चला रहे हैं, लेकिन आप एक Chrome इंस्टेंस से कनेक्ट करना चाहते हैं जो सैंडबॉक्स के बाहर चलता है।

इन मामलों में, पहले Chrome प्रारंभ करें और Chrome DevTools MCP सर्वर को इससे कनेक्ट होने दें। ऐसा करने के दो तरीके हैं:

• स्वचालित कनेक्शन (Chrome 144 में उपलब्ध): मैन्युअल और एजेंट-संचालित परीक्षण के बीच स्थिति साझा करने के लिए सर्वोत्तम।
• रिमोट डिबगिंग पोर्ट के माध्यम से मैन्युअल कनेक्शन: सैंडबॉक्स वातावरण के अंदर चलने पर सर्वोत्तम।

चल रहे Chrome इंस्टेंस से स्वचालित रूप से कनेक्ट करना

चरण 1: Chrome में रिमोट डिबगिंग सेट अप करें

Chrome (>= M144) में, रिमोट डिबगिंग सेट अप करने के लिए निम्न कार्य करें:

1. रिमोट डिबगिंग सक्षम करने के लिए chrome://inspect/#remote-debugging पर नेविगेट करें।
2. आने वाले डिबगिंग कनेक्शनों को अनुमति देने या अस्वीकार करने के लिए संवाद UI का पालन करें।

चरण 2: चल रहे Chrome इंस्टेंस से स्वचालित रूप से कनेक्ट होने के लिए Chrome DevTools MCP सर्वर को कॉन्फ़िगर करें

chrome-devtools-mcp सर्वर को चल रहे Chrome इंस्टेंस से कनेक्ट करने के लिए, MCP सर्वर के लिए --autoConnect कमांड लाइन तर्क का उपयोग करें।

निम्नलिखित कोड स्निपेट gemini-cli के लिए एक उदाहरण कॉन्फ़िगरेशन है:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}

चरण 3: अपने सेटअप का परीक्षण करें

सुनिश्चित करें कि आपका ब्राउज़र चल रहा है। gemini-cli खोलें और निम्नलिखित प्रॉम्प्ट चलाएँ:

Check the performance of https://developers.chrome.com

[!NOTE] autoConnect विकल्प के लिए उपयोगकर्ता को Chrome प्रारंभ करने की आवश्यकता होती है। यदि उपयोगकर्ता के पास कई सक्रिय प्रोफ़ाइल हैं, तो MCP सर्वर डिफ़ॉल्ट प्रोफ़ाइल से कनेक्ट होगा (जैसा कि Chrome द्वारा निर्धारित किया गया है)। MCP सर्वर के पास चयनित प्रोफ़ाइल के लिए सभी खुली हुई विंडो तक पहुँच है।

Chrome DevTools MCP सर्वर आपके चल रहे Chrome इंस्टेंस से कनेक्ट करने का प्रयास करेगा। यह उपयोगकर्ता की अनुमति माँगने वाला एक संवाद दिखाता है।

अनुमति दें पर क्लिक करने से Chrome DevTools MCP सर्वर developers.chrome.com खोलेगा और एक प्रदर्शन ट्रेस लेगा।

पोर्ट अग्रेषण का उपयोग करके मैन्युअल कनेक्शन

आप --browser-url विकल्प का उपयोग करके चल रहे Chrome इंस्टेंस से कनेक्ट कर सकते हैं। यह तब उपयोगी है जब आप MCP सर्वर को सैंडबॉक्स वातावरण में चला रहे हैं जो एक नया Chrome इंस्टेंस प्रारंभ करने की अनुमति नहीं देता है।

चल रहे Chrome इंस्टेंस से कनेक्ट करने के तरीके पर चरण-दर-चरण मार्गदर्शिका यहाँ दी गई है:

चरण 1: MCP क्लाइंट को कॉन्फ़िगर करें

अपने MCP क्लाइंट कॉन्फ़िगरेशन में --browser-url विकल्प जोड़ें। इस विकल्प का मान चल रहे Chrome इंस्टेंस का URL होना चाहिए। http://127.0.0.1:9222 एक सामान्य डिफ़ॉल्ट है।

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

चरण 2: Chrome ब्राउज़र प्रारंभ करें

[!WARNING] रिमोट डिबगिंग पोर्ट को सक्षम करने से चल रहे ब्राउज़र इंस्टेंस पर एक डिबगिंग पोर्ट खुल जाता है। आपकी मशीन पर कोई भी एप्लिकेशन इस पोर्ट से कनेक्ट हो सकता है और ब्राउज़र को नियंत्रित कर सकता है। सुनिश्चित करें कि जब डिबगिंग पोर्ट खुला हो तो आप किसी भी संवेदनशील वेबसाइट को ब्राउज़ नहीं कर रहे हैं।

रिमोट डिबगिंग पोर्ट सक्षम करके Chrome ब्राउज़र प्रारंभ करें। डिबगिंग पोर्ट सक्षम करके नया प्रारंभ करने से पहले किसी भी चल रहे Chrome इंस्टेंस को बंद करना सुनिश्चित करें। आपके द्वारा चुना गया पोर्ट नंबर वही होना चाहिए जो आपने अपने MCP क्लाइंट कॉन्फ़िगरेशन में --browser-url विकल्प में निर्दिष्ट किया था।

सुरक्षा कारणों से, रिमोट डिबगिंग पोर्ट सक्षम करते समय Chrome को आपको एक गैर-डिफ़ॉल्ट उपयोगकर्ता डेटा निर्देशिका का उपयोग करने की आवश्यकता होती है। आप --user-data-dir फ़्लैग का उपयोग करके एक कस्टम निर्देशिका निर्दिष्ट कर सकते हैं। यह सुनिश्चित करता है कि आपकी नियमित ब्राउज़िंग प्रोफ़ाइल और डेटा डिबगिंग सत्र के संपर्क में न आएं।

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Linux

/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

चरण 3: अपने सेटअप का परीक्षण करें

MCP क्लाइंट को कॉन्फ़िगर करने और Chrome ब्राउज़र प्रारंभ करने के बाद, आप अपने MCP क्लाइंट में एक सरल प्रॉम्प्ट चलाकर अपने सेटअप का परीक्षण कर सकते हैं:

Check the performance of https://developers.chrome.com

आपके MCP क्लाइंट को चल रहे Chrome इंस्टेंस से कनेक्ट होना चाहिए और एक प्रदर्शन रिपोर्ट प्राप्त करनी चाहिए।

यदि आपको VM-से-होस्ट पोर्ट अग्रेषण समस्याओं का सामना करना पड़ता है, तो docs/troubleshooting.md में "वर्चुअल मशीन (VM) और होस्ट के बीच रिमोट डिबगिंग विफल हो जाती है" अनुभाग देखें।

रिमोट डिबगिंग पर अधिक जानकारी के लिए, Chrome DevTools दस्तावेज़ीकरण देखें।

Android पर Chrome डिबग करना

कृपया इन निर्देशों से परामर्श लें।

ज्ञात सीमाएँ

समस्या निवारण देखें।

ब्राउज़र उप-एजेंट के रूप में एकीकृत करना

यदि आप एजेंटिक टूलिंग विकसित कर रहे हैं और अपने उत्पाद के हिस्से के रूप में एक एकीकृत ब्राउज़र उप-एजेंट प्रदान करना चाहते हैं, तो हम एजेंटों के लिए Chrome DevTools के शीर्ष पर निर्माण करने की अनुशंसा करते हैं।

संदर्भ कार्यान्वयन के लिए, Gemini CLI ब्राउज़र एजेंट दस्तावेज़ीकरण देखें।