প্রকাশিত: ১৯ মে, ২০২৬
এআই কোডিং টুলগুলো কোড লেখার ক্ষেত্রে অত্যন্ত শক্তিশালী, কিন্তু প্রায়শই এর নির্বাহ প্রক্রিয়া থেকে এগুলো বিচ্ছিন্ন থাকে। এগুলো একটি জটিল ওয়েব অ্যাপ তৈরি করতে পারলেও, লাইভ ব্রাউজারে সেটির আচরণ পর্যবেক্ষণ করতে বা তার আউটপুট পরীক্ষা করতে পারে না।
এজেন্টদের জন্য ক্রোম ডেভটুলস আপনার কোডিং এজেন্টকে রিয়েল টাইমে কোড যাচাই, ডিবাগ এবং অপ্টিমাইজ করার জন্য প্রয়োজনীয় দৃশ্যমানতা প্রদান করে। কয়েক মাস আগে আমরা এটি প্রথমবার প্রদর্শন করেছিলাম , এবং এখন আমরা আনন্দের সাথে ঘোষণা করছি যে এজেন্টদের জন্য ক্রোম ডেভটুলস এখন একটি স্থিতিশীল ১.০ রিলিজ হিসেবে উপলব্ধ।
আপনার এজেন্টকে ব্রাউজারের সাথে সংযুক্ত করুন
এজেন্টদের জন্য ক্রোম ডেভটুলস আপনার এজেন্টকে একজন প্রকৃত ব্যবহারকারীর মতোই আপনার সাইটটি ব্যবহারের সুযোগ দেয়। এই স্থিতিশীল সংস্করণে আপনার এবং আপনার এজেন্টের জন্য ক্রোমের সাথে সংযোগ স্থাপনের বিভিন্ন উপায় অন্তর্ভুক্ত রয়েছে:
- মডেল কনটেক্সট প্রোটোকল (MCP) সার্ভার : একটি সার্ভার যা লার্জ ল্যাঙ্গুয়েজ মডেল (LLM)-কে ডেভটুলস-এর ডিবাগিং ক্ষমতার সাথে সংযুক্ত করে।
- কমান্ড-লাইন ইন্টারফেস (CLI) : একটি টোকেন-সাশ্রয়ী বিকল্প যা এজেন্টদেরকে স্ক্রিপ্টে একাধিক কাজ একত্রিত করার সুযোগ দেয়।
- এজেন্ট স্কিলস : বিশেষজ্ঞ নির্দেশাবলী যা আপনার এজেন্টকে শেখায় কীভাবে এবং কখন অ্যাক্সেসিবিলিটি বা পারফরম্যান্স ডিবাগিং-এর মতো কাজের জন্য নির্দিষ্ট টুল ব্যবহার করতে হয়।
স্বয়ংক্রিয়ভাবে ডিবাগ, অনুকরণ এবং নিরীক্ষা করুন।
1.0 রিলিজের ফলে, আপনার কোডিং এজেন্ট এখন সেইসব উন্নত ডিবাগিং কাজ সম্পাদন করতে পারবে যা আগে ম্যানুয়ালি করতে হতো।
গুণমান নিরীক্ষা স্বয়ংক্রিয় করুন
আপনার এজেন্ট এখন ওয়েবসাইটের মান মূল্যায়ন করতে লাইটহাউস অডিট চালাতে পারে। এটি অ্যাক্সেসিবিলিটি, এসইও, সেরা অনুশীলন এবং এজেন্টিক ব্রাউজিং সম্পর্কিত সমস্যাগুলো শনাক্ত করতে পারে। এটি অনেকটা এমন একটি লিন্টারের মতো যা রানটাইম বোঝে। কোয়ালিটি গেট হিসেবে ব্যবহৃত হলে, এটি আপনার কোডিং এজেন্টকে একজন বিশেষজ্ঞে পরিণত করে, যা প্রোডাকশনে পৌঁছানোর আগেই গুরুতর বাধাগুলো ধরে ফেলে।
বাস্তব জগতের ব্যবহারকারীর অভিজ্ঞতা অনুকরণ করুন
আপনার এজেন্ট ইমুলেশন টুল ব্যবহার করে ডেভটুলস ফর এজেন্টস-এর মাধ্যমে পরীক্ষা করতে পারে যে, একটি সাইট বিভিন্ন ডিভাইসে বা ভিন্ন ভিন্ন স্থানে কেমন দেখায় এবং কেমন পারফর্ম করে। এটি বাস্তব পরিস্থিতি অনুকরণ করার জন্য উইন্ডোর আকার পরিবর্তন করতে, ভৌগোলিক অবস্থান অনুকরণ করতে এবং নেটওয়ার্ক ও সিপিইউ-এর গতি নিয়ন্ত্রণ করতে পারে। এইভাবে, আপনাকে ম্যানুয়ালি ব্রাউজারের আকার পরিবর্তন না করেই আপনার এজেন্ট বার্গার মেনুর মতো মোবাইল-নির্দিষ্ট আচরণগুলো পরীক্ষা করতে পারে।
ক্রোম এক্সটেনশন তৈরি এবং ডিবাগ করুন
আপনি আপনার এজেন্টকে দিয়ে শুধু ক্রোম এক্সটেনশন তৈরিই নয়, সেগুলোর ডিবাগিংও করাতে পারেন। আপনার এজেন্ট সরাসরি এক্সটেনশন ইনস্টল, রিলোড এবং এর অ্যাকশনগুলো ট্রিগার করতে পারে। এটি ডেভেলপমেন্টের সময় ঘন ঘন 'সেভ-এবং-রিফ্রেশ' করার চক্রকে স্বয়ংক্রিয় করতে সাহায্য করে। এটি আরও জটিল ব্রাউজার সেটআপের বাগগুলো ঠিক করতে আপনাকে সাহায্য করার জন্য ব্যাকগ্রাউন্ড স্ক্রিপ্ট এবং এক্সটেনশন পেজগুলোতেও প্রবেশ করতে পারে।
WebMCP টুলগুলি ডিবাগ এবং পরীক্ষা করুন
এই নতুন এপিআইটি বাস্তবায়নে আপনাকে সাহায্য করার জন্য আমরা WebMCP (Web Model Context Protocol) Origin Trial-এর বিস্তারিত তথ্যও নিয়ে আসছি।
DOM নেভিগেট করার পরিকল্পনা অনুমান করার জন্য আপনার এজেন্টকে সিগন্যালের উপর নির্ভর করানোর পরিবর্তে, এটি সরাসরি সেইসব স্ট্রাকচার্ড টুলের সাথে ইন্টারঅ্যাক্ট করতে পারে যা আপনি WebMCP ব্যবহার করে উন্মুক্ত করেন। এটি এই টুলগুলোকে ডেভেলপ, টেস্ট এবং ডিবাগ করা সহজ করে তোলে: আপনার এজেন্ট রিয়েল টাইমে সেগুলোর তালিকা করতে, প্রোগ্রাম্যাটিকভাবে আহ্বান করতে এবং সঠিকতা যাচাই করতে পারে। এটি আপনার সাইটে WebMCP সাপোর্ট যোগ করা এবং তা পরীক্ষা করার প্রক্রিয়াকে সুবিন্যস্ত করে।
মেমরি লিক সনাক্ত এবং ডিবাগ করুন
আমরা মেমরি বিশ্লেষণের জন্য বিশেষ টুলও যুক্ত করেছি। আপনার এজেন্ট এখন হিপ স্ন্যাপশট নিতে পারে, যা ডিটাচড ডম নোডের মতো মেমরি লিক শনাক্ত করতে সাহায্য করে। বিশেষায়িত মেমরি লিক ডিবাগিং দক্ষতা ব্যবহার করে, এজেন্ট একজন পারফরম্যান্স বিশেষজ্ঞ হিসেবে কাজ করে আপনার অ্যাপ্লিকেশনকে হালকা ও দ্রুত রাখতে সহায়তা করে।
স্বয়ংক্রিয় সংযোগের মাধ্যমে সেশন হস্তান্তর করুন
এজেন্টের নিজস্ব স্যান্ডবক্সড ব্রাউজার ইনস্ট্যান্স খোলার পরিবর্তে (যেভাবে ডেভটুলস ফর এজেন্টস সাধারণত এজেন্টদের ব্রাউজারে অ্যাক্সেস দেয়), আপনি আপনার বর্তমান ব্রাউজার কনটেক্সট এজেন্টের সাথে শেয়ার করতে পারেন। এটি লগইন-প্রয়োজনীয় জিনিস, যেমন একটি অথেনটিকেটেড ড্যাশবোর্ড, ডিবাগ করার জন্য আদর্শ, যেখানে আপনি চান যে আপনাকে সবকিছু পুনরায় অথেন্টিকেট না করেই এআই এজেন্ট প্রযুক্তিগত তদন্তের দায়িত্ব নিক।
তৃতীয় পক্ষের ডেভেলপার টুল ব্যবহার করে অভ্যন্তরীণ অবস্থা প্রকাশ করুন
থার্ড-পার্টি ডেভেলপার টুল আপনার ওয়েব অ্যাপ্লিকেশনকে তার অভ্যন্তরীণ অবস্থা এবং কম্পোনেন্টের বিবরণ সরাসরি এআই এজেন্টের সাথে শেয়ার করার সুযোগ দেয়। যে ডেটা সাধারণত সাধারণ বিশ্লেষণ থেকে গোপন রাখা হয়, সেগুলিতে অ্যাক্সেস দেওয়ার মাধ্যমে এই টুলগুলো এজেন্টদের জটিল লজিক বোঝার জন্য প্রয়োজনীয় প্রেক্ষাপট প্রদান করে। এর ফলে, ব্রাউজারে অ্যাপ্লিকেশনটি আসলে কীভাবে আচরণ করছে তার উপর ভিত্তি করে আরও নির্ভুল ডিবাগিং পরামর্শ পাওয়া যায়।
শুরু করুন
আপনি npm ব্যবহার করে স্টেবল রিলিজটি ইনস্টল করতে পারেন অথবা আপনার পছন্দের এজেন্টে সরাসরি কনফিগার করতে পারেন:
অ্যান্টিগ্র্যাভিটি
এজেন্টদের জন্য ক্রোম ডেভটুলস অ্যান্টিগ্র্যাভিটি ২.০-এর সাথে আগে থেকেই বান্ডেল করা থাকে। আপনি ব্রাউজার সাব-এজেন্ট ব্যবহার করে এটি অবিলম্বে ব্যবহার শুরু করতে পারেন। নিম্নলিখিতের মতো একটি স্ল্যাশ কমান্ড ব্যবহার করে দেখুন:
/browser Navigate to the Google homepage
বিশেষায়িত এজেন্ট স্কিলগুলো অ্যাক্সেস করার জন্য, আমরা প্রাথমিক সেটআপের 'Build with Google' ধাপে অথবা অ্যাপ্লিকেশন সেটিংসের মধ্যে DevTools প্লাগইনটি ইনস্টল করার পরামর্শ দিই। আরও তথ্যের জন্য, Antigravity Browser Subagent ডকুমেন্টেশন দেখুন।
জেমিনি সিএলআই
এক্সটেনশন হিসেবে MCP প্যাকেজ এবং স্কিলগুলো ইনস্টল করতে, নিম্নলিখিত কমান্ডটি ব্যবহার করুন:
$ gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
ক্লদ কোড
Claude Code প্লাগইন হিসেবে এজেন্টদের জন্য Chrome DevTools ইনস্টল করতে, Claude Code-এ নিম্নলিখিত স্ল্যাশ কমান্ডগুলি ব্যবহার করুন। মার্কেটপ্লেস রেজিস্ট্রি যোগ করুন:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
এবং মার্কেটপ্লেস রেজিস্ট্রি থেকে প্লাগইনটি ইনস্টল করুন:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
আরও বিস্তারিত নির্দেশিকা এবং উদাহরণ প্রম্পটের জন্য, আমাদের Chrome DevTools for agents ডকুমেন্টেশন দেখুন। এছাড়াও আপনি GitHub-এ সোর্স কোডটি দেখতে পারেন।