এজেন্টের জন্য Chrome DevTools-এ একটি কমান্ড-লাইন ইন্টারফেস (CLI) অন্তর্ভুক্ত থাকে যা আপনার কোডিং এজেন্ট বা আপনাকে স্ট্যান্ডার্ড শেল কমান্ড হিসেবে DevTools টুল চালাতে দেয়। MCP সার্ভারের মাধ্যমে ডাইনামিকভাবে টুল কল করার পরিবর্তে, আপনার এজেন্ট শেল কমান্ড হিসেবে একই অ্যাকশন লেখে এবং সেগুলিকে একটি স্ক্রিপ্টে চেইন করতে পারে যা আপনি যেকোনও সময় আবার চালাতে পারবেন। যেমন, আপনার এজেন্ট এই ধরনের স্ক্রিপ্ট তৈরি করতে পারে:
chrome-devtools new_page "https://example.com"
chrome-devtools take_snapshot 1
chrome-devtools fill 1 "1_4" "hello"
MCP সার্ভার ও CLI, দুটিই একই ইঞ্জিনের সাথে কানেক্ট করে: একটি পারসিস্টেন্ট ব্যাকগ্রাউন্ড ডেমন যা Chrome DevTools Protocol (CDP)-এর মাধ্যমে Chrome-এর সাথে যোগাযোগ করে। পার্থক্য হল, আপনার এজেন্ট কীভাবে সেই ইঞ্জিনে পৌঁছায়:
- MCP সার্ভার: আপনার এজেন্ট JSON-RPC ব্যবহার করে স্ট্যান্ডার্ড ইনপুট/আউটপুটের মাধ্যমে কানেক্ট করে এবং প্রতিটি ব্রাউজার টুলকে ইন্টার্যাক্টিভ ফাংশন কল হিসেবে বিবেচনা করে।
- CLI: আপনার এজেন্ট একই ব্যাকগ্রাউন্ড ডেমন-এর বিরুদ্ধে সরাসরি শেল কমান্ড এক্সিকিউট করে।
আপনি CLI ব্যবহার করে নিম্নলিখিত কাজগুলি করতে পারবেন:
- ওয়ার্কফ্লো বজায় রাখা: এক্সপ্লোরেটরি ডিবাগিং সেশন চলাকালীন আপনার এজেন্ট যেসব অ্যাকশন নিয়েছে, সেগুলিকে আবার ব্যবহারযোগ্য স্ক্রিপ্টে পরিণত করুন।
- অ্যাপ্লিকেশনের স্ট্যাটাস আবার তৈরি করা: আবার ডিবাগ করার আগে ব্রাউজারকে পরিচিত স্ট্যাটাসে ফিরিয়ে আনতে স্ক্রিপ্ট আবার রান করুন।
- ব্যাচ অ্যাকশন: প্রতিটি ধাপের মধ্যে কথোপকথনের পালা ছাড়াই নেভিগেশন, ইনপুট, এমুলেশন এবং ইন্সপেকশন কমান্ডের একটি ক্রম চালান।
- AI এজেন্ট ছাড়াই স্ক্রিপ্ট রান করুন: অ্যাক্টিভ LLM সেশন বা MCP ক্লায়েন্ট ছাড়াই, শেল স্ক্রিপ্ট রান করতে পারে এমন যেকোনও টার্মিনাল, সাবশেল বা CI কন্টেনার থেকে জেনারেট করা স্ক্রিপ্ট রান করুন।
CLI ও MCP সার্ভারের মধ্যে বেছে নিন
CLI এবং MCP সার্ভারের মধ্যে বেছে নেওয়া হল খরচ, প্রসঙ্গ এবং ওয়ার্কফ্লো সম্পর্কে একটি ইঞ্জিনিয়ারিং সিদ্ধান্ত।
- কনটেক্সট উইন্ডো খরচ: আপনি যখন MCP সার্ভার রেজিস্টার করেন, তখন প্রতিটি কথোপকথনে আপনার LLM-এর সিস্টেম প্রম্পটে প্রতিটি টুল সংজ্ঞা এবং JSON স্কিমা ইনজেক্ট করা হয়। CLI স্কিলের মাধ্যমে, আপনার এজেন্ট শুধুমাত্র একটি কম্প্যাক্ট Markdown সারসংক্ষেপ লোড করে এবং যখন এটি সম্পূর্ণ স্কিল পড়ার সিদ্ধান্ত নেয় এবং প্রয়োজনীয় কমান্ড তৈরি করে তখন টোকেন খরচ প্রদান করে। দীর্ঘ, মাল্টি-টার্ন এজেন্ট সেশনের জন্য, সেই পার্থক্য খরচ এবং লেটেন্সি উভয় ক্ষেত্রেই যোগ হয়।
- এক্সপ্লোরেশন বনাম এক্সিকিউশন: আপনি বা আপনার এজেন্ট, কেউই যখন জানেন না যে কী পরীক্ষা করতে হবে, তখন ডায়নামিক, এক্সপ্লোরেটরি ডিবাগিংয়ের ক্ষেত্রে MCP টুল দারুণ কাজ করে। যেহেতু আপনার এজেন্ট উপলভ্য সব টুল সম্পর্কে আগে থেকেই জানে, তাই লক্ষ্যে পৌঁছানোর জন্য সেগুলি ব্যবহার করার সম্ভাবনা বেশি। পাথ আগে থেকেই জানা থাকলে, CLI আপনাকে শুধু প্রয়োজনীয় ধাপগুলি রান করতে দেয়।
- পুনর্ব্যবহারযোগ্যতা: আপনি CLI স্ক্রিপ্ট সেভ করতে, কোনও স্কিলে এটি আবার ব্যবহার করতে অথবা এজেন্ট লুপের বাইরে ম্যানুয়ালি এটি রান করতে পারবেন। আপনি MCP টুল কলের মাধ্যমে তা করতে পারবেন না।
| MCP সার্ভার ব্যবহার করুন যখন | CLI ব্যবহার করুন যখন |
|---|---|
| আপনি কোনও অজানা সমস্যা তদন্ত করছেন এবং আপনার সম্পূর্ণ টুলবক্স প্রয়োজন। | আপনি আগে থেকেই ধাপগুলি জানেন এবং সেগুলি নির্ভরযোগ্যভাবে পুনরাবৃত্তি করতে চান। |
| আপনি লাইভ, ডায়নামিক সমস্যা সমাধান এবং গভীর ব্রাউজার ইন্ট্রোস্পেকশন চান। | আপনি টোকেন-দক্ষ এজেন্ট দক্ষতা বা টার্মিনাল-ভিত্তিক অটোমেশন চান। |
| আপনার এজেন্ট MCP সাপোর্ট সহ IDE বা ক্লায়েন্টে রান করে। | আপনার এনভায়রনমেন্টে MCP ক্লায়েন্ট কাজ করে না। |
CLI ব্যবহার করার সময়, নিম্নলিখিত বিষয়গুলি মনে রাখবেন:
- টুল কভারেজ: CLI শেল-ভিত্তিক অটোমেশনের জন্য এজেন্টের জন্য Chrome DevTools-এর বেশিরভাগ টুল সাপোর্ট করে। কমান্ডের সম্পূর্ণ তালিকা দেখতে, CLI স্কিল রেফারেন্স দেখুন।
- ইমপ্লিসিট স্টার্টআপ: প্রথমবার ব্যবহার করার সময় ব্যাকগ্রাউন্ড সার্ভার অটোমেটিক শুরু হয়;
প্রতিটি কমান্ডের আগে আপনাকে
start,statusবাstopরান করতে হবে না। - পারসিস্টেন্ট স্টেট: ব্রাউজার স্টেট সব কমান্ড জুড়ে পারসিস্ট করে, তাই আপনি একটি কমান্ডে যে পৃষ্ঠাটি খোলেন সেটি স্পষ্টভাবে বন্ধ না করা হলে পরবর্তী কমান্ডেও উপলভ্য থাকে।
- পৃষ্ঠা আইডি এবং এলিমেন্ট UID: বেশিরভাগ কমান্ড প্রথম আর্গুমেন্ট হিসেবে পৃষ্ঠা আইডি
গ্রহণ করে। এটি খুঁজতে
chrome-devtools list_pagesরান করুন এবং আপনি যে এলিমেন্টের সাথে ইন্টার্যাক্ট করতে চান সেটির UID পেতেchrome-devtools take_snapshotরান করুন। - আউটপুট ফর্ম্যাট: আউটপুট ডিফল্ট হিসেবে সাধারণ Markdown-এর মতো টেক্সট দেখায়। অন্য স্ক্রিপ্ট বা CI পাইপলাইনে ফলাফল ব্যবহার করতে চাইলে
--output-format=jsonপাস করুন। - ফাইল অ্যাক্সেস: ডিফল্ট হিসেবে, ফাইল-সেভিং প্যারামিটার ও
upload_file-এর জন্য CLI-এর কাছে সম্পূর্ণ ফাইল সিস্টেম অ্যাক্সেস থাকে। OS টেম্প ডিরেক্টরিতে ফাইল অ্যাক্সেস সীমাবদ্ধ করতে--allowUnrestrictedPaths=falseপাস করুন। - CI-তে Lighthouse: আপনি CLI থেকে
lighthouse_auditচালাতে পারেন, তবে CI-তে শুধু Lighthouse স্কোর প্রয়োজন হলে, স্ট্যান্ডঅ্যালোন Lighthouse CLI এবং এর GitHub অ্যাকশন আরও হালকা ফিট। - ব্রাউজার অটোমেশন স্ক্রিপ্টের চেয়ে সহজ অ্যাবস্ট্র্যাকশন: JavaScript বা TypeScript-এ সম্পূর্ণ Puppeteer বা Playwright স্ক্রিপ্ট লেখার পরিবর্তে, DevTools CLI একটি সীমিত, অত্যন্ত টার্গেট করা API সারফেস প্রদান করে। এই শেল সিনট্যাক্স মানুষের পক্ষে পড়া ও বজায় রাখা সহজ এবং এমনকি নিম্ন-স্তরের মডেলের পক্ষেও হ্যালুসিনেশন ছাড়াই নির্ভরযোগ্যভাবে তৈরি করা উল্লেখযোগ্যভাবে সহজ।
পূর্বশর্ত
CLI ব্যবহার করার আগে, আপনার কাছে নিম্নলিখিতগুলি আছে কিনা তা নিশ্চিত করুন:
- এজেন্টের জন্য Chrome DevTools ইনস্টল করা থাকলে: শুরু করার নির্দেশিকা অনুসরণ করুন। এজেন্ট-নির্দিষ্ট প্লাগ-ইন এবং এক্সটেনশন (যেমন, Gemini CLI এক্সটেনশন) MCP সার্ভারের পাশাপাশি এজেন্টিক দক্ষতা অন্তর্ভুক্ত করে।
- আপনার শেলে CLI উপলভ্য: ইনস্টলেশন হল এককালীন ধাপ এবং এটি নিয়মিত এজেন্ট ওয়ার্কফ্লোর অংশ নয়। ইনস্টলেশন রেফারেন্স দেখুন।
chrome-devtools-cliস্কিল (এজেন্টের জন্য Chrome DevTools-এর সাথে ইনস্টল করা): এই স্কিল আপনার এজেন্টকে শেখায় কীভাবে শেল স্ক্রিপ্ট লিখতে হয় বা CLI-এর মাধ্যমে শেল কমান্ড রান করতে হয়।
কমান্ড স্ট্রাকচার
কমান্ড chrome-devtools <tool> [arguments] [flags] প্যাটার্ন ফলো করে।
প্রয়োজনীয় আর্গুমেন্ট পজিশনাল এবং ঐচ্ছিক আর্গুমেন্ট ফ্ল্যাগ ব্যবহার করে। বিস্তারিত জানতে যেকোনও কমান্ডে
--help ব্যবহার করুন।
যেমন:
chrome-devtools new_page "https://example.com" # Open a page
chrome-devtools list_pages # Find the page ID
chrome-devtools take_snapshot 1 # Get element UIDs for page 1
chrome-devtools fill 1 "1_4" "hello" # Fill an input
chrome-devtools click 1 "1_7" --includeSnapshot true
chrome-devtools list_console_messages 1 --types error
chrome-devtools take_screenshot 1 --filePath "result.png"
Chrome DevTools CLI-এর জন্য ব্যবহারের উদাহরণ
আপনার এজেন্টকে নির্দেশ দিন যাতে এটি প্রতিটি সেশনে একই ব্রাউজার ফ্লো আবার সমাধান করার পরিবর্তে, স্ক্রিপ্ট হিসেবে আগে থেকে খুঁজে পাওয়া ধাপগুলি ক্যাপচার করে।
ডিবাগিং সেশনকে আবার ব্যবহারযোগ্য স্ক্রিপ্ট হিসেবে সেভ করুন
MCP-তে এক্সপ্লোরেটরি ডিবাগিং সেশনের পরে, আপনি প্রায়ই একই সমস্যা আবার দেখা যাবে না বলে গ্যারান্টি দিতে পারেন না। পরের বার রিপ্রোডাকশন স্টেপ আবার ব্যাখ্যা করার পরিবর্তে, আপনার এজেন্টকে বলুন যে এটি যে ফ্লোটি এক্সিকিউট করেছে তা লিখে রাখতে।
প্রম্পটের উদাহরণ:
Please write a chrome-devtools CLI script for this user flow, and save it as test.sh.
এজেন্ট এক্সিকিউশনের উদাহরণ: আপনার এজেন্ট সেশন চলাকালীন নেভিগেশন, ইনপুট এবং
ইন্সপেকশন সংক্রান্ত যেসব পদক্ষেপ নিয়েছে সেগুলি পর্যালোচনা করে এবং সেগুলিকে chrome-devtools কমান্ডের
একটি সিকোয়েন্সে অনুবাদ করে, যেমন new_page, take_snapshot, fill,
click এবং list_console_messages। এটি স্ক্রিপ্টকে test.sh হিসেবে সেভ করে। পরের বার
আপনি এই এরিয়া ডিবাগ করার সময়, আপনার এজেন্টকে স্ক্রিপ্টে পয়েন্ট করতে পারেন যাতে আবার একই
অবস্থায় পৌঁছানো যায় অথবা ম্যানুয়ালি ডিবাগ করার জন্য এজেন্ট লুপের বাইরে এটি রান করতে পারেন।
তদন্ত করার আগে কোনও অ্যাপ্লিকেশনের অবস্থা আবার তৈরি করুন
একাধিক ধাপে চেক-আউট বা ফিল্টার করা ড্যাশবোর্ডের মতো জটিল অবস্থা, এজেন্টের পক্ষে প্রতিবার কথোপকথনের মাধ্যমে পুনর্নির্মাণ করা ব্যয়বহুল। নতুন তদন্ত শুরু করার জন্য সেভ করা স্ক্রিপ্ট ব্যবহার করুন।
প্রম্পটের উদাহরণ:
Run ./scripts/checkout-flow.sh to get the browser into the payment step, then check why the "Pay now" button stays disabled after I select Google Pay.
এজেন্ট এক্সিকিউশনের উদাহরণ: আপনার এজেন্ট স্ক্রিপ্ট রান করে, যা চেকআউটে নেভিগেট করে,
ঠিকানার ফর্ম পূরণ করে এবং শিপিংয়ের বিকল্প বেছে নেয়। যেহেতু ব্রাউজার
স্টেট সব কমান্ড জুড়ে থাকে, তাই আপনার এজেন্ট একই পৃষ্ঠায় take_snapshot এবং
evaluate_script ব্যবহার করে বোতামের স্টেট এবং পেমেন্ট সিলেক্টরের সাথে অ্যাটাচ করা ইভেন্ট
হ্যান্ডলার চেক করে।
ভিউপোর্ট জুড়ে ব্যাচ ভিজ্যুয়াল চেক
বিভিন্ন স্ক্রিন সাইজ জুড়ে লেআউট পরিবর্তন যাচাই করা পুনরাবৃত্তিমূলক এবং সাধারণত ম্যানুয়ালি করা হয়। আপনার এজেন্টকে এমন একটি স্ক্রিপ্টের জন্য জিজ্ঞাসা করুন যা এমুলেশন সেটিংস প্রয়োগ করে এবং একবার রান করার মাধ্যমে প্রতিটির জন্য প্রমাণ ক্যাপচার করে।
প্রম্পটের উদাহরণ:
Write a chrome-devtools CLI script that opens http://localhost:3000/pricing, captures a full-page screenshot at 375x667, 768x1024, and 1920x1080, and saves them to ./screenshots with the viewport size in the filename.
এজেন্ট এক্সিকিউশনের উদাহরণ: আপনার এজেন্ট একটি লুপ লেখে যা প্রতিটি ভিউপোর্টের জন্য
chrome-devtools emulate 1 --viewport "<size>" এবং তারপরে chrome-devtools
take_screenshot 1 --fullPage true --filePath "./screenshots/pricing-<size>.png"
কল করে। আপনি কোনও কথোপকথন না খুলেই প্রতিটি CSS পরিবর্তনের পরে স্ক্রিপ্টটি আবার চালাতে পারেন।
কোনও MCP ক্লায়েন্ট উপলভ্য না থাকলে ফ্লো স্মোক-টেস্ট করুন
CI কন্টেনার বা লক-ডাউন এন্টারপ্রাইজ সেট-আপের মতো কিছু এনভায়রনমেন্টে MCP ক্লায়েন্ট কাজ করে না। ভার্চুয়ালি প্রতিটি টার্মিনাল, সাবশেল, CI কন্টেনার ও এজেন্ট ফ্রেমওয়ার্ক স্ট্যান্ডার্ড শেল স্ক্রিপ্ট রান করা ও stdout রিড করার সুবিধা দেয়, যার ফলে CLI এইসব জায়গায় লাইটওয়েট চেকের জন্য উপযুক্ত হয়ে ওঠে।
প্রম্পটের উদাহরণ:
Create a shell script that opens the sign-up page on the staging URL passed as the first argument, submits the form with test data, and exits with a non-zero code if any console errors are logged. Use --output-format=json so the script can parse the result.
এজেন্ট এক্সিকিউশনের উদাহরণ: আপনার এজেন্ট এমন একটি স্ক্রিপ্ট লেখে যা new_page,
take_snapshot, fill এবং click ব্যবহার করে, তারপর list_console_messages 1
--types error --output-format=json কল করে এবং এক্সিট কোড নির্ধারণ করতে JSON আউটপুট পার্স করে।
ওয়ার্কফ্লোকে লাইটওয়েট স্কিল হিসেবে প্যাকেজ করা
কোনও ফ্লো যদি বিভিন্ন প্রোজেক্ট বা টিমমেটদের জন্য উপযোগী হয়, তাহলে আপনার এজেন্ট স্ক্রিপ্টটি একটি স্কিলে র্যাপ করতে পারে। এটি হল DevTools CLI স্কিল: একটি লাইটওয়েট রেফারেন্স যা আপনার এজেন্টকে সব টুলের জন্য টোকেনের আগাম খরচ না দিয়েই নির্দিষ্ট ব্রাউজার কমান্ড রান করতে দেয়।
প্রম্পটের উদাহরণ:
Turn ./scripts/checkout-flow.sh into a skill named "reproduce-checkout" with a short description of when to use it, so I can invoke it in future sessions.
এজেন্ট এক্সিকিউশনের উদাহরণ: আপনার এজেন্ট একটি নাম, কখন স্কিলটি প্রযোজ্য হবে তার এক লাইনের বিবরণ এবং স্ক্রিপ্টকে রেফারেন্স করে এমন নির্দেশাবলী সহ একটি SKILL.md তৈরি করে। পরবর্তী সেশনে, এজেন্ট সম্পূর্ণ স্কিল তখনই পড়ে যখন টাস্কটি
তার বিবরণের সাথে মেলে।
পরবর্তী ধাপ
- CLI কমান্ড ও ফ্ল্যাগের সম্পূর্ণ তালিকা দেখতে, CLI স্কিল রেফারেন্স দেখুন।
- আন্ডারলাইং সার্ভার (হেডলেস মোড, চ্যানেল, পরীক্ষামূলক বিভাগ) কনফিগার করতে, কনফিগারেশন দেখুন।