AI एजेंटों के लिए Chrome DevTools (MCP)

• Chrome DevTools MCP सर्वर का public preview संस्करण जारी किया गया है, जिससे AI coding agents अब Chrome DevTools की debugging और performance features का उपयोग कर सकते हैं
• पहले agents code execution के परिणामों को जांच नहीं पाते थे, लेकिन अब वे network, console, DOM, performance tracing जैसे वास्तविक runtime data का उपयोग कर सकते हैं
• DevTools MCP सर्वर का उपयोग करके real-time code validation, network·console error analysis, user action simulation, style·layout debugging, और automated performance audits जैसी कई तरह की automation संभव हो जाती है
• डेवलपर्स MCP client settings में सर्वर जोड़कर इसे तुरंत इस्तेमाल कर सकते हैं, और example prompts से LCP जांच या form submission error diagnosis जैसे काम कर सकते हैं
• Google समुदाय के feedback के आधार पर MCP features का विस्तार करने की योजना बना रहा है

---

अवलोकन

• Google ने नए Chrome DevTools Model Context Protocol (MCP) server का public preview संस्करण जारी किया है
• इससे AI coding assistants के लिए Chrome DevTools की debugging और performance measurement capabilities को सीधे browser में उपयोग करने वाला environment उपलब्ध हो जाता है
• यानी, यह उस कठिनाई को कम कर सकता है जिसमें coding agents browser में चल रहे code के वास्तविक behavior को देख नहीं पाते थे

Model Context Protocol (MCP) परिचय

• Model Context Protocol (MCP) बड़े language models (LLM) को external tools और data sources से जोड़ने के लिए एक open source standard है
• Chrome DevTools MCP server इस standard का उपयोग करके AI agents से जुड़ता है, और web debugging तथा performance tracing जैसे कई tools के उपयोग को संभव बनाता है
• उदाहरण के लिए, performance_start_trace tool के जरिए LLM browser चला सकता है, performance information इकट्ठा कर सकता है, उसका analysis कर सकता है, और सुधार के सुझाव दे सकता है
• MCP protocol के माध्यम से coding agents को website development और problem-solving में अधिक शक्तिशाली सहायता मिलती है
• MCP कैसे काम करता है, इसकी अधिक जानकारी आधिकारिक MCP docs में देखी जा सकती है

प्रमुख उपयोग के मामले

• real-time code changes का validation

  • AI agent code बदलने के बाद Chrome DevTools MCP के जरिए browser में behavior को तुरंत verify कर सकता है
  • prompt उदाहरण:

    Verify in the browser that your change works as expected.  
    

• network और console errors का diagnosis

  • network requests का analysis, CORS issues की पहचान, console logs की जांच जैसी automated diagnosis क्षमताएं
  • prompt उदाहरण:

    A few images on localhost:8080 are not loading. What's happening?  
    

• user behavior simulation

  • browser के अंदर navigation, form filling, button clicks जैसे वास्तविक user flows की automated testing और bug reproduction में मदद
  • prompt उदाहरण:

    Why does submitting the form fail after entering an email address?  
    

• real-time style और layout issues की debugging

  • DOM, CSS inspection और overflow जैसे layout issues पर विस्तृत सुझाव स्वचालित रूप से उपलब्ध
  • prompt उदाहरण:

    The page on localhost:8080 looks strange and off. Check what's happening there.  
    

• performance audit automation

  • browser की performance tracing automation और analysis
  • prompt उदाहरण:

    Localhost:8080 is loading slowly. Make it load faster.  
    

• उपलब्ध MCP tools की सूची आधिकारिक tool reference docs में देखी जा सकती है

शुरुआत कैसे करें

• MCP client में नीचे जैसा configuration जोड़कर Chrome DevTools MCP server से integration किया जा सकता है

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

• example prompt से behavior की जांच की जा सकती है

  Please check the LCP of web.dev.  
  

• अधिक जानकारी और docs GitHub पर Chrome DevTools MCP docs में उपलब्ध हैं

भागीदारी और विस्तार की योजना

• Google इस public preview रिलीज़ को शुरुआत मानकर Chrome DevTools MCP को धीरे-धीरे आगे विकसित करेगा
• community feedback के आधार पर भविष्य के additional features तय करने की योजना है
• AI coding support tools के users और अगली पीढ़ी के AI development tools providers, दोनों की राय और भागीदारी का सक्रिय रूप से स्वागत है
• सुधार अनुरोध या मिले हुए issues की रिपोर्ट GitHub Issues के जरिए की जा सकती है

[shakespeares]

मुझे लगता है कि इसमें कुछ ऐसे उपयोग के मामले हैं जहाँ यह playwright से बेहतर हो सकता है।
हालाँकि सीधे तौर पर देखें तो इसमें कुछ कमी महसूस होती है।