अपने एजेंट को कोड बनाने, डीबग करने, और उसकी पुष्टि करने में मदद करें. एजेंट के लिए Chrome DevTools की मदद से, आपका एआई एजेंट Chrome ब्राउज़र से इंटरैक्ट कर सकता है. इससे वह कोड की जांच कर सकता है, उपयोगकर्ताओं की नकल कर सकता है, और Chrome DevTools की सुविधाओं का इस्तेमाल करके बग ढूंढ सकता है. यह सब, कोड को शिप करने से पहले किया जा सकता है.
शुरू करना GitHub पर देखें

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

GitHub पर इंस्टॉलेशन के सभी विकल्प देखें

एजेंट के लिए Chrome DevTools, Antigravity 2.0 के साथ पहले से बंडल किया गया है. ब्राउज़र सब-एजेंट की मदद से, इसका इस्तेमाल तुरंत शुरू किया जा सकता है. स्लैश कमांड का इस्तेमाल करके देखें. जैसे:

/browser Navigate to the Google homepage

एजेंट की खास स्किल ऐक्सेस करने के लिए, शुरुआती सेटअप के Build with Google चरण के दौरान या ऐप्लिकेशन की सेटिंग में जाकर, DevTools प्लगिन इंस्टॉल करें.

  # Install as a Gemini extension (MCP+Skills):
  gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
 
  # Install as a plugin (MCP+Skills)
  # Add the marketplace registry:
  /plugin marketplace add ChromeDevTools/chrome-devtools-mcp
  # Install
  /plugin install chrome-devtools-mcp@chrome-devtools-plugins
 
  codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

अगर आपने कोडिंग के लिए Copilot या OpenCode जैसे किसी अन्य एजेंट का इस्तेमाल किया है, तो हमारे GitHub रिपॉज़िटरी पर दिए गए निर्देशों का पालन करें.

आपका एजेंट क्या-क्या कर सकता है?

अपने एजेंट को वेब ब्राउज़र से इंटरैक्ट करने की अनुमति दें. अगर आपको यह जानना है कि आपका एजेंट और क्या-क्या कर सकता है, तो इस्तेमाल के उदाहरणों से जुड़ी दस्तावेज़ पर जाएं.

रिस्पॉन्सिव डिज़ाइन, अलग-अलग भौगोलिक जगहों, और असल उपयोगकर्ता फ़्लो की जांच करें. ज़्यादा जानें.
रीयल-टाइम में जांच करने, रोकने, और समस्या हल करने के लिए, Chrome के चालू सेशन से कनेक्ट करें. ज़्यादा जानें.
कोड को प्रोडक्शन में पुश करने से पहले, सुलभता (A11y), एसईओ, और परफ़ॉर्मेंस के लिए ऑडिट चलाएं, ताकि कार्रवाई की जा सकने वाली चेकलिस्ट उपलब्ध कराई जा सकें. ज़्यादा जानें.

उपयोगकर्ताओं को बेहतर अनुभव देने वाले प्रॉम्प्ट

अपने एआई एजेंट को वेबसाइटों पर नेविगेट करने, बटन के साथ इंटरैक्ट करने, पेजों को एक्सप्लोर करने, और तुरंत ऐक्सेसिबिलिटी ऑडिट करने की सुविधा दें. यह सब, पूरी तरह से मैनेज किए गए ब्राउज़र इंस्टेंस के ज़रिए किया जा सकता है.

अनुभवों की नकल करना 

Go to developer.chrome.com on mobile, click the burger menu, and check for top-level navigation items.
 
Go to https://chrome.dev/devtools-store-locator. Simulate your location is Berlin and check if the store locator shows the Rosenthaler Strasse branch.
 
Run a Lighthouse accessibility audit and suggest fixes for any low-contrast elements.
 
Perform an SEO audit and verify all images have descriptive alt text.
एजेंट के लिए Chrome DevTools सेट अप करने का तरीका जानें. साथ ही, एजेंट को अपने-आप डीबग और पुष्टि करते हुए देखें. इस वीडियो में, बैच ऐक्शन के लिए CLI का इस्तेमाल करने, हैंडशेक करने, और इंस्टॉल करने के बारे में बताया गया है.