প্রকাশিত: ১৮ জুন, ২০২৬
একটি আধুনিক ওয়েব অ্যাপ্লিকেশন কার্যকরভাবে ডিবাগ করার জন্য, একটি এআই এজেন্টের শুধু আপনার সোর্স কোডই যথেষ্ট নয়; রানটাইমে অ্যাপ্লিকেশনটি কীভাবে আচরণ করে, তা-ও তাকে বুঝতে হবে।
আমরা এজেন্টদের জন্য ক্রোম ডেভটুলস -এর থার্ড-পার্টি ডেভেলপার টুলস চালু করতে পেরে আনন্দিত। এখন, আপনার অ্যাপ এবং ফ্রেমওয়ার্কগুলো এআই এজেন্টদেরকে তাদের অভ্যন্তরীণ অবস্থা সরাসরি দেখার সুযোগ দিতে পারবে। এটি এজেন্টদেরকে স্ক্রিনে যা ঘটছে এবং নেপথ্যে চলমান লজিকের মধ্যে সংযোগ স্থাপন করতে সাহায্য করে।
লক্ষ্য: স্থির বিশ্লেষণের ঊর্ধ্বে
আধুনিক ওয়েব ডেভেলপমেন্ট কিছু অ্যাবস্ট্রাকশনের উপর ভিত্তি করে গড়ে উঠেছে—যেমন অ্যাঙ্গুলার, রিয়্যাক্ট বা ভিউ-এর মতো ফ্রেমওয়ার্ক; ওয়ার্ডপ্রেস বা শপিফাই-এর মতো সিএমএস প্ল্যাটফর্ম; এবং সিএসএস, থ্রিডি গ্রাফিক্স বা অ্যানিমেশনের জন্য লাইব্রেরি। যদিও ডেভটুলস চূড়ান্ত রেন্ডার করা ডম-এ সরাসরি অ্যাক্সেস পায়, একটি অ্যাপ্লিকেশনের আসল রূপ প্রায়শই ফ্রেমওয়ার্কের অভ্যন্তরীণ স্টেটের মধ্যে থাকে: যেমন কম্পোনেন্ট হায়ারার্কি, জাভাস্ক্রিপ্ট সিগন্যাল বা ব্যাকএন্ড স্টেট।
থার্ড-পার্টি ডেভেলপার টুলস নিয়ে আমাদের লক্ষ্য হলো, যেকোনো লাইব্রেরিকে এই সমৃদ্ধ ও কার্যকর কনটেক্সট এআই এজেন্টদের সাথে শেয়ার করার একটি পথ তৈরি করে দেওয়া। এর মাধ্যমে, এজেন্টরা এমন সব সমস্যা ডিবাগ করতে পারে যা আগে তাদের কাছে "অদৃশ্য" ছিল, যেমন:
- কম্পোনেন্ট হায়ারার্কি: পেজের একটি DOM এলিমেন্টকে সরাসরি তার সংশ্লিষ্ট ফ্রেমওয়ার্ক কম্পোনেন্ট এবং অভ্যন্তরীণ স্টেটের সাথে ম্যাপ করুন।
- অভ্যন্তরীণ অবস্থা পরিদর্শন: ডিবাগিং সেশনের মধ্যেই সরাসরি সার্ভার-সাইডের অবস্থা বা ডেটাবেসের বিষয়বস্তু অ্যাক্সেস করুন।
এটি যেভাবে কাজ করে: ডিসকভারি এপিআই
তৃতীয় পক্ষের ডেভেলপার টুলগুলো একটি ইভেন্ট-ভিত্তিক জাভাস্ক্রিপ্ট এপিআই ব্যবহার করে। ক্রোম ডেভটুলস এমসিপি সার্ভার গ্লোবাল window অবজেক্টে একটি devtoolstooldiscovery ইভেন্ট ডিসপ্যাচ করার মাধ্যমে এই টুলগুলোকে খুঁজে বের করে। প্রতিটি পেজ নেভিগেশনে অথবা নির্বাচিত পেজ পরিবর্তন করা হলে devtoolstooldiscovery ইভেন্টটি স্বয়ংক্রিয়ভাবে ডিসপ্যাচ হয় এবং list_3p_developer_tools এমসিপি টুলটি ব্যবহার করে এটিকে স্পষ্টভাবেও ডিসপ্যাচ করা যায়।
আপনার নিজস্ব সরঞ্জাম প্রয়োগ করুন
আপনার লাইব্রেরি বা অ্যাপ্লিকেশন থেকে টুলগুলো প্রকাশ করার জন্য, আপনাকে এই ডিসকভারি ইভেন্টটির জন্য লিসেন করতে হবে এবং একটি 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ফাংশন প্রয়োগ করুন যা পেজের কনটেক্সটে চলে এবং সিরিয়ালাইজেবল ডেটা রিটার্ন করে। - DOM এলিমেন্ট: পেজ এবং DevTools for agents-এর মধ্যে নন-সিরিয়ালাইজেবল অবজেক্ট পাঠানো যায় না। DOM এলিমেন্ট এর ব্যতিক্রম। যখন আপনার টুলগুলো DOM এলিমেন্ট রিটার্ন করে, তখন DevTools for agents স্বয়ংক্রিয়ভাবে সেগুলোকে
take_snapshotটুল দ্বারা ব্যবহৃত একই UID-এর সাথে ম্যাপ করে। এর ফলে আপনার এজেন্ট পেজের সমস্ত এলিমেন্টের (সেগুলো ফ্রেমওয়ার্ক থেকে আসুক বা পেজ স্ন্যাপশট থেকে) সাথে একইভাবে ইন্টারঅ্যাক্ট করতে পারে।
MCP ব্যবহার করে টুলগুলির সাথে ইন্টারঅ্যাক্ট করুন
একবার আপনার টুলগুলো রেজিস্টার করা হয়ে গেলে, আপনার কোডিং এজেন্ট ‘ডেভটুলস ফর এজেন্টস’-এর মাধ্যমে সেগুলোর সাথে ইন্টারঅ্যাক্ট করতে পারবে। list_3p_developer_tools ’ নামক এমসিপি টুলটি পেজটিতে উপলব্ধ থার্ড-পার্টি টুলগুলোর বিবরণ ফেরত দেয়। এছাড়াও, যখন নির্বাচিত পেজটি পরিবর্তিত হয় (উদাহরণস্বরূপ, নেভিগেশনের পরে), ডেভটুলস এমসিপি টুল রেসপন্সের সাথে উপলব্ধ টুলগুলোর একটি তালিকা যুক্ত করে দেয়।
এই টুলগুলো ব্যবহার করার জন্য, আপনার এজেন্ট execute_3p_developer_tool কল করে। ইনপুট প্যারামিটারগুলো টুলের সংজ্ঞার সাথে মেলে কিনা, তা নিশ্চিত করতে DevTools স্বয়ংক্রিয়ভাবে সেগুলো যাচাই করে।
আপনি evaluate_script MCP টুলটি ব্যবহার করেও টুলগুলো চালু করতে পারেন। আপনার এজেন্ট একটি জাভাস্ক্রিপ্ট স্নিপেট সরবরাহ করে যা DevTools পেজটিতে এক্সিকিউট করে। এই স্নিপেটটি থার্ড-পার্টি ডেভেলপার টুলগুলোকে কল করতে পারে এবং পরবর্তী গণনার জন্য তাৎক্ষণিকভাবে তাদের আউটপুট ব্যবহার করতে পারে।
জটিল ডিবাগিংয়ের ক্ষেত্রে evaluate_script ব্যবহার করা কার্যকর, কারণ এটি এজেন্টদেরকে নিম্নলিখিত কাজগুলো করতে দেয়:
- কম্পোজ অপারেশন : একাধিক ধাপকে একটিমাত্র সম্পাদনে একত্রিত করুন।
- অ-সিরিয়ালাইজেবল মান পরিচালনা করুন : ফ্রেমওয়ার্ক-নির্দিষ্ট অবজেক্ট বা সিগন্যাল সরাসরি পেজ কনটেক্সটে প্রসেস করুন।
- পারফরম্যান্স অপ্টিমাইজ করুন : সিরিয়ালাইজেশন ওভারহেড হ্রাস করুন এবং এজেন্ট ও ব্রাউজারের মধ্যে একাধিক রাউন্ড ট্রিপ এড়িয়ে চলুন।
প্রাথমিক সাফল্য: অ্যাঙ্গুলার ইন্টিগ্রেশন
আমরা অ্যাঙ্গুলার টিমের সাথে কাজ করে আসছি, যারা দুটি থার্ড-পার্টি ডেভেলপার টুল তৈরি করেছে:
- সিগন্যাল গ্রাফ টুল: এটি এজেন্টদের স্টেট এবং ভিউ-এর মধ্যকার সম্পর্ক কল্পনা করার ক্ষমতা দেয়, যা তাদের অসীম লুপ বা ব্যর্থ আপডেটের কারণ হওয়া নির্ভরতাগুলো শনাক্ত করতে সাহায্য করে।
- ডিপেন্ডেন্সি ইনজেকশন (DI) গ্রাফ টুল: এটি ইনজেক্টর এলিমেন্টগুলোকে প্রকাশ করে, যার মাধ্যমে এজেন্টরা স্পষ্টভাবে দেখতে পায় যে কোনো সার্ভিস কোথায় সরবরাহ করা হয়েছে বা কোথায় তা অনুপস্থিত। যেহেতু অ্যাঙ্গুলারের DI গ্রাফ শুধুমাত্র রানটাইমে তৈরি হয়, তাই কেবল স্ট্যাটিক অ্যানালাইসিস দিয়ে প্রোভাইডার এরর ডিবাগ করা যায় না।
রিঅ্যাক্ট টিম থার্ড-পার্টি ডেভেলপার টুল নিয়েও পরীক্ষা-নিরীক্ষা শুরু করেছে।
আমাদের সাথে এজেন্টিক ডিবাগিংয়ের ভবিষ্যৎ গড়ে তুলুন।
এই পরীক্ষামূলক ফিচারটি ক্রোম ডেভটুলস-এর ০.২৫.০ সংস্করণ থেকে শুরু হওয়া এজেন্টদের জন্য উপলব্ধ। এটি সক্রিয় করতে, --categoryExperimentalThirdParty কমান্ড-লাইন ফ্ল্যাগটি ব্যবহার করুন।
আপনি যদি কোনো ফ্রেমওয়ার্ক, লাইব্রেরি বা টুল রক্ষণাবেক্ষণ করেন এবং কোডিং এজেন্টদের জন্য ডিবাগিং অভিজ্ঞতা উন্নত করতে চান, তাহলে আমরা আপনার সাথে কাজ করতে আগ্রহী।
- ডকুমেন্টেশন দেখুন: গিটহাবে টেকনিক্যাল গাইড ।
- যোগাযোগ করুন: আমরা এই API-গুলোকে উন্নত করতে এবং AI-চালিত ওয়েব ডিবাগিংয়ের ভবিষ্যৎ নির্ধারণে সাহায্য করার জন্য অংশীদার খুঁজছি। যোগাযোগ করার জন্য আপনি GitHub রিপোজিটরিতে একটি ইস্যু তৈরি করতে পারেন।
আসুন, একসাথে এজেন্টিক ওয়েব ডেভেলপমেন্টের ভবিষ্যৎ গড়ি!