थर्ड-पार्टी डेवलपर टूल की मदद से, कोडिंग एजेंट DOM, नेटवर्क अनुरोधों, और कंसोल लॉग के अलावा अन्य चीज़ें भी देख सकते हैं. अपनी वेबसाइट या फ़्रेमवर्क से सीधे तौर पर पसंद के मुताबिक बनाए गए टूल उपलब्ध कराकर, अपने एजेंट को ऐप्लिकेशन की ऐसी स्थिति और डेटा के साथ इंटरैक्ट करने की अनुमति दें जिसे आम तौर पर ऐक्सेस नहीं किया जा सकता.
ये टूल JavaScript की मदद से बनाए जाते हैं. जब आपका पेज लोड होता है, तब Chrome DevTools for agents इन्हें अपने-आप ढूंढ लेता है.
थर्ड-पार्टी डेवलपर टूल के बारे में जानकारी
कोडिंग एजेंट के मामले में, टूल ऐसे तैयार फ़ंक्शन होते हैं जिनकी मदद से एजेंट, खास कार्रवाइयां कर सकते हैं. खास तौर पर, DevTools for agents के लिए, ऐसे टूल सीधे तौर पर कोडिंग एजेंट को इसका इंटरनल रनटाइम स्टेट दिखा सकते हैं. इससे रेंडर किए गए आउटपुट और इंटरनल लॉजिक के बीच का अंतर कम हो जाता है.
थर्ड-पार्टी टूल का इस्तेमाल करते समय, इन बातों का ध्यान रखें:
- रनटाइम डिस्कवरी. जब आपका ऐप्लिकेशन, ग्लोबल
windowऑब्जेक्ट पर Chrome DevTools for agents से जनरेट हुएdevtoolstooldiscoveryइवेंट का जवाब देता है, तब टूल अपने-आप डिटेक्ट हो जाते हैं. - कॉन्टेक्स्ट स्कोप. टूल सिर्फ़ उस पेज के कॉन्टेक्स्ट में काम करते हैं जो उन्हें तय करता है. ये टूल, ऑरिजिन और पेज रीलोड होने पर भी बने नहीं रहते.
- टूल की खास जानकारी. टूल, आपके एजेंट के लिए किसी टास्क को पूरा करने का सिर्फ़ एक अतिरिक्त तरीका है. हो सकता है कि कोई प्रॉम्प्ट पूरा करने के लिए, वह पहले से मौजूद टूल या मॉडल की सामान्य क्षमताओं का इस्तेमाल करे. इसलिए, टूल के नाम और जानकारी को ज़्यादा से ज़्यादा जानकारी देने वाला बनाएं.
ज़रूरी शर्तें
थर्ड-पार्टी टूल लागू करने से पहले, पक्का करें कि आपने ये ज़रूरी शर्तें पूरी की हों:
- Chrome DevTools for agents. वर्शन 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 for agents, हर नेविगेशन के बाद और जब भी उसे उपलब्ध टूल की अपडेट की गई सूची की ज़रूरत होती है, तब ग्लोबल
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.
एजेंट के एक्ज़ीक्यूशन का उदाहरण: आपका एजेंट, getGlobalState को path
पैरामीटर के साथ कॉल करता है. वह कार्ट से आइटम की सूची वापस लाता है और इंटरनल स्टेट और पेज पर रेंडर किए गए आइटम के बीच अंतर की पहचान करता है.
इस टूल के उदाहरण के बारे में कुछ ज़रूरी बातें:
- डीकपल्ड लॉजिक: एआई एजेंट, "स्टेट" के बारे में पूछता है. डेवलपर के तौर पर, यह तय करना आपका काम है कि
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 दिखाता है. उस एंडपॉइंट को बनाने के लिए, आपने जिस फ़्रेमवर्क का इस्तेमाल किया है उससे कोई फ़र्क़ नहीं पड़ता.