Chrome DevTools MCP

• Chrome DevTools MCP सर्वर को इस तरह बेहतर बनाया गया है कि coding agents active browser session से सीधे connect कर सकें
• इस फीचर के जरिए agent logged-in session को reuse कर सकते हैं या DevTools की active debugging session तक पहुंच सकते हैं
• Chrome M144 (beta) में --autoConnect option इस्तेमाल करने पर MCP सर्वर चल रहे Chrome instance से अपने-आप connect हो जाता है
• हर connection पर user approval dialog दिखाया जाता है, और debugging के दौरान “स्वचालित टेस्ट सॉफ़्टवेयर द्वारा नियंत्रित” बैनर दिखता है
• manual debugging और AI-assisted debugging के बीच आसानी से switch किया जा सकता है, जिससे development efficiency बढ़ती है

---

Chrome DevTools MCP सर्वर सुधार का अवलोकन

• Chrome DevTools MCP सर्वर को update किया गया है ताकि coding agents active browser session से सीधे connect कर सकें
  • user logged-in session को reuse कर सकता है, इसलिए बिना अतिरिक्त login के debugging संभव है
  • DevTools UI के Network panel या Elements panel में चुनी गई items की जांच agent से कराई जा सकती है
• मौजूदा connection methods भी बने रहते हैं, जिनमें MCP सर्वर के लिए dedicated profile का उपयोग, remote debug port connection, और temporary profile आधारित multiple instance execution शामिल हैं

यह कैसे काम करता है (How it works)

• Chrome M144 (फिलहाल beta) में remote debugging connection request feature जोड़ा गया है
  • जब MCP सर्वर --autoConnect option के साथ चलता है, तो यह active Chrome instance से अपने-आप connect होकर remote debugging session request करता है
• security मजबूत करने के लिए Chrome हर request पर user approval dialog दिखाता है, और approval के बाद ही connection की अनुमति देता है
• debugging session सक्रिय होने पर browser के ऊपर “Chrome is being controlled by automated test software” बैनर दिखता है

शुरू करें (Get started)

• नए remote debugging feature का उपयोग करने के लिए Chrome में remote debugging enable करना होगा और MCP सर्वर सेट करना होगा

Step 1: Chrome में remote debugging सेट करें

• chrome://inspect/#remote-debugging पर जाकर remote debugging enable करें
• dialog के जरिए debugging connection की अनुमति देनी है या नहीं, यह चुनें

Step 2: MCP सर्वर auto-connect सेट करें

• chrome-devtools-mcp सर्वर चलाते समय --autoConnect argument जोड़ें
• उदाहरण configuration (gemini-cli):

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

  • Chrome M144 के stable channel तक पहुंचने से पहले --channel=beta देना जरूरी है

Step 3: सेटअप टेस्ट करें

• gemini-cli में यह command चलाएं:

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

• Chrome user को remote debugging session की अनुमति देने वाला dialog दिखाता है
• Allow पर click करने पर MCP सर्वर site खोलता है और performance tracing करता है

coding agents के साथ integrated debugging

• active Chrome instance connection के जरिए automation और manual control साथ-साथ इस्तेमाल किए जा सकते हैं
  • user DevTools में problem element खोजने के बाद उस element को coding agent को देकर fix करने को कह सकता है
  • Network panel में भी इसी तरह request चुनकर agent को analysis के लिए कहा जा सकता है
• Chrome DevTools MCP सर्वर के जरिए अतिरिक्त panel data access को धीरे-धीरे बढ़ाने की योजना है