DevTools एमसीपी सर्वर या इसके खास सीएलआई और स्किल की मदद से, अपने कोडिंग एजेंट को DevTools की सुविधाएं दें.

Chrome DevTools, MCP सर्वर के साथ काम करने वाले हर एजेंट के साथ काम करता है. जैसे, Gemini CLI, Antigravity, Claude Code, Codex वगैरह. एमसीपी सर्वर का इस्तेमाल करके, अपने एजेंट को हर सेशन में DevTools की क्षमताओं के बारे में बताएं.
MCP सर्वर के मुकाबले, Chrome DevTools CLI का इस्तेमाल करके कम टोकन में काम किया जा सकता है. Chrome DevTools MCP सर्वर पैकेज में एक खास स्किल शामिल होती है. यह आपके कोडिंग एजेंट को स्क्रिप्ट लिखने का तरीका सिखाती है. इसके लिए, एमसीपी सर्वर के जैसे ही असरदार टूल इस्तेमाल किए जाते हैं.

अभी इंस्टॉल करें

एमसीपी सर्वर और सीएलआई, दोनों एक ही पैकेज का हिस्सा हैं. अपनी पसंद के कोडिंग एजेंट के लिए इन्हें पाएं. यहां सबसे ज़्यादा इस्तेमाल किए जाने वाले एजेंटों के लिए निर्देश दिए गए हैं. साथ ही, GitHub पर 20 से ज़्यादा एजेंटों के लिए निर्देश दिए गए हैं.

  # 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
  # Either MCP only:
  claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
  # Or as a plugin (MCP+Skills):
  /plugin marketplace add ChromeDevTools/chrome-devtools-mcp
  /plugin install chrome-devtools-mcp
  codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

DevTools MCP सर्वर या सीएलआई इंस्टॉल करने के बाद, कुछ प्रॉम्प्ट आज़माएं! अपने एजेंट से, Lighthouse ऑडिट करने, फ़ॉर्म भरने या स्क्रीनशॉट लेने के लिए कहें. इन सभी सुविधाओं को काम करते हुए देखने के लिए, उदाहरण के तौर पर यह प्रॉम्प्ट आज़माएं:

  Visit developer.chrome.com and run a search for "devtools",
  while recording a performance trace.
  Let me know how I can improve the website's performance.

यह प्रॉम्प्ट, नया पेज बनाने के लिए टूल का इस्तेमाल करता है. साथ ही, यह खोज बार के साथ इंटरैक्ट करता है और परफ़ॉर्मेंस ट्रेस चलाता है. इसमें CrUX डेटा भी शामिल है!