প্রকাশিত: ২৩ সেপ্টেম্বর, ২০২৫
আমরা আজ নতুন Chrome DevTools মডেল কনটেক্সট প্রোটোকল (MCP) সার্ভারের একটি পাবলিক প্রিভিউ চালু করছি, যা AI কোডিং অ্যাসিস্ট্যান্টদের কাছে Chrome DevTools-এর ক্ষমতা নিয়ে আসছে।
কোডিং এজেন্টরা একটি মৌলিক সমস্যার সম্মুখীন হয়: তাদের তৈরি করা কোড ব্রাউজারে চলার সময় আসলে কী করে, তা তারা দেখতে পায় না। তারা কার্যত চোখে পট্টি বেঁধে প্রোগ্রামিং করে।
ক্রোম ডেভটুলস এমসিপি সার্ভার এই অবস্থার পরিবর্তন ঘটায়। এআই কোডিং অ্যাসিস্ট্যান্টগুলো সরাসরি ক্রোমে ওয়েব পেজ ডিবাগ করতে পারে এবং ডেভটুলসের ডিবাগিং সক্ষমতা ও পারফরম্যান্স ইনসাইট থেকে সুবিধা লাভ করে। এর ফলে সমস্যা শনাক্ত ও সমাধান করার ক্ষেত্রে তাদের নির্ভুলতা বৃদ্ধি পায়।
এটি কীভাবে কাজ করে তা নিজেই দেখুন:
মডেল কনটেক্সট প্রোটোকল (MCP) বলতে কী বোঝায়?
মডেল কনটেক্সট প্রোটোকল (MCP) হলো বৃহৎ ল্যাঙ্গুয়েজ মডেল (LLM)-কে বাহ্যিক টুল এবং ডেটা সোর্সের সাথে সংযুক্ত করার একটি ওপেন-সোর্স স্ট্যান্ডার্ড। ক্রোম ডেভটুলস MCP সার্ভার আপনার AI এজেন্টে ডিবাগিং সক্ষমতা যোগ করে।
উদাহরণস্বরূপ, Chrome DevTools MCP সার্ভার performance_start_trace নামক একটি টুল প্রদান করে। আপনার ওয়েবসাইটের পারফরম্যান্স তদন্ত করার দায়িত্ব পেলে, একজন LLM এই টুলটি ব্যবহার করে Chrome চালু করতে, আপনার ওয়েবসাইট খুলতে এবং Chrome DevTools ব্যবহার করে একটি পারফরম্যান্স ট্রেস রেকর্ড করতে পারে। এরপর LLM সম্ভাব্য উন্নতির পরামর্শ দেওয়ার জন্য পারফরম্যান্স ট্রেসটি বিশ্লেষণ করতে পারে। MCP প্রোটোকল ব্যবহার করে, Chrome DevTools MCP সার্ভার আপনার কোডিং এজেন্টে নতুন ডিবাগিং ক্ষমতা যোগ করতে পারে, যা ওয়েবসাইট তৈরিতে এটিকে আরও দক্ষ করে তোলে।
এমসিপি কীভাবে কাজ করে সে সম্পর্কে আরও জানতে চাইলে, এমসিপি ডকুমেন্টেশন দেখুন।
এটা দিয়ে কী করা যায়?
নিচে কয়েকটি উদাহরণমূলক নির্দেশ দেওয়া হলো, যা আপনি আপনার পছন্দের এআই অ্যাসিস্ট্যান্ট, যেমন জেমিনি সিএলআই-তে চেষ্টা করে দেখতে পারেন।
রিয়েল-টাইমে কোডের পরিবর্তন যাচাই করুন
আপনার এআই এজেন্টের সাহায্যে একটি সমাধান তৈরি করুন, এবং তারপরে Chrome DevTools MCP ব্যবহার করে স্বয়ংক্রিয়ভাবে যাচাই করুন যে সমাধানটি উদ্দেশ্য অনুযায়ী কাজ করছে কিনা।
চেষ্টা করার জন্য প্রম্পট:
Verify in the browser that your change works as expected.
নেটওয়ার্ক এবং কনসোল ত্রুটি নির্ণয় করুন
আপনার এজেন্টকে নেটওয়ার্ক অনুরোধ বিশ্লেষণ করে CORS সমস্যা উদ্ঘাটন করতে অথবা কোনো ফিচার কেন প্রত্যাশা অনুযায়ী কাজ করছে না তা বোঝার জন্য কনসোল লগ পরীক্ষা করতে ক্ষমতা দিন।
চেষ্টা করার জন্য প্রম্পট:
A few images on localhost:8080 are not loading. What's happening?
ব্যবহারকারীর আচরণ অনুকরণ করুন
বাগ পুনরুৎপাদন করতে এবং জটিল ইউজার ফ্লো পরীক্ষা করতে নেভিগেট করুন, ফর্ম পূরণ করুন এবং বোতামে ক্লিক করুন—এই সবকিছুই করুন এবং একই সাথে রানটাইম এনভায়রনমেন্ট পর্যবেক্ষণ করুন।
চেষ্টা করার জন্য প্রম্পট:
Why does submitting the form fail after entering an email address?
লাইভ স্টাইলিং এবং লেআউটের সমস্যা ডিবাগ করুন
আপনার এআই এজেন্টকে একটি লাইভ পেজে সংযোগ করতে, DOM ও CSS পরীক্ষা করতে এবং ব্রাউজার থেকে পাওয়া লাইভ ডেটার উপর ভিত্তি করে ওভারফ্লো হওয়া এলিমেন্টের মতো জটিল লেআউট সমস্যা সমাধানের জন্য সুনির্দিষ্ট পরামর্শ নিতে বলুন।
চেষ্টা করার জন্য প্রম্পট:
The page on localhost:8080 looks strange and off. Check what's happening there.
কর্মক্ষমতা নিরীক্ষা স্বয়ংক্রিয় করুন
আপনার এআই এজেন্টকে পারফরম্যান্স ট্রেস চালাতে, ফলাফল বিশ্লেষণ করতে এবং উচ্চ এলসিপি সংখ্যার মতো নির্দিষ্ট পারফরম্যান্স সমস্যাগুলো তদন্ত করতে নির্দেশ দিন।
চেষ্টা করার জন্য প্রম্পট:
Localhost:8080 is loading slowly. Make it load faster.
উপলব্ধ সকল টুলের তালিকার জন্য আমাদের টুল রেফারেন্স ডকুমেন্টেশন দেখুন।
শুরু করুন
এটি পরীক্ষা করার জন্য, আপনার MCP ক্লায়েন্টে নিম্নলিখিত কনফিগ এন্ট্রিটি যোগ করুন:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
এটি কাজ করছে কিনা তা পরীক্ষা করতে, আপনার কোডিং এজেন্টে নিম্নলিখিত প্রম্পটটি চালান:
Please check the LCP of web.dev.
আরও বিস্তারিত জানতে, গিটহাবে Chrome DevTools MCP ডকুমেন্টেশন দেখুন।
যুক্ত হোন
আজ আমরা যে পাবলিক প্রিভিউ সংস্করণটি প্রকাশ করছি, তা দিয়ে শুরু করে আমরা পর্যায়ক্রমে Chrome DevTools MCP তৈরি করছি। পরবর্তীতে আমাদের কোন কোন ফিচার যোগ করা উচিত, সে বিষয়ে আমরা আপনার এবং কমিউনিটির কাছ থেকে সক্রিয়ভাবে মতামত খুঁজছি। আপনি এআই কোডিং অ্যাসিস্ট্যান্ট ব্যবহারকারী একজন ডেভেলপার হোন বা পরবর্তী প্রজন্মের এআই ডেভেলপমেন্ট টুলস নির্মাণকারী কোনো ভেন্ডর হোন, আপনার মতামত অমূল্য হবে এবং যদি কোনো কিছু অনুপস্থিত থাকে বা কাজ না করে, তবে অনুগ্রহ করে GitHub-এ একটি ইস্যু ফাইল করুন।