पब्लिश होने की तारीख: 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 पर समस्या की शिकायत करें.