প্রকাশিত: 23 সেপ্টেম্বর, 2025
আমরা আজ নতুন Chrome DevTools মডেল কনটেক্সট প্রোটোকল (MCP) সার্ভারের জন্য একটি সর্বজনীন প্রিভিউ লঞ্চ করছি, Chrome DevTools-এর শক্তি AI কোডিং সহকারীগুলিতে নিয়ে আসছে৷
কোডিং এজেন্টরা একটি মৌলিক সমস্যার সম্মুখীন হয়: ব্রাউজারে চালানোর সময় তারা যে কোড তৈরি করে তা আসলে কী করে তা তারা দেখতে সক্ষম হয় না। তারা কার্যকরভাবে একটি চোখ বেঁধে প্রোগ্রামিং করছি.
Chrome DevTools MCP সার্ভার এটি পরিবর্তন করে। AI কোডিং সহকারীরা সরাসরি Chrome-এ ওয়েব পৃষ্ঠাগুলি ডিবাগ করতে সক্ষম এবং DevTools ডিবাগিং ক্ষমতা এবং কর্মক্ষমতা অন্তর্দৃষ্টি থেকে উপকৃত হয়৷ সমস্যাগুলি সনাক্তকরণ এবং সমাধান করার সময় এটি তাদের নির্ভুলতা উন্নত করে৷
এটি কীভাবে কাজ করে তা নিজের জন্য দেখুন:
মডেল কনটেক্সট প্রোটোকল (MCP) কি?
মডেল কনটেক্সট প্রোটোকল (MCP) হল একটি ওপেন-সোর্স স্ট্যান্ডার্ড যা বৃহৎ ভাষা মডেল (LLMs) কে বাহ্যিক সরঞ্জাম এবং ডেটা উত্সের সাথে সংযুক্ত করার জন্য। 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 ডকুমেন্টেশন দেখুন।
জড়িত হন
আমরা ক্রমবর্ধমানভাবে Chrome DevTools MCP তৈরি করছি, যা আমরা আজ প্রকাশ করছি সর্বজনীন প্রিভিউ সংস্করণ দিয়ে শুরু করছি। আমরা সক্রিয়ভাবে আপনার এবং সম্প্রদায়ের কাছ থেকে প্রতিক্রিয়া খুঁজছি যা পরবর্তীতে আমাদের যোগ করা উচিত। আপনি AI কোডিং অ্যাসিস্ট্যান্ট ব্যবহার করে একজন ডেভেলপার হোন বা পরবর্তী প্রজন্মের AI ডেভেলপমেন্ট টুল তৈরি করছেন, আপনার অন্তর্দৃষ্টি অমূল্য হবে এবং যদি কিছু অনুপস্থিত থাকে বা কাজ না করে, অনুগ্রহ করে GitHub-এ একটি সমস্যা ফাইল করুন।