Chrome DevTools MCP

 (developer.chrome.com)
3 पॉइंट द्वारा GN⁺ 2026-03-16 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • 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 को धीरे-धीरे बढ़ाने की योजना है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2026-03-16
Hacker News की राय

  • मैं Playwright का इस्तेमाल करके सभी requests और responses को intercept करता हूँ, और जब Claude Code YouTube जैसी वेबसाइटों पर navigate करते हुए click और input करता है, तब उससे जुड़ा traffic रिकॉर्ड करता हूँ
    इस तरह इकट्ठा किए गए डेटा के आधार पर strongly-typed API अपने-आप generate करता हूँ, ताकि किसी भी वेबसाइट के साथ internal API के ज़रिए interact किया जा सके
    बेशक यह सेवा की शर्तों का उल्लंघन हो सकता है, लेकिन फायदा यह है कि ads, images, या markup सब कुछ लोड नहीं करना पड़ता
    अगर किसी की दिलचस्पी हो तो इसे इस हफ्ते public करने की योजना है

    • दिलचस्प है कि HN को यह आइडिया पसंद आ रहा है
      असल में Anthropic या OpenAI जैसी LLM बनाने वाली कंपनियाँ यही तरीका पहले से अपनाती रही हैं
      जब वे ads को bypass करती हैं या copyrighted सामग्री डाउनलोड करती हैं, तो उसे ‘ईश्वर का उपहार’ कहा जाता है, और जब Zuck वही काम करे तो ‘शैतान का श्राप’ — यही विडंबना है
    • मैं भी कुछ ऐसा ही इस्तेमाल कर रहा हूँ
      ज़्यादातर DOM tree के खास points पर page layout और styles को recreate करने, या responsive behavior को अपने-आप capture करने के लिए
      Playwright से screen width बदलते हुए style changes को track करता हूँ, और screenshots और style hierarchy data को साथ में सेव करता हूँ
      manual inspection tools भी हैं, लेकिन वे बहुत धीमे और अप्रभावी हैं
      मेरी राय में MCP से बेहतर है कि custom CLI सीधे खुद बनाई जाए
      AI का सीधे access करना और ‘skills’ के ज़रिए उसका इस्तेमाल करना ही असली ताकत है
    • समझ नहीं आता कि Playwright की ज़रूरत ही क्यों है
      लगता है Claude के पास सिर्फ agent-browser हो तो वह deterministic code सीधे generate कर सकता है
    • उम्मीद है आप इसे ज़रूर public करेंगे। यह जानना चाहता हूँ कि क्या आपने इसे agent skill के रूप में बनाया है
    • क्या इस तरीके से yt-dlp की तरह लगातार updates किए बिना YouTube videos सीधे डाउनलोड किए जा सकते हैं, यह भी जानना चाहूँगा

  • DevTools MCP project ने हाल ही में standalone CLI जारी की है
    chrome-devtools-cli डॉक्युमेंट देखें तो यह v0.20.0 version में शामिल है
    MCP की token cost समस्या को लेकर चिंतित लोगों के लिए यह अच्छी खबर है
    (जानकारी के लिए, मैं पहले DevTools टीम में काम करता था, और अब भी वहीं काम कर रहा हूँ)

    • अब Tool Search की वजह से MCP, CC में कोई cost नहीं लेता

  • मैं पिछले कुछ महीनों से TideWave इस्तेमाल कर रहा हूँ
    tidewave.ai पहले Elixir/LiveView आधारित था, लेकिन अब JS frameworks और RoR भी support करता है
    यह टूल सिर्फ browser तक सीमित नहीं है, बल्कि app के runtime access तक देता है
    यानी agent सीधे database और endpoints तक पहुँच सकता है, इसलिए यह बहुत ताकतवर है

  • Google agentic CLI coding में बहुत पीछे है
    Gemini CLI इतनी खराब है कि साफ़ लगता है कि अंदरूनी तौर पर भी इसका इस्तेमाल नहीं होता
    मुझे लगता है MCP पहले ही dead technology बन चुकी है। CLI tools ज़्यादा तेज़, flexible हैं, और पहले से trained environments भी बहुत हैं
    किसी serious developer के लिए Playwright और headless Chromium इस्तेमाल करना ही सही तरीका है
    MCP सिर्फ beginners को आकर्षित करती है

    • मैं बड़े enterprise environment में काम करता हूँ, और authentication, RBAC, rate limiting, operations management जैसी चीज़ों की वजह से MCP अब भी उपयोगी है
      सिर्फ CLI से security और operations की complexity बहुत बढ़ जाती है
      हाँ, Gemini CLI के खराब होने वाली बात से मैं सहमत हूँ
    • मैं MCP मर चुकी है वाली बात से सहमत हूँ
      Anthropic ने इसे बेहतर करने की कोशिश की, लेकिन context bloat की समस्या अब भी बनी हुई है
      MCP servers इस्तेमाल न होने पर भी context घेरते हैं
      अब agent skill की तरफ़ जाना चाहिए
    • जानकारी के लिए, Gemini CLI का वास्तव में Google के अंदर काफी इस्तेमाल होता है
      code search, docs access, bug lookup, RAG database connections जैसी चीज़ों के लिए MCP services इस्तेमाल की जाती हैं
      (यह बात मैंने सीधे Google के अंदर काम करने वालों से सुनी है)
    • अगर MCP मर चुकी है, तो Chrome खोलना, buttons क्लिक करना, और console output पढ़ना किस CLI से किया जाना चाहिए, यह जानना चाहूँगा
      और अगर MCP context लेती है, तो क्या CLI skills मुफ़्त हैं — यह भी सवाल है

  • यह सुविधा पहले से implement करने वाली एक agent skill मौजूद है
    chrome-cdp-skill मैं रोज़ इस्तेमाल करता हूँ और यह सच में कमाल की है
    उदाहरण के लिए, codex से local music library manage करते समय मैं YT Music tab खोलकर album खोज सका और URL को yt-dlp को दे सका
    हालाँकि अभी यह सिर्फ Chrome के लिए है, इसलिए दूसरे browsers के लिए binary path बदलना पड़ता है

    • डेमो शानदार है, लेकिन मुझे डर लगता है कि prompt injection का सिर्फ एक हमला ही सारे data access को संभव बना सकता है
    • यह DevTools MCP के लिए skill नहीं, बल्कि एक independent project है
      browser automation + agent क्षेत्र में पहले से कड़ी प्रतिस्पर्धा है
      DevTools MCP और नई CLI को Chrome DevTools & Puppeteer टीम maintain करती है, इसलिए शायद यह ज़्यादा स्थिर होगी
      फिर भी यह अच्छी बात है कि open source competition innovation लाती है
    • समझ नहीं आता कि लोग वास्तव में ऐसे ad-hoc skills का इस्तेमाल करते भी हैं या नहीं
      मेरे हिसाब से playwriter.dev जैसे stable tool का इस्तेमाल करना बेहतर है

  • मैंने WebSocket proxy + Chrome extension बनाया है ताकि agent DOM को control कर सके
    browserbox के ज़रिए इसे इस तरह सेट किया है कि session cookies की अनुमति के साथ access मिल सके
    अभी इसे agent tool usage success rate बढ़ाने के लिए research middleware की तरह इस्तेमाल कर रहा हूँ

  • मैं यह MCP काफी समय से इस्तेमाल कर रहा हूँ, और codex on opencode के साथ यह सबसे ज़्यादा stable लगा
    खासकर SVG editing REPL के रूप में इस्तेमाल करने पर इसने अपने-आप शानदार custom icons बना दिए, जो काफ़ी चौंकाने वाला था
    Electron apps में भी यह reverse engineering या extension work के लिए अच्छी तरह फिट बैठता है

  • मैंने playwriter इस्तेमाल किया था, और existing session से connect करने का इसका तरीका हैरान कर देने जितना अच्छा चला

  • मैंने भी Playwright के साथ कुछ ऐसा ही बनाया था
    पहले token usage बहुत ज़्यादा होने से cost भी काफी आती थी, लेकिन results को disk पर save करके और agent से query करवाने वाला एक wrapper बनाकर इसे हल किया
    uisnap.dev पर देखा जा सकता है
    जानना चाहूँगा कि क्या इस project ने token usage समस्या हल कर दी है

    • लगता है ज़्यादातर हद तक हल हो गई है। संदर्भ के लिए playwright-cli देख सकते हैं
    • मैं Claude Haiku से page snapshots का सारांश बनवाने वाला एक wrapper MCP server बनाकर इस्तेमाल कर रहा हूँ
      playwright-slim-mcp पर देखा जा सकता है

  • मैंने firefox-devtools-mcp इस्तेमाल किया, और यह बेसिक Chrome MCP से कहीं ज़्यादा तेज़ और efficient लगा