প্রকাশিত: ২৩ সেপ্টেম্বর, ২০২৫
আমরা আজ নতুন Chrome DevTools মডেল কনটেক্সট প্রোটোকল (MCP) সার্ভারের জন্য একটি পাবলিক প্রিভিউ চালু করছি, যা AI কোডিং সহকারীদের জন্য Chrome DevTools-এর শক্তি নিয়ে আসবে।
কোডিং এজেন্টরা একটি মৌলিক সমস্যার সম্মুখীন হয়: তারা ব্রাউজারে চলার সময় তাদের তৈরি করা কোডটি আসলে কী করে তা দেখতে সক্ষম হয় না। তারা কার্যকরভাবে চোখ বেঁধে প্রোগ্রামিং করছে।
Chrome DevTools MCP সার্ভার এটি পরিবর্তন করে। AI কোডিং সহকারীরা সরাসরি Chrome-এ ওয়েব পৃষ্ঠাগুলি ডিবাগ করতে সক্ষম হয় এবং DevTools ডিবাগিং ক্ষমতা এবং কর্মক্ষমতা অন্তর্দৃষ্টি থেকে উপকৃত হয়। এটি সমস্যাগুলি সনাক্তকরণ এবং সমাধান করার সময় তাদের নির্ভুলতা উন্নত করে।
এটি কীভাবে কাজ করে তা নিজেই দেখুন:
মডেল কনটেক্সট প্রোটোকল (MCP) কী?
মডেল কনটেক্সট প্রোটোকল (MCP) হল বৃহৎ ভাষা মডেল (LLM) কে বহিরাগত সরঞ্জাম এবং ডেটা উৎসের সাথে সংযুক্ত করার জন্য একটি ওপেন-সোর্স স্ট্যান্ডার্ড। Chrome DevTools MCP সার্ভার আপনার AI এজেন্টে ডিবাগিং ক্ষমতা যোগ করে।
উদাহরণস্বরূপ, Chrome DevTools MCP সার্ভার performance_start_trace নামে একটি টুল প্রদান করে। যখন আপনার ওয়েবসাইটের পারফরম্যান্স তদন্ত করার দায়িত্ব দেওয়া হয়, তখন একজন LLM এই টুলটি ব্যবহার করে Chrome শুরু করতে, আপনার ওয়েবসাইট খুলতে এবং Chrome DevTools ব্যবহার করে একটি পারফরম্যান্স ট্রেস রেকর্ড করতে পারে। LLM তারপর সম্ভাব্য উন্নতির পরামর্শ দেওয়ার জন্য পারফরম্যান্স ট্রেস বিশ্লেষণ করতে পারে। MCP প্রোটোকল ব্যবহার করে, Chrome DevTools MCP সার্ভার ওয়েবসাইট তৈরিতে আরও ভালো করার জন্য আপনার কোডিং এজেন্টে নতুন ডিবাগিং ক্ষমতা আনতে পারে।
MCP কীভাবে কাজ করে সে সম্পর্কে আরও জানতে চাইলে, MCP ডকুমেন্টেশনটি দেখুন।
তুমি এটা কিসের জন্য ব্যবহার করতে পারো?
আপনার পছন্দের AI সহকারী, যেমন Gemini CLI, ব্যবহার করে দেখতে পারেন এমন কিছু প্রম্পট নিচে দেওয়া হল।
রিয়েল-টাইমে কোড পরিবর্তনগুলি যাচাই করুন
আপনার AI এজেন্টের সাথে একটি সমাধান তৈরি করুন, এবং তারপর স্বয়ংক্রিয়ভাবে যাচাই করুন যে সমাধানটি 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?
লাইভ স্টাইলিং এবং লেআউট সংক্রান্ত সমস্যাগুলি ডিবাগ করুন
আপনার AI এজেন্টকে একটি লাইভ পৃষ্ঠার সাথে সংযোগ করতে বলুন, DOM এবং CSS পরিদর্শন করুন এবং ব্রাউজার থেকে লাইভ ডেটার উপর ভিত্তি করে উপচে পড়া উপাদানের মতো জটিল লেআউট সমস্যাগুলি সমাধান করার জন্য সুনির্দিষ্ট পরামর্শ পান।
চেষ্টা করার জন্য অনুরোধ করুন:
The page on localhost:8080 looks strange and off. Check what's happening there.
স্বয়ংক্রিয় কর্মক্ষমতা নিরীক্ষা
আপনার AI এজেন্টকে একটি পারফরম্যান্স ট্রেস চালানোর নির্দেশ দিন, ফলাফল বিশ্লেষণ করুন এবং উচ্চ LCP নম্বরের মতো নির্দিষ্ট পারফরম্যান্স সমস্যাগুলি তদন্ত করুন।
চেষ্টা করার জন্য অনুরোধ করুন:
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.
আরও বিস্তারিত জানার জন্য, GitHub-এ Chrome DevTools MCP ডকুমেন্টেশনটি দেখুন।
জড়িত হন
আমরা ক্রোম ডেভটুলস এমসিপি ক্রমান্বয়ে তৈরি করছি, আজ আমরা যে পাবলিক প্রিভিউ ভার্সনটি প্রকাশ করছি তা দিয়ে শুরু করছি। পরবর্তীতে আমাদের কোন কোন ক্ষমতা যুক্ত করা উচিত সে সম্পর্কে আমরা আপনার এবং সম্প্রদায়ের কাছ থেকে প্রতিক্রিয়া জানতে চাইছি। আপনি যদি AI কোডিং অ্যাসিস্ট্যান্ট ব্যবহারকারী একজন ডেভেলপার হন অথবা পরবর্তী প্রজন্মের AI ডেভেলপমেন্ট টুল তৈরির জন্য একজন বিক্রেতা হন, তাহলে আপনার অন্তর্দৃষ্টি অমূল্য হবে এবং যদি কিছু অনুপস্থিত থাকে বা কাজ না করে, তাহলে অনুগ্রহ করে GitHub-এ একটি সমস্যা দায়ের করুন।