Chrome DevTools MCP

आधिकारिक

Chrome DevTools MCP का आधिकारिक सर्वर, जो कोडिंग एजेंटों जैसे Gemini, Claude, Cursor और Copilot से लाइव Chrome ब्राउज़र को नियंत्रित और निरीक्षण करने के लिए है।

Chrome DevTools MCP के साथ आप क्या कर सकते हैं?

  • प्रदर्शन ट्रेसिंग — अपने सहायक से किसी URL के लिए प्रदर्शन ट्रेस रिकॉर्ड करने और कार्रवाई योग्य जानकारी सतह पर लाने के लिए कहें, जैसे "https://developers.chrome.com का प्रदर्शन जांचें"।
  • नेटवर्क विश्लेषण — अपने सहायक से नेटवर्क अनुरोधों की जांच करवाएं ताकि लोडिंग समस्याएं, विफल संसाधन, या API कॉल समस्याओं को डीबग किया जा सके।
  • कंसोल मॉनिटरिंग — ब्राउज़र कंसोल संदेशों की जांच का अनुरोध करें, जिसमें स्रोत-मैप किए गए स्टैक ट्रेस शामिल हों, ताकि JavaScript त्रुटियों का निदान किया जा सके।
  • स्क्रीनशॉट कैप्चर — अपने सहायक को वर्तमान पृष्ठ के स्क्रीनशॉट लेने का निर्देश दें, ताकि दृश्य सत्यापन या दस्तावेज़ीकरण किया जा सके।
  • स्वचालित ब्राउज़र क्रियाएँ — अपने सहायक को Puppeteer का उपयोग करके क्लिक, नेविगेशन, या फ़ॉर्म भरने जैसे इंटरैक्शन स्वचालित करने का निर्देश दें, जिसमें परिणामों के लिए स्वचालित प्रतीक्षा शामिल हो।

दस्तावेज़

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

npm chrome-devtools-mcp package

एजेंटों के लिए Chrome DevTools (chrome-devtools-mcp) आपके कोडिंग एजेंट (जैसे Antigravity, Claude, Cursor या Copilot) को एक लाइव Chrome ब्राउज़र को नियंत्रित और निरीक्षण करने की सुविधा देता है। यह एक Model-Context-Protocol (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 for Testing का समर्थन करता है। अन्य Chromium-आधारित ब्राउज़र काम कर सकते हैं, लेकिन इसकी गारंटी नहीं है, और आपको अप्रत्याशित व्यवहार का सामना करना पड़ सकता है। अपने विवेक से उपयोग करें। हम Extended Stable 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 क्लाइंट कॉन्फ़िगरेशन

अपने संपादक या एजेंट (जैसे Antigravity, Claude Code, Cursor, VS Code) के लिए विशिष्ट सेटअप निर्देशों के लिए, कृपया हमारा क्लाइंट कॉन्फ़िगरेशन गाइड देखें।

आपका पहला प्रॉम्प्ट

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

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

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

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

उपकरण

यदि आपको कोई समस्या आती है, तो हमारा समस्या निवारण गाइड देखें। सभी समर्थित MCP क्षमताओं की पूरी सूची के लिए पूर्ण टूल संदर्भ देखें।

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

सर्वर पैरामीटरों की पूरी सूची (जैसे, --headless, --isolated, --slim) और WebSocket कनेक्शन कैसे कॉन्फ़िगर करें, कॉन्फ़िगरेशन गाइड में पाएँ।

उन्नत उपयोग

समवर्ती सत्रों को संभालने, स्थायी उपयोगकर्ता डेटा निर्देशिकाओं, नया शुरू करने के बजाय चल रहे Chrome इंस्टेंस से कनेक्ट करने, या Android पर डिबगिंग जैसी उन्नत सुविधाओं के लिए, हमारा उन्नत उपयोग गाइड देखें।

ब्राउज़र सबएजेंट के रूप में एकीकरण

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

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