पब्लिश होने की तारीख: 18 जून, 2026
किसी मॉडर्न वेब ऐप्लिकेशन को असरदार तरीके से डीबग करने के लिए, एआई एजेंट को सिर्फ़ आपके सोर्स कोड से ज़्यादा जानकारी की ज़रूरत होती है. उसे यह समझने की ज़रूरत होती है कि ऐप्लिकेशन रनटाइम में कैसा काम करता है.
हमें Chrome DevTools for agents के लिए, तीसरे पक्ष के डेवलपर टूल लॉन्च करते हुए खुशी हो रही है. अब आपके ऐप्लिकेशन और फ़्रेमवर्क, एआई एजेंट को अपनी इंटरनल स्थिति के बारे में सीधे तौर पर जानकारी दे सकते हैं. इससे एजेंट को यह समझने में मदद मिलती है कि स्क्रीन पर क्या हो रहा है और बैकग्राउंड में कौनसी प्रोसेस चल रही है.
लक्ष्य: स्टैटिक विश्लेषण से आगे बढ़ना
मॉडर्न वेब डेवलपमेंट, ऐब्स्ट्रैक्शन पर आधारित है. जैसे, Angular, React या Vue जैसे फ़्रेमवर्क; WordPress या Shopify जैसे सीएमएस प्लैटफ़ॉर्म; और सीएसएस, 3D ग्राफ़िक्स या ऐनिमेशन के लिए लाइब्रेरी. DevTools के पास रेंडर किए गए फ़ाइनल DOM का ऐक्सेस होता है. हालांकि, किसी ऐप्लिकेशन की "सच्चाई" अक्सर फ़्रेमवर्क की इंटरनल स्थिति में मौजूद होती है: कॉम्पोनेंट हैरारकी, JavaScript सिग्नल या बैकएंड की स्थिति.
तीसरे पक्ष के डेवलपर टूल का इस्तेमाल करने का हमारा मकसद, किसी भी लाइब्रेरी को एआई एजेंट के साथ काम के कॉन्टेक्स्ट को शेयर करने का तरीका उपलब्ध कराना है. ऐसा करने से, एजेंट उन समस्याओं को ठीक कर सकते हैं जो पहले उन्हें "दिखाई नहीं देती थीं". उदाहरण के लिए:
- कॉम्पोनेंट के क्रम: पेज पर मौजूद किसी डीओएम एलिमेंट को सीधे तौर पर उसके फ़्रेमवर्क कॉम्पोनेंट और इंटरनल स्टेट से मैप करें.
- इंटरनल स्टेट की जांच: सर्वर-साइड स्टेट या डेटाबेस के कॉन्टेंट को सीधे तौर पर डीबग करने वाले सेशन में ऐक्सेस करें.
यह कैसे काम करता है: Discovery API
तीसरे पक्ष के डेवलपर टूल, इवेंट पर आधारित JavaScript API का इस्तेमाल करते हैं. Chrome DevTools MCP सर्वर, इन टूल का पता लगाता है. इसके लिए, वह ग्लोबल window ऑब्जेक्ट पर devtoolstooldiscovery इवेंट भेजता है. devtoolstooldiscovery इवेंट, हर पेज नेविगेशन पर अपने-आप भेजा जाता है. इसके अलावा, अगर चुना गया पेज बदल जाता है, तब भी यह इवेंट अपने-आप भेजा जाता है. इसे list_3p_developer_tools MCP टूल का इस्तेमाल करके, साफ़ तौर पर भेजा जा सकता है.
अपने टूल लागू करना
अपनी लाइब्रेरी या ऐप्लिकेशन से टूल दिखाने के लिए, आपको इस डिस्कवरी इवेंट पर गौर करना होगा और ToolGroup के साथ जवाब देना होगा.
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: "My Library Tools",
description: "Tools for inspecting internal library state",
tools: [
{
name: "getInternalState",
description: "Returns the current internal state of the framework.",
inputSchema: {
type: "object",
properties: {
componentId: { type: "string" }
}
},
execute: async (input) => {
// Access your framework's internal registry
return myFramework.getState(input.componentId);
}
}
]
});
});
इसे इस तरह लागू किया जाता है:
- स्कीमा तय करें: JSON स्कीमा का इस्तेमाल करके, यह तय करें कि आपके टूल को किस तरह का इनपुट चाहिए.
- लॉजिक को मैनेज करना: ऐसा
executeफ़ंक्शन लागू करें जो पेज के कॉन्टेक्स्ट में काम करता हो और सीरियलाइज़ किया जा सकने वाला डेटा दिखाता हो. - डीओएम एलिमेंट: नॉन-सीरियलाइज़ेबल ऑब्जेक्ट को पेज और DevTools के बीच नहीं भेजा जा सकता. डीओएम एलिमेंट इसके अपवाद हैं. जब आपके टूल, DOM एलिमेंट दिखाते हैं, तो एजेंट के लिए DevTools उन्हें
take_snapshotटूल के इस्तेमाल किए गए यूआईडी पर अपने-आप मैप कर देता है. इससे आपका एजेंट, पेज के सभी एलिमेंट के साथ एक ही तरीके से इंटरैक्ट कर पाता है. भले ही, वे किसी फ़्रेमवर्क से आए हों या पेज के स्नैपशॉट से.
एमसीपी का इस्तेमाल करके टूल से इंटरैक्ट करना
अपने टूल रजिस्टर करने के बाद, आपका कोडिंग एजेंट DevTools for agents के ज़रिए उनसे इंटरैक्ट कर सकता है. list_3p_developer_tools एमसीपी टूल, पेज पर उपलब्ध तीसरे पक्ष के टूल के बारे में जानकारी देता है. इसके अलावा, जब चुना गया पेज बदलता है (उदाहरण के लिए, नेविगेशन के बाद), तो DevTools, एमसीपी टूल के जवाब में उपलब्ध टूल की सूची जोड़ता है.
इन टूल का इस्तेमाल करने के लिए, आपका एजेंट execute_3p_developer_tool को कॉल करता है. DevTools, इनपुट पैरामीटर की अपने-आप पुष्टि करता है, ताकि यह पक्का किया जा सके कि वे टूल की परिभाषा से मेल खाते हों.
evaluate_script एमसीपी टूल का इस्तेमाल करके भी टूल चालू किए जा सकते हैं. आपका एजेंट, JavaScript का एक स्निपेट देता है. DevTools, इसे पेज पर एक्ज़ीक्यूट करता है. यह स्निपेट, तीसरे पक्ष के डेवलपर टूल को कॉल कर सकता है. साथ ही, आगे की कैलकुलेशन के लिए, उनके आउटपुट का तुरंत इस्तेमाल कर सकता है.
evaluate_script का इस्तेमाल, जटिल डीबग करने के लिए असरदार होता है. इसकी मदद से एजेंट ये काम कर सकते हैं:
- कंपोज़ ऑपरेशंस: कई चरणों को एक ही बार में पूरा करें.
- सीरियलाइज़ नहीं की जा सकने वाली वैल्यू मैनेज करना: फ़्रेमवर्क के हिसाब से ऑब्जेक्ट या सिग्नल को सीधे पेज के कॉन्टेक्स्ट में प्रोसेस करें.
- परफ़ॉर्मेंस ऑप्टिमाइज़ करें: सीरियल बनाने में लगने वाले समय को कम करें. साथ ही, एजेंट और ब्राउज़र के बीच कई राउंड ट्रिप से बचें.
शुरुआती सफलता: Angular इंटिग्रेशन
हम Angular टीम के साथ मिलकर काम कर रहे हैं. इस टीम ने तीसरे पक्ष के दो डेवलपर टूल लागू किए हैं:
- सिग्नल ग्राफ़ टूल: इससे एजेंट, स्थिति और व्यू के बीच के संबंधों को विज़ुअलाइज़ कर पाते हैं. इससे उन्हें उन डिपेंडेंसी की पहचान करने में मदद मिलती है जिनकी वजह से इनफ़िनिट लूप या अपडेट नहीं हो पाते.
- डिपेंडेंसी इंजेक्शन (डीआई) ग्राफ़ टूल: यह एलिमेंट इंजेक्टर दिखाता है. इससे एजेंट को यह पता चलता है कि कोई सेवा कहां उपलब्ध है या कहां उपलब्ध नहीं है. Angular का DI ग्राफ़, सिर्फ़ रनटाइम में काम करता है. इसलिए, सिर्फ़ स्टैटिक विश्लेषण से प्रोवाइडर से जुड़ी गड़बड़ियों को डीबग नहीं किया जा सकता.
React टीम ने भी तीसरे पक्ष के डेवलपर टूल के साथ एक्सपेरिमेंट करना शुरू कर दिया है.
हमारे साथ मिलकर, एजेंट की मदद से डीबग करने की सुविधा को बेहतर बनाएं
एक्सपेरिमेंट के तौर पर उपलब्ध यह सुविधा, Chrome DevTools में एजेंट के लिए उपलब्ध है. इसके लिए, एजेंट का वर्शन 0.25.0 या इसके बाद का होना चाहिए. इसे चालू करने के लिए, --categoryExperimentalThirdParty कमांड-लाइन फ़्लैग का इस्तेमाल करें.
अगर आपके पास कोई फ़्रेमवर्क, लाइब्रेरी या टूल है और आपको कोडिंग एजेंट के लिए डीबग करने की सुविधा को बेहतर बनाना है, तो हम आपके साथ मिलकर काम करना चाहेंगे:
- दस्तावेज़ देखें: GitHub के बारे में तकनीकी गाइड.
- हमसे संपर्क करें: हम इन एपीआई को बेहतर बनाने के लिए पार्टनर की तलाश कर रहे हैं. साथ ही, हम एआई की मदद से वेब डिबग करने की सुविधा को बेहतर बनाने के लिए भी पार्टनर की तलाश कर रहे हैं. समस्या की शिकायत करने के लिए, GitHub रिपॉज़िटरी में कोई समस्या दर्ज करें.
हमारे साथ मिलकर, एजेंटिक वेब डेवलपमेंट के भविष्य को बेहतर बनाएं!