थर्ड-पार्टी डेवलपर टूल की मदद से, कोडिंग एजेंट DOM, नेटवर्क अनुरोधों, और कंसोल लॉग के अलावा अन्य चीज़ें भी देख सकते हैं. अपनी वेबसाइट या फ़्रेमवर्क से सीधे तौर पर कस्टम टूल उपलब्ध कराकर, अपने एजेंट को ऐसे ऐप्लिकेशन की स्थिति और डेटा के साथ इंटरैक्ट करने की अनुमति दें जिसे आम तौर पर ऐक्सेस नहीं किया जा सकता.
इन टूल को JavaScript की मदद से बनाया जाता है. जब आपका पेज लोड होता है, तब Chrome DevTools इन्हें एजेंट के लिए अपने-आप ढूंढ लेता है.
तीसरे पक्ष के डेवलपर टूल के बारे में जानकारी
कोडिंग एजेंट के संदर्भ में, टूल ऐसे फ़ंक्शन होते हैं जो एजेंट के लिए पहले से तैयार होते हैं. इनकी मदद से, एजेंट कुछ खास कार्रवाइयां कर सकते हैं. खास तौर पर एजेंट के लिए DevTools, इस तरह के टूल, कोडिंग एजेंट को सीधे तौर पर इंटरनल रनटाइम की स्थिति दिखा सकते हैं. इससे रेंडर किए गए आउटपुट और इंटरनल लॉजिक के बीच के अंतर को कम किया जा सकता है.
थर्ड पार्टी टूल का इस्तेमाल करते समय, इन बातों का ध्यान रखें:
- रनटाइम डिस्कवरी. जब आपका ऐप्लिकेशन, ग्लोबल
windowऑब्जेक्ट पर एजेंट के लिए Chrome DevTools से भेजे गएdevtoolstooldiscoveryइवेंट का जवाब देता है, तब टूल अपने-आप पता चल जाते हैं. - कॉन्टेक्स्ट का स्कोप. टूल सिर्फ़ उस पेज के कॉन्टेक्स्ट में काम करते हैं जो उन्हें तय करता है. ये कुकी, अलग-अलग ऑरिजिन और पेज रीलोड होने पर भी बनी नहीं रहती हैं.
- टूल की खास जानकारी. टूल, आपके एजेंट के लिए किसी टास्क को पूरा करने का सिर्फ़ एक अतिरिक्त तरीका है. यह किसी प्रॉम्प्ट को पूरा करने के लिए, बिल्ट-इन टूल या मॉडल की क्षमताओं का इस्तेमाल कर सकता है. इसलिए, टूल के नाम और ब्यौरे में ज़्यादा से ज़्यादा जानकारी दें.
ज़रूरी शर्तें
तीसरे पक्ष के टूल लागू करने से पहले, पक्का करें कि आपने इन ज़रूरी शर्तों को पूरा किया हो:
- एजेंट के लिए Chrome DevTools. 0.25.0 या इसके बाद का वर्शन इस्तेमाल करें.
- JavaScript चालू है. JavaScript चालू हो और काम कर रही हो.
टूल लागू करना
किसी टूल को लागू करने के लिए, आपको किसी खास डिस्कवरी इवेंट को सुनना होगा और अपने टूल की परिभाषाओं के साथ जवाब देना होगा. यहां दिए गए कोड में, टूल की परिभाषाओं वाला जवाब दिखाया गया है:
window.addEventListener(
'devtoolstooldiscovery',
(event: DevtoolsToolDiscoveryEvent) => {
event.respondWith({
name: 'Page-specific DevTools',
description: 'Provide runtime info directly from the JavaScript in the page.',
tools: [
{
name: 'add',
description: 'Calculates the sum of two numbers.',
inputSchema: {
type: 'object',
properties: {
a: {type: 'number'},
b: {type: 'number'},
},
required: ['a', 'b'],
},
execute: async (input: {a: number; b: number}) => {
return input.a + input.b;
},
},
],
});
},
);
अपने ऐप्लिकेशन में टूल रजिस्टर करने के लिए:
अपने टूल ग्रुप को तय करें. एक
ToolGroupबनाएं. इसमें नाम, जानकारी, और टूल की अलग-अलग परिभाषाओं का कलेक्शन शामिल हो.export interface ToolDefinition { name: string; description: string; inputSchema: JSONSchema7; execute: (args: Record<string, unknown>) => unknown; } export interface ToolGroup { name: string; description: string; tools: ToolDefinition[]; }डिस्कवरी इवेंट के लिए सुनें. एजेंट के लिए Chrome DevTools, हर नेविगेशन के बाद और जब भी उसे उपलब्ध टूल की अपडेट की गई सूची की ज़रूरत होती है, तब ग्लोबल
windowऑब्जेक्ट पर कस्टमdevtoolstooldiscoveryइवेंट भेजता है.अपने टूल रजिस्टर करें. एजेंट को अपना टूल ग्रुप देने के लिए, इवेंट के
respondWith()तरीके को कॉल करें.
अलग-अलग टूल के लिए ज़रूरी कॉम्पोनेंट
लागू की गई हर टूल डेफ़िनिशन में, ये तीन हिस्से शामिल होने चाहिए:
- नाम और ब्यौरा. इनसे एजेंट को निर्देश मिलते हैं कि आपके टूल को कब और कैसे कॉल करना है.
- इनपुट स्कीमा. एक JSON स्कीमा, जो टूल के लिए ज़रूरी स्ट्रक्चर और आर्ग्युमेंट के टाइप तय करता है.
- कार्रवाई पूरी करने वाला फ़ंक्शन. असल JavaScript कोड, जो एजेंट के टूल को चालू करने पर पेज पर चलता है.
यहां दिए गए उदाहरण में, टूल की परिभाषा में इन तीनों कॉम्पोनेंट को दिखाया गया है:
{
name: 'add',
description: 'Calculates the sum of two numbers.',
inputSchema: {
type: 'object',
properties: {
a: {type: 'number'},
b: {type: 'number'},
},
required: ['a', 'b'],
},
execute: async (input) => {
return input.a + input.b;
},
}
तीसरे पक्ष के डेवलपर टूल के इस्तेमाल के उदाहरण
अपने एजेंट को निर्देश दें कि वह ऐप्लिकेशन के डीप लॉजिक की जांच करे. सिर्फ़ यूज़र इंटरफ़ेस (यूआई) एलिमेंट की नहीं. स्टेटफ़ुल या फ़्रेमवर्क-हैवी ऐप्लिकेशन की डीबगिंग को आसान बनाने के लिए, इन कस्टम टूल का इस्तेमाल करें.
टूल खोजने के बारे में सलाह
टूल के नाम और ब्यौरे में ज़्यादा जानकारी दें. एजेंट, इन ब्यौरों का इस्तेमाल कॉन्टेक्स्ट के तौर पर करते हैं, ताकि यह तय किया जा सके कि किस टूल का इस्तेमाल करना है. साफ़ तौर पर दी गई जानकारी से एजेंट को यह तय करने में मदद मिलती है कि किसी टास्क के लिए कौनसा टूल सही है.
ऐप्लिकेशन के लिए, रनटाइम मेट्रिक को डीबग करना
साइलेंट कैश मिस या बार-बार एपीआई कॉल करने जैसी समस्याएं, अक्सर स्टैंडर्ड जांच में नहीं दिखती हैं. आंतरिक आंकड़ों को दिखाकर, आपका एजेंट यह बता सकता है कि कोई खास व्यवहार क्यों हुआ.
मान लें कि आपके पास एक ऐसा फ़ंक्शन है जो इंटरनल आंकड़े दिखाता है. इसके लिए, आपको सबसे पहले इस तरह का टूल बनाना होगा:
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: 'My app',
description: 'Tools to debug my app',
tools: [
{
name: 'getCacheStatistics',
description: 'Exposes runtime cache hits and misses for the frontend API service.',
inputSchema: {},
execute: async () => {
// Assuming window.__apiCacheService exists in your app
return window.__apiCacheService.getStats();
}
}
]
});
});
अगर आपके टूल की जानकारी साफ़ तौर पर दी गई है, तो एजेंट ज़रूरत पड़ने पर टूल का इस्तेमाल अपने-आप कर सकता है. अपने एजेंट को कोई टास्क पूरा करने के लिए, इस टूल का इस्तेमाल करके प्रॉम्प्ट दिया जा सकता है. जैसे:
When I reassign a lead to a new sales rep, the dashboard takes a second to
update. Please verify if the frontend is correctly updating the local cache,
or if it is doing a full cache miss and refetching the entire pipeline from the
database.
एजेंट के काम करने का उदाहरण: आपका एजेंट, आपके ऐप्लिकेशन से मिले getCacheStatistics टूल का पता लगाता है. यह टूल को चालू करता है, हिट और मिस के अनुपात का विश्लेषण करता है, और यह पता लगाता है कि फ़्रंटएंड, लोकल कैश मेमोरी को अपडेट करने के बजाय पूरी पाइपलाइन को गैर-ज़रूरी तरीके से फिर से फ़ेच कर रहा है.
फ़ीचर फ़्लैग की जांच की जा रही है
कस्टम डेटा पॉइंट तय करें, ताकि किसी उपयोगकर्ता के सेशन के लिए चालू एनवायरमेंट वैरिएबल या फ़ीचर फ़्लैग दिखाए जा सकें. इससे आपको यह समझने में मदद मिलती है कि कुछ खास उपयोगकर्ताओं को कुछ सुविधाएं क्यों दिख रही हैं या क्यों नहीं दिख रही हैं. अगर कोई उपयोगकर्ता किसी गड़बड़ी की शिकायत करता है, तो एजेंट यह पुष्टि कर सकता है कि वह किसी ऐसे एक्सपेरिमेंट ग्रुप में तो शामिल नहीं है जिसकी वजह से समस्या हो रही है.
उदाहरण के लिए, इंटरनल फ़ीचर फ़्लैग की स्थिति दिखाने के लिए, इस तरह का टूल बनाएं:
// Implementation for a website creator to expose feature flags
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: 'Application Configuration Tools',
description: 'Tools for inspecting runtime environment and feature toggles',
tools: [
{
name: 'getFeatureFlags',
description: 'Returns a list of all active feature flags and their current values for the session.',
inputSchema: {
type: 'object',
properties: {} // No input parameters required for this tool
},
execute: async () => {
// This should return your internal feature flag state
// Example: return window.AppConfig.getFlags();
return {
"new-ui-enabled": true,
"beta-search-v2": false,
"experiment-group": 'control',
"log-level": 'debug'
};
}
}
]
});
});
अगर आपके टूल की जानकारी साफ़ तौर पर दी गई है, तो एजेंट ज़रूरत पड़ने पर टूल का इस्तेमाल अपने-आप कर सकता है. अपने एजेंट को कोई टास्क पूरा करने के लिए, इस टूल का इस्तेमाल करके प्रॉम्प्ट दिया जा सकता है. जैसे:
Check the active feature flags and tell me if the new-ui-enabled flag is set to
true for this session.
एजेंट के काम करने का उदाहरण: आपका एजेंट getFeatureFlags टूल को चालू करता है. इसके बाद, वह पुष्टि करता है कि new-ui-enabled फ़्लैग चालू है. इसके बाद, वह नए इंटरफ़ेस से जुड़े कॉम्पोनेंट को डीबग करता है.
ग्लोबल ऐप्लिकेशन की स्थिति की जांच करना
अपने ऐप्लिकेशन के रनटाइम स्टेट ट्री को दिखाएं, ताकि आपका एजेंट पूरे DOM को फ़ेच किए बिना इंटरनल लॉजिक को समझ सके.
अपने स्टेट ट्री में मौजूद किसी खास पाथ के बारे में क्वेरी करने के लिए, इस तरह का टूल बनाया जा सकता है. जैसे:
// Library-agnostic implementation for inspecting global application state
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: "Global State Inspector",
description: 'Tools to inspect the runtime state tree of the application',
tools: [
{
name: 'getGlobalState',
description: "Returns the current application state. Use the 'path' parameter to drill down into specific sections (for example, 'auth.user' or 'cart.items'). ",
inputSchema: {
type: 'object',
properties: {
path: {
type: 'string',
description: 'Optional dot-notation path to a specific property in the state tree.'
}
}
},
execute: async (input) => {
// Library-agnostic access:
// Website creators can point this to whatever global store they use.
const state = window.__APP_STATE__ ||
(window.store && typeof window.store.getState === 'function' ? window.store.getState() : null);
if (!state) {
return { error: 'Application state is not accessible via window.__APP_STATE__ or window.store.' };
}
if (!input.path) {
return state;
}
// Helper to resolve a dot-notated path against the state object
return input.path.split('.').reduce((acc, part) => {
return acc && acc[part] !== undefined ? acc[part] : undefined;
}, state);
}
}
]
});
});
अगर आपके टूल की जानकारी साफ़ तौर पर दी गई है, तो एजेंट ज़रूरत पड़ने पर टूल का इस्तेमाल अपने-आप कर सकता है. अपने एजेंट को कोई टास्क पूरा करने के लिए, इस टूल का इस्तेमाल करके प्रॉम्प्ट दिया जा सकता है. जैसे:
The number of items in my cart is not updating. Inspect the global state at the
path cart.items and list the current items and their quantities, see if they are
the same.
एजेंट के काम करने का उदाहरण: आपका एजेंट, path पैरामीटर के साथ getGlobalState को कॉल करता है. यह कुकी, कार्ट में मौजूद आइटम की सूची को फिर से पाने का काम करती है. साथ ही, यह अंदरूनी स्थिति और पेज पर रेंडर किए गए आइटम के बीच अंतर का पता लगाती है.
इस टूल के उदाहरण के बारे में कुछ ज़रूरी बातें:
- अलग किया गया लॉजिक: एआई एजेंट "स्टेट" के बारे में पूछता है. डेवलपर के तौर पर, आपको यह तय करना होता है कि
executeफ़ंक्शन में, उस अनुरोध को अपने डेटा स्ट्रक्चर से कैसे मैप करना है. - टारगेट की गई डीबगिंग:
pathपैरामीटर शामिल करके, एजेंट पूरे स्टेट ट्री (जो बहुत बड़ा हो सकता है) को पुल करने से बच सकता है. साथ ही, सिर्फ़ काम के हिस्से पर फ़ोकस कर सकता है. इससे टोकन सेव होते हैं और परफ़ॉर्मेंस बेहतर होती है. - स्टैंडर्ड इंटरफ़ेस: स्टेट मैनेजमेंट लाइब्रेरी बदलने पर भी, आपको सिर्फ़ इस
executeफ़ंक्शन को अपडेट करना होगा. इसके बाद, एआई डिबगिंग एजेंट को किसी नए निर्देश या टूल की ज़रूरत नहीं होगी.
डेटाबेस के कॉन्टेंट की जांच करना
पुष्टि करें कि आपका बैकएंड डेटा, यूज़र इंटरफ़ेस (यूआई) की स्थिति से मेल खाता हो. इसके लिए, डेटाबेस रिकॉर्ड को सीधे तौर पर क्वेरी करें. ऐसा सिर्फ़ पढ़ने के लिए उपलब्ध डीबग एंडपॉइंट के ज़रिए करें.
सुरक्षित डीबग एंडपॉइंट दिखाएं और बैकएंड रिकॉर्ड की पुष्टि करने के लिए, इस तरह का टूल बनाएं:
// Framework-agnostic implementation for inspecting database content
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: 'Database Inspection Tools',
description: 'Tools to query backend database records using existing browser session',
tools: [
{
name: 'queryDatabaseTable',
description: 'Retrieves a limited set of records from a specific table. Useful for verifying that backend data matches the UI state.',
inputSchema: {
type: 'object',
properties: {
tableName: {
type: 'string',
description: 'The name of the database table to inspect.'
},
limit: {
type: 'number',
default: 5,
description: 'Maximum number of rows to return.'
}
},
required: ['tableName']
},
execute: async (input) => {
// This calls a generic debug endpoint you've set up on your server.
// It's framework-agnostic because it just expects a JSON response.
try {
const response = await fetch(`/api/debug/db-inspect?table=${input.tableName}&limit=${input.limit}`);
if (!response.ok) {
return { error: `Backend returned ${response.status}: ${response.statusText}` };
}
return await response.json();
} catch (error) {
return { error: `Failed to connect to debug endpoint: ${error.message}` };
}
}
}
]
});
});
अगर आपके टूल की जानकारी साफ़ तौर पर दी गई है, तो एजेंट ज़रूरत पड़ने पर टूल का इस्तेमाल अपने-आप कर सकता है. अपने एजेंट को कोई टास्क पूरा करने के लिए, इस टूल का इस्तेमाल करके प्रॉम्प्ट दिया जा सकता है. जैसे:
The total price on the checkout page seems wrong. Query the orders table for my
last order to verify the subtotal and tax values and see what may be causing the
problem, if any.
एजेंट के काम करने का उदाहरण: आपका एजेंट, ऑर्डर टेबल के लिए queryDatabaseTable को कॉल करता है. यह JSON रिकॉर्ड को फिर से हासिल करता है. साथ ही, बैकएंड में टैक्स की गणना में हुई गड़बड़ी का पता लगाता है. इसके अलावा, यह सर्वर लॉजिक को ठीक करने का सुझाव देता है.
इस टूल के उदाहरण के बारे में कुछ ज़रूरी बातें:
- सुरक्षा और पुष्टि: आपको एआई एजेंट को डेटाबेस क्रेडेंशियल देने की ज़रूरत नहीं है.
fetchकॉल, ब्राउज़र के मौजूदा लॉगिन सेशन का इस्तेमाल करता है, ताकि आपके बैकएंड पर अनुरोध को अनुमति दी जा सके. - बग ठीक करने के लिए कार्रवाई करना: अगर कोई एआई एजेंट यूज़र इंटरफ़ेस (यूआई) में मौजूद किसी बग का पता लगाता है, तो वह तुरंत
queryDatabaseTableको कॉल कर सकता है. इससे यह पता चलता है कि गड़बड़ी, सोर्स डेटा या फ़्रंटएंड कैलकुलेशन में मौजूद है या नहीं. - कम से कम सेटअप: आपको अपने सर्वर पर सिर्फ़ एक "सुरक्षित" (सिर्फ़ पढ़ने के लिए) डीबग एंडपॉइंट को सार्वजनिक करना होगा. यह एंडपॉइंट, टेबल का नाम स्वीकार करता है और JSON दिखाता है. उस एंडपॉइंट को बनाने के लिए इस्तेमाल किए गए फ़्रेमवर्क से कोई फ़र्क़ नहीं पड़ता.