Chrome DevTools MCP की मदद से, अपने कोडिंग एजेंट को ब्राउज़र सेशन डीबग करने की अनुमति देना

Sebastian Benz

Alex Rudenko

पब्लिश होने की तारीख: 11 दिसंबर, 2025

हमने Chrome DevTools MCP सर्वर में एक सुधार किया है. हमारे कई उपयोगकर्ता इस सुधार का अनुरोध कर रहे थे: कोडिंग एजेंट को सीधे तौर पर चालू ब्राउज़र सेशन से कनेक्ट करने की सुविधा.

इस सुविधा की मदद से, कोडिंग एजेंट ये काम कर सकते हैं:

1. मौजूदा ब्राउज़र सेशन का फिर से इस्तेमाल करना: मान लें कि आपको अपने कोडिंग एजेंट से, साइन-इन करने के बाद दिखने वाली किसी समस्या को ठीक कराना है. अब आपका कोडिंग एजेंट, सीधे तौर पर आपके मौजूदा ब्राउज़िंग सेशन को ऐक्सेस कर सकता है. इसके लिए, उसे दोबारा साइन इन करने की ज़रूरत नहीं होगी.
2. चालू डीबगिंग सेशन ऐक्सेस करना: कोडिंग एजेंट अब DevTools के यूज़र इंटरफ़ेस (यूआई) में चालू डीबगिंग सेशन ऐक्सेस कर सकते हैं. उदाहरण के लिए, Chrome DevTools के नेटवर्क पैनल में नेटवर्क अनुरोध पूरा न होने पर, अनुरोध चुनें और कोडिंग एजेंट से इसकी जांच करने के लिए कहें. यह सुविधा, एलिमेंट पैनल में चुने गए एलिमेंट के साथ भी काम करती है. हमें इस नई सुविधा के बारे में बताते हुए खुशी हो रही है. इसकी मदद से, मैन्युअल और एआई की मदद से डीबग करने के बीच आसानी से स्विच किया जा सकता है.

इसे चलाकर देखें:

ऑटो कनेक्शन की सुविधा, Chrome DevTools MCP को Chrome इंस्टेंस से कनेक्ट करने के मौजूदा तरीकों के साथ जोड़ी गई है. ध्यान दें कि आपके पास अब भी ये विकल्प हैं:

• Chrome को Chrome DevTools MCP सर्वर के लिए खास तौर पर बनाई गई उपयोगकर्ता प्रोफ़ाइल (मौजूदा डिफ़ॉल्ट) के साथ चलाएं.
• रिमोट डीबग पोर्ट की मदद से, चल रहे Chrome इंस्टेंस से कनेक्ट करें.
• Chrome के एक से ज़्यादा इंस्टेंस को अलग-अलग चलाएं. हर इंस्टेंस, कुछ समय के लिए बनाई गई प्रोफ़ाइल में चलता है.

यह कैसे काम करता है

हमने Chrome M145 (फ़िलहाल, Canary में उपलब्ध है) में एक नई सुविधा जोड़ी है. इसकी मदद से, Chrome DevTools MCP सर्वर, रिमोट डीबगिंग कनेक्शन का अनुरोध कर सकता है. यह नया फ़्लो, Chrome की मौजूदा रिमोट डीबगिंग सुविधाओं पर आधारित है. डिफ़ॉल्ट रूप से, Chrome में रिमोट डीबगिंग कनेक्शन बंद होते हैं. डेवलपर को सबसे पहले chrome://inspect#remote-debugging पर जाकर, इस सुविधा को चालू करना होगा.

जब Chrome DevTools MCP सर्वर को --autoConnect विकल्प के साथ कॉन्फ़िगर किया जाता है, तो MCP सर्वर चालू Chrome इंस्टेंस से कनेक्ट हो जाएगा. इसके बाद, रिमोट डीबगिंग सेशन का अनुरोध करेगा. बुरे इरादे से काम करने वाले लोगों से Chrome DevTools MCP सर्वर के गलत इस्तेमाल को रोकने के लिए, जब भी यह सर्वर रिमोट डीबगिंग सेशन का अनुरोध करेगा, तब Chrome उपयोगकर्ता को एक डायलॉग दिखाएगा. इसमें उपयोगकर्ता से रिमोट डीबगिंग सेशन की अनुमति मांगी जाएगी. इसके अलावा, डीबग करने का सेशन चालू होने पर, Chrome सबसे ऊपर "Chrome को ऑटोमेटेड टेस्ट सॉफ़्टवेयर से कंट्रोल किया जा रहा है" बैनर दिखाता है.

