पब्लिश होने की तारीख: 23 सितंबर, 2025
हम आज Chrome DevTools Model Context Protocol (MCP) सर्वर का सार्वजनिक पूर्वावलोकन लॉन्च कर रहे हैं. इससे एआई कोडिंग असिस्टेंट को Chrome DevTools की सुविधाएं मिलेंगी.
कोडिंग एजेंट को एक बुनियादी समस्या का सामना करना पड़ता है: वे यह नहीं देख पाते कि ब्राउज़र में चलने पर, उनके जनरेट किए गए कोड का असल में क्या काम है. वे आंखों पर पट्टी बांधकर प्रोग्रामिंग कर रहे हैं.
Chrome DevTools MCP सर्वर इसे बदलता है. एआई कोडिंग असिस्टेंट, सीधे Chrome में वेब पेजों को डीबग कर सकते हैं. साथ ही, DevTools की डीबग करने की सुविधाओं और परफ़ॉर्मेंस की अहम जानकारी का फ़ायदा पा सकते हैं. इससे समस्याओं का पता लगाने और उन्हें ठीक करने में, उनकी सटीकता बेहतर होती है.
देखें कि यह सुविधा कैसे काम करती है:
मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) क्या है?
मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी), लार्ज लैंग्वेज मॉडल (एलएलएम) को बाहरी टूल और डेटा सोर्स से कनेक्ट करने के लिए, एक ओपन-सोर्स स्टैंडर्ड है. Chrome DevTools का MCP सर्वर, आपके एआई एजेंट में डीबग करने की सुविधाएं जोड़ता है.
उदाहरण के लिए, Chrome DevTools MCP सर्वर, performance_start_trace नाम का टूल उपलब्ध कराता है. जब एलएलएम को आपकी वेबसाइट की परफ़ॉर्मेंस की जांच करने का काम सौंपा जाता है, तो वह इस टूल का इस्तेमाल करके Chrome खोल सकता है. साथ ही, आपकी वेबसाइट खोल सकता है और परफ़ॉर्मेंस ट्रेस रिकॉर्ड करने के लिए Chrome DevTools का इस्तेमाल कर सकता है. इसके बाद, एलएलएम परफ़ॉर्मेंस ट्रेस का विश्लेषण करके, संभावित सुधारों के बारे में सुझाव दे सकता है. एमसीपी प्रोटोकॉल का इस्तेमाल करके, Chrome DevTools MCP सर्वर आपके कोडिंग एजेंट के लिए नई डीबग करने की सुविधाएं ला सकता है. इससे वह वेबसाइटों को बेहतर तरीके से बना पाएगा.
अगर आपको यह जानना है कि एमसीपी कैसे काम करता है, तो एमसीपी के बारे में जानकारी देने वाला दस्तावेज़ पढ़ें.
इसका इस्तेमाल किस काम के लिए किया जा सकता है?
यहाँ कुछ उदाहरण प्रॉम्प्ट दिए गए हैं. इन्हें Gemini CLI जैसे एआई असिस्टेंट में आज़माया जा सकता है.
कोड में किए गए बदलावों की रीयल-टाइम में पुष्टि करना
अपने एआई एजेंट की मदद से गड़बड़ी ठीक करें. इसके बाद, Chrome DevTools MCP की मदद से यह पुष्टि करें कि समाधान सही तरीके से काम कर रहा है या नहीं.
यह प्रॉम्प्ट आज़माएं:
Verify in the browser that your change works as expected.
नेटवर्क और कंसोल की गड़बड़ियों का पता लगाना
अपने एजेंट को नेटवर्क अनुरोधों का विश्लेषण करने की अनुमति दें, ताकि वह CORS से जुड़ी समस्याओं का पता लगा सके. इसके अलावा, उसे कंसोल लॉग की जांच करने की अनुमति दें, ताकि वह यह समझ सके कि कोई सुविधा उम्मीद के मुताबिक काम क्यों नहीं कर रही है.
यह प्रॉम्प्ट आज़माएं:
A few images on localhost:8080 are not loading. What's happening?
उपयोगकर्ता के व्यवहार का सिम्युलेशन करना
रनटाइम एनवायरमेंट की जांच करते समय, गड़बड़ियों को दोहराने और जटिल उपयोगकर्ता फ़्लो की जांच करने के लिए, फ़ॉर्म भरें, बटन पर क्लिक करें, और नेविगेट करें.
यह प्रॉम्प्ट आज़माएं:
Why does submitting the form fail after entering an email address?
लाइव स्टाइलिंग और लेआउट से जुड़ी समस्याओं को डीबग करना
अपने एआई एजेंट से, लाइव पेज से कनेक्ट करने के लिए कहें. साथ ही, उससे डीओएम और सीएसएस की जांच करने के लिए कहें. इसके अलावा, उससे ब्राउज़र के लाइव डेटा के आधार पर, लेआउट से जुड़ी मुश्किल समस्याओं को ठीक करने के लिए सुझाव पाने के लिए कहें. जैसे, एलिमेंट का ओवरफ़्लो होना.
यह प्रॉम्प्ट आज़माएं:
The page on localhost:8080 looks strange and off. Check what's happening there.
परफ़ॉर्मेंस ऑडिट को अपने-आप होने की सुविधा चालू करना
अपने एआई एजेंट को परफ़ॉर्मेंस ट्रेस चलाने, नतीजों का विश्लेषण करने, और परफ़ॉर्मेंस से जुड़ी खास समस्याओं की जांच करने का निर्देश दें. जैसे, एलसीपी के ज़्यादा नंबर.
यह प्रॉम्प्ट आज़माएं:
Localhost:8080 is loading slowly. Make it load faster.
उपलब्ध सभी टूल की सूची के लिए, टूल के बारे में जानकारी देने वाला दस्तावेज़ देखें.
अपनी प्रोफ़ाइल बनाना शुरू करें
इसे आज़माने के लिए, अपने एमसीपी क्लाइंट में यह कॉन्फ़िगरेशन एंट्री जोड़ें:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
यह देखने के लिए कि यह काम करता है या नहीं, अपने कोडिंग एजेंट में यह प्रॉम्प्ट चलाएं:
Please check the LCP of web.dev.
ज़्यादा जानकारी के लिए, GitHub पर Chrome DevTools MCP का दस्तावेज़ देखें.
योगदान देना
हम Chrome DevTools MCP को धीरे-धीरे बना रहे हैं. इसकी शुरुआत, आज रिलीज़ किए जा रहे सार्वजनिक पूर्वावलोकन वर्शन से हो रही है. हम आपसे और कम्यूनिटी से सुझाव/राय/शिकायत पाने के लिए लगातार काम कर रहे हैं, ताकि हमें पता चल सके कि हमें अगली बार कौनसी सुविधाएं जोड़नी चाहिए. चाहे आप एआई कोडिंग असिस्टेंट का इस्तेमाल करने वाले डेवलपर हों या एआई डेवलपमेंट टूल की अगली जनरेशन बनाने वाले वेंडर, आपकी अहम जानकारी हमारे लिए बहुत काम की होगी. अगर आपको कोई समस्या आ रही है या कोई सुविधा काम नहीं कर रही है, तो कृपया GitHub पर समस्या की जानकारी दें.