अपनी प्रोफ़ाइल बनाना शुरू करें

रिमोट डीबगिंग की नई सुविधाओं का इस्तेमाल करने के लिए. आपको पहले Chrome में रिमोट डीबगिंग चालू करनी होगी. इसके बाद, Chrome DevTools MCP सर्वर को कॉन्फ़िगर करना होगा, ताकि ऑटो कनेक्शन की नई सुविधा का इस्तेमाल किया जा सके.

पहला चरण: Chrome में रिमोट डीबगिंग सेट अप करना

Chrome में रिमोट डीबगिंग सेट अप करने के लिए, यह तरीका अपनाएं:

1. रिमोट तरीके से डीबग करने की सुविधा चालू करने के लिए, chrome://inspect/#remote-debugging पर जाएं.
2. डायलॉग यूज़र इंटरफ़ेस (यूआई) में दिए गए निर्देशों का पालन करके, डीबग करने के लिए आने वाले कनेक्शन को अनुमति दें या अस्वीकार करें.

दूसरा चरण: Chrome DevTools MCP सर्वर को कॉन्फ़िगर करना, ताकि वह चल रहे Chrome इंस्टेंस से अपने-आप कनेक्ट हो सके

chrome-devtools-mcp सर्वर को चालू Chrome इंस्टेंस से कनेक्ट करने के लिए, एमसीपी सर्वर सेट के लिए --autoConnect कमांड-लाइन आर्ग्युमेंट का इस्तेमाल करें.

यहां दिया गया कोड स्निपेट, gemini-cli के लिए कॉन्फ़िगरेशन का एक उदाहरण है:

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

तीसरा चरण: अपने सेटअप की जांच करना

अब gemini-cli खोलें और यह प्रॉम्प्ट चलाएं:

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

Chrome DevTools MCP सर्वर, Chrome के चालू इंस्टेंस से कनेक्ट करने की कोशिश करेगा. यह एक डायलॉग दिखाता है, जिसमें उपयोगकर्ता से अनुमति मांगी जाती है:

अनुमति दें पर क्लिक करने से, Chrome DevTools MCP सर्वर developers.chrome.com खुल जाता है और परफ़ॉर्मेंस ट्रेस ले लेता है.

पूरी जानकारी के लिए, GitHub पर README देखें.

अपने कोडिंग एजेंट को डीबग सेशन का ऐक्सेस देना

लाइव Chrome इंस्टेंस से कनेक्ट करने का मतलब है कि आपको ऑटोमेशन और मैन्युअल कंट्रोल में से किसी एक को चुनने की ज़रूरत नहीं है. DevTools का इस्तेमाल खुद किया जा सकता है या डीबग करने का टास्क अपने कोडिंग एजेंट को सौंपा जा सकता है. अगर आपको अपनी वेबसाइट पर कोई समस्या मिलती है, तो DevTools खोलकर देखें कि किस एलिमेंट की वजह से समस्या आ रही है. अगर आपको कोडिंग एजेंट से समस्या ठीक करानी है, तो अब Chrome DevTools MCP Server की मदद से ऐसा किया जा सकता है. Elements पैनल में जाकर, एलिमेंट को चुना जा सकता है. इसके बाद, कोडिंग एजेंट से समस्या की जांच करने के लिए कहा जा सकता है.

नेटवर्क पैनल के लिए भी यही तरीका काम करता है. नेटवर्क अनुरोध चुना जा सकता है और कोडिंग एजेंट से इसकी जांच करने के लिए कहा जा सकता है.

हालांकि, यह तो सिर्फ़ पहला कदम है. हम Chrome DevTools MCP Server के ज़रिए, कोडिंग एजेंट को ज़्यादा से ज़्यादा पैनल डेटा उपलब्ध कराने का प्लान बना रहे हैं. हमारे साथ बने रहें